0

0

如何在JavaScript中实现继承?

冰火之心

冰火之心

发布时间:2025-05-07 08:09:01

|

902人浏览过

|

来源于php中文网

原创

javascript中实现继承的主要方式有:1.原型链继承,2.构造函数继承,3.组合继承,4.原型式继承,5.寄生式继承,6.寄生组合式继承,7.es6类继承。寄生组合式继承和es6类继承是目前最推荐的做法,它们在性能和可维护性上表现较好。

如何在JavaScript中实现继承?

在JavaScript中实现继承有好几种方式,每一种都各有优缺点。在开始之前,我们要明白,JavaScript是一种基于原型的语言,而不是基于类的语言,尽管ES6引入了class语法,但它仍然是基于原型实现的。今天,我将分享几种实现继承的方法,并结合自己的经验来探讨它们的优劣。

首先,我们要搞清楚继承的本质:子类可以使用父类的属性和方法,并且可以根据需要重写或扩展这些方法。在JavaScript中,这可以通过原型链来实现。

原型链继承

原型链继承是JavaScript中最基础的继承方式。它的核心思想是让子类的原型指向父类的实例,从而继承父类的属性和方法。

立即学习Java免费学习笔记(深入)”;

function Parent(name) {
    this.name = name || 'Parent';
}

Parent.prototype.sayName = function() {
    console.log(`My name is ${this.name}`);
};

function Child(name) {
    Parent.call(this, name); // 调用父类构造函数
    this.name = name || 'Child';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child('Little Child');
child.sayName(); // 输出: My name is Little Child

这种方法的优点是简单直观,但也有缺点:子类实例共享父类原型上的引用类型属性,这可能导致意外的共享状态。此外,子类无法向父类构造函数传递参数,除非在子类构造函数中手动调用父类构造函数。

构造函数继承

为了解决原型链继承中的共享问题,我们可以使用构造函数继承。这种方法通过在子类构造函数中调用父类构造函数来实现。

function Parent(name) {
    this.name = name || 'Parent';
    this.colors = ['red', 'blue', 'green'];
}

function Child(name) {
    Parent.call(this, name); // 继承父类属性
    this.name = name || 'Child';
}

const child1 = new Child('Child 1');
const child2 = new Child('Child 2');

child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
console.log(child2.colors); // ['red', 'blue', 'green']

这种方法的优点是每个实例都有自己的属性,不会共享引用类型属性。但缺点是无法继承父类原型上的方法和属性。

组合继承

为了结合原型链和构造函数继承的优点,我们可以使用组合继承。这种方法既能继承父类原型上的方法,又能确保每个实例有自己的属性。

function Parent(name) {
    this.name = name || 'Parent';
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
    console.log(`My name is ${this.name}`);
};

function Child(name) {
    Parent.call(this, name); // 继承属性
    this.name = name || 'Child';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child('Little Child');
child.sayName(); // 输出: My name is Little Child

这种方法的优点是既能继承父类原型上的方法,又能确保每个实例有自己的属性。但缺点是父类构造函数被调用了两次,可能会导致性能问题。

原型式继承

原型式继承是Douglas Crockford提出的一种继承方式,它通过克隆一个对象来实现。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

const parent = {
    name: 'Parent',
    colors: ['red', 'blue', 'green'],
    sayName: function() {
        console.log(`My name is ${this.name}`);
    }
};

const child = object(parent);
child.name = 'Child';
child.sayName(); // 输出: My name is Child

这种方法的优点是简单,但缺点是所有实例共享同一个原型,引用类型属性会共享。

Boba.video
Boba.video

AI动漫视频生成器

下载

寄生式继承

寄生式继承是在原型式继承的基础上,增强对象的继承方式。

function createAnother(original) {
    const clone = Object.create(original);
    clone.sayHi = function() {
        console.log('Hi');
    };
    return clone;
}

const parent = {
    name: 'Parent',
    colors: ['red', 'blue', 'green'],
    sayName: function() {
        console.log(`My name is ${this.name}`);
    }
};

const child = createAnother(parent);
child.name = 'Child';
child.sayHi(); // 输出: Hi
child.sayName(); // 输出: My name is Child

这种方法的优点是可以增强对象,但缺点是每次创建对象都要重新定义方法,性能可能不如预期。

寄生组合式继承

寄生组合式继承是目前公认的最佳继承方式,它结合了寄生式继承和组合继承的优点,避免了组合继承中父类构造函数被调用两次的问题。

function inheritPrototype(child, parent) {
    const prototype = Object.create(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

function Parent(name) {
    this.name = name || 'Parent';
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
    console.log(`My name is ${this.name}`);
};

function Child(name) {
    Parent.call(this, name); // 继承属性
    this.name = name || 'Child';
}

inheritPrototype(Child, Parent);

const child = new Child('Little Child');
child.sayName(); // 输出: My name is Little Child

这种方法的优点是高效且灵活,缺点是实现起来相对复杂。

ES6类继承

ES6引入了class语法,使得继承更加直观和易于理解,但它仍然是基于原型链实现的。

class Parent {
    constructor(name) {
        this.name = name || 'Parent';
        this.colors = ['red', 'blue', 'green'];
    }

    sayName() {
        console.log(`My name is ${this.name}`);
    }
}

class Child extends Parent {
    constructor(name) {
        super(name); // 调用父类构造函数
        this.name = name || 'Child';
    }
}

const child = new Child('Little Child');
child.sayName(); // 输出: My name is Little Child

这种方法的优点是语法简洁,易于理解,但本质上仍然是基于原型链的。

总结与建议

在实际开发中,选择哪种继承方式取决于具体需求和项目背景。寄生组合式继承和ES6类继承是目前最常用且推荐的做法。它们在性能和可维护性上都有较好的表现。

我曾经在一个大型项目中使用了寄生组合式继承,结果发现它在处理复杂的继承关系时非常高效,但需要团队成员有一定的JavaScript基础知识。如果团队成员对原型链不熟悉,可能会导致一些理解上的困难。

在选择继承方式时,要考虑以下几点:

  • 性能:寄生组合式继承和ES6类继承在性能上表现较好。
  • 可读性:ES6类继承的语法更直观,适合新手。
  • 灵活性:寄生组合式继承在处理复杂继承关系时更灵活。

希望这篇文章能帮助你更好地理解JavaScript中的继承方式,并在实际开发中做出更明智的选择。如果你有任何问题或建议,欢迎留言讨论。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

234

2025.12.24

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

234

2025.12.24

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

bootstrap安装教程
bootstrap安装教程

本专题整合了bootstrap安装相关教程,阅读专题下面的文章了解更多详细操作教程。

22

2026.03.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
誉天教育RHCE视频教程
誉天教育RHCE视频教程

共9课时 | 1.5万人学习

尚观Linux RHCE视频教程(二)
尚观Linux RHCE视频教程(二)

共34课时 | 6.1万人学习

尚观RHCE视频教程(一)
尚观RHCE视频教程(一)

共28课时 | 5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号