0

0

js怎么实现原型链的组合继承

幻夢星雲

幻夢星雲

发布时间:2025-08-08 11:58:01

|

247人浏览过

|

来源于php中文网

原创

组合继承的核心在于两步:在子类构造函数中通过call或apply调用父类构造函数以继承属性;将父类的实例通过object.create(parent.prototype)赋值给子类原型以继承方法,并修正constructor指向。2. 这种方式既保证了实例属性的独立性,又实现了方法的共享,解决了原型链继承中引用类型属性共享的问题和构造函数继承中方法无法复用的缺点。3. 尽管存在父类构造函数可能被调用两次的潜在问题(若使用new parent()设置原型),但通过object.create可避免,且es6的class语法糖通过extends和super()自动完成了组合继承的所有步骤,包括属性继承、原型链连接和constructor修正,使继承实现更简洁、安全、可读。4. 因此,组合继承因其平衡性与实用性成为es6前最广泛使用的继承模式,而class语法则是其现代化、优雅的封装,推荐在现代javascript开发中优先使用。

js怎么实现原型链的组合继承

JavaScript中实现原型链的组合继承,核心在于两步:在子类的构造函数中调用父类的构造函数来继承属性,以及将父类的实例赋值给子类的原型以继承方法。这样既能保证每个实例有独立的属性,又能让所有实例共享父类的方法。

js怎么实现原型链的组合继承

解决方案

组合继承,顾名思义,就是将构造函数继承和原型链继承两者结合起来。我个人觉得,这是JavaScript早期最实用、也最被广泛接受的继承模式,因为它很好地平衡了属性的独立性和方法的共享性。

具体来说,我们通常这样做:

js怎么实现原型链的组合继承
  1. 属性继承: 在子类的构造函数内部,通过

    call
    apply
    方法调用父类的构造函数。这确保了父类构造函数中定义的实例属性(比如
    this.name
    )能够被子类的实例拥有,并且每个子类实例都有自己独立的这些属性副本,互不影响。这解决了原型链继承中引用类型属性共享的问题。

  2. 方法继承: 将父类的一个新实例赋值给子类的原型对象。这样,子类的所有实例都能通过原型链访问到父类原型上定义的方法。这里通常会用到

    Object.create()
    来创建一个新的对象,其原型指向父类的原型,然后将这个新对象赋值给子类的原型。这样做的好处是避免了直接将父类的实例作为子类的原型,从而避免了子类原型上不必要的父类实例属性。

    js怎么实现原型链的组合继承

同时,我们还需要修正子类原型的

constructor
属性,让它指向子类自身,否则它会指向父类,这在某些场景下可能会引起混淆。

// 父类
function Parent(name) {
    this.name = name;
    this.hobbies = ['reading', 'coding']; // 引用类型属性
}

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

Parent.prototype.addHobby = function(hobby) {
    this.hobbies.push(hobby);
};

// 子类
function Child(name, age) {
    // 1. 属性继承:调用父类构造函数,继承父类的实例属性
    Parent.call(this, name); // 确保子类实例拥有独立的name和hobbies属性
    this.age = age;
}

// 2. 方法继承:将父类原型上的方法继承给子类
// 使用 Object.create() 创建一个新对象,其原型指向 Parent.prototype
Child.prototype = Object.create(Parent.prototype);

// 修正 constructor 属性,使其指向 Child 构造函数
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
    console.log('I am ' + this.age + ' years old.');
};

// 实际使用
const child1 = new Child('Alice', 10);
child1.sayName(); // My name is Alice
child1.sayAge();  // I am 10 years old.
child1.addHobby('drawing');
console.log(child1.hobbies); // ["reading", "coding", "drawing"]

const child2 = new Child('Bob', 8);
child2.sayName(); // My name is Bob
child2.sayAge();  // I am 8 years old.
console.log(child2.hobbies); // ["reading", "coding"] - 验证了引用类型属性的独立性

// 验证原型链
console.log(child1 instanceof Child);  // true
console.log(child1 instanceof Parent); // true

这段代码展示了组合继承的完整流程。它巧妙地解决了JavaScript继承中的两个核心痛点:确保实例属性的独立性,以及实现方法的高效共享。

为什么组合继承被认为是JavaScript中最常用的继承模式?

说实话,在ES6的

class
语法出现之前,组合继承几乎是JavaScript社区公认的“最佳实践”继承模式。它之所以如此流行,主要有几个非常实际的原因:

首先,它完美地解决了“实例属性独立性”和“共享方法效率”之间的矛盾。在JavaScript中,如果你只用原型链继承,那么父类原型上的引用类型属性(比如数组或对象)会被所有子类实例共享,一个实例修改了,其他实例也会受影响,这显然不是我们想要的。而如果只用构造函数继承,虽然属性独立了,但每个实例都会创建一套自己的方法副本,这在内存上是巨大的浪费。组合继承则巧妙地规避了这两个问题,属性归实例独有,方法则通过原型链共享,效率和独立性兼得。

其次,它保持了

instanceof
操作符的正确性。
child1 instanceof Child
返回
true
child1 instanceof Parent
也返回
true
,这符合我们对继承关系的直观理解。这对于类型检查和多态性行为的实现非常重要。

再者,它的实现方式相对直观。虽然看起来有两步(调用构造函数和设置原型),但每一步的目的都非常明确,容易理解和调试。它不像寄生组合式继承那样,需要更深入地理解中间对象的创建。

所以,在我看来,组合继承的流行并非偶然,而是其在实际开发中展现出的强大实用性和鲁棒性,让它在很长一段时间内都是JavaScript开发者实现继承的首选。

Clickable
Clickable

用AI在几秒钟内生成广告

下载

组合继承有哪些潜在的缺点或需要注意的地方?

尽管组合继承被广泛使用,但它也并非完美无缺,存在一些值得我们注意的“小瑕疵”:

最大的一个“缺点”,或者说需要注意的地方,就是父类构造函数会被调用两次。你看,第一次是在子类构造函数内部通过

Parent.call(this, name)
调用,目的是继承实例属性。第二次则是在设置子类原型时,
Child.prototype = new Parent()
(虽然我上面的例子用了
Object.create(Parent.prototype)
避免了第二次实例创建,但如果是传统的
new Parent()
方式,就会有这个问题)。虽然我上面的代码示例中通过
Object.create(Parent.prototype)
优化了这一点,避免了父类构造函数在设置原型时被实际执行,但如果你看到一些老旧的代码,或者不清楚
Object.create
用法时,可能会直接用
Child.prototype = new Parent()

如果父类构造函数内部有比较耗时的操作,或者会产生副作用(比如打印日志、初始化复杂资源),那么被调用两次就可能带来不必要的开销或者重复操作。不过,说实话,对于大多数轻量级的构造函数来说,这种性能影响通常可以忽略不计。这更多的是一种设计上的“不优雅”,而不是实际的性能瓶颈。

另外,就是我前面提到的

constructor
属性的修正问题。当你把子类的原型指向父类的实例或一个基于父类原型的新对象时,子类原型的
constructor
属性会丢失,或者指向父类构造函数。虽然这不影响继承的功能,但如果你依赖
instance.constructor
来获取实例的构造函数信息,或者进行某些反射操作,就必须手动将其指回子类自身,否则可能会得到错误的结果。

这些问题,在我看来,更多是JavaScript原型继承机制本身的特性所带来的,而不是组合继承模式独有的严重缺陷。理解这些,能帮助我们更好地使用和调试代码。

ES6的class语法糖如何简化了组合继承的实现?

ES6引入的

class
语法糖,可以说彻底改变了JavaScript中实现继承的“面貌”,让它看起来更像是传统面向对象语言的继承方式。但本质上,
class
仍然是基于原型链和构造函数继承的组合。它并没有引入新的继承机制,而是为我们提供了一套更简洁、更语义化的语法来封装底层的复杂性。

当你使用

extends
关键字和
super()
调用时,ES6
class
在幕后为你做了所有组合继承的繁琐工作。它自动化了:

  1. 调用父类构造函数: 在子类的

    constructor
    中调用
    super()
    ,就相当于在子类实例的上下文中执行了父类的构造函数,从而继承了父类的实例属性。这是强制性的,如果你在子类
    constructor
    中不调用
    super()
    ,或者在
    super()
    之前尝试访问
    this
    ,都会报错。

  2. 设置原型链:

    extends
    关键字会自动将子类的原型指向父类的原型,确保子类实例能够访问到父类原型上的方法。

  3. 修正

    constructor
    属性:
    class
    语法也会自动处理
    constructor
    属性的指向问题,使其正确地指向子类自身。

我们来看一个ES6

class
的例子,你会发现它多么简洁:

// 父类 (ES6 Class)
class ParentClass {
    constructor(name) {
        this.name = name;
        this.hobbies = ['reading', 'coding'];
    }

    sayName() {
        console.log('My name is ' + this.name);
    }

    addHobby(hobby) {
        this.hobbies.push(hobby);
    }
}

// 子类 (ES6 Class)
class ChildClass extends ParentClass {
    constructor(name, age) {
        super(name); // 相当于 ParentClass.call(this, name)
        this.age = age;
    }

    sayAge() {
        console.log('I am ' + this.age + ' years old.');
    }
}

// 实际使用
const es6Child1 = new ChildClass('Charlie', 12);
es6Child1.sayName(); // My name is Charlie
es6Child1.sayAge();  // I am 12 years old.
es6Child1.addHobby('singing');
console.log(es6Child1.hobbies); // ["reading", "coding", "singing"]

const es6Child2 = new ChildClass('David', 9);
console.log(es6Child2.hobbies); // ["reading", "coding"] - 独立性依然保持

console.log(es6Child1 instanceof ChildClass);  // true
console.log(es6Child1 instanceof ParentClass); // true

你看,使用

class
语法后,我们不再需要手动去处理
Parent.call()
Object.create()
constructor
修正这些细节。所有这些底层逻辑都被
extends
super()
优雅地封装起来了。这大大降低了实现继承的门槛,也让代码更具可读性和维护性。虽然它只是语法糖,但它确实让组合继承的实现变得“无痛”了。对我而言,这正是现代JavaScript开发中,我们应该优先采用的继承方式。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

544

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

728

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

393

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

655

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

545

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

150

2025.12.31

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
swoole进程树解析
swoole进程树解析

共4课时 | 0.2万人学习

golang和swoole核心底层分析
golang和swoole核心底层分析

共3课时 | 0.1万人学习

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

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