上篇文章给大家分享了 js继承中的借用构造函数继承

web前端tips：js继承——借用构造函数继承

在借用构造函数继承中，我提到了它的缺点

无法继承父类原型链上的方法和属性，只能继承父类构造函数中的属性和方法

父类的方法无法复用，每个子类实例都会创建一份方法的副本

有没有方法解决这个缺点捏？

组合继承

听名字，即可明白肯定是多个继承方法组合在一起实现js的继承，突出各自优点，互补各自缺点。

组合继承是JavaScript中实现继承的一种常见方式。它通过结合原型链和构造函数来实现继承。

具体而言，组合继承通过在子类构造函数中调用父类构造函数，从而继承父类的属性，并且使用原型链继承父类的方法。

以下是实现组合继承的基本步骤：

创建父类构造函数：定义一个父类构造函数，用来初始化父类的属性和方法创建子类构造函数：定义一个子类构造函数，通过调用父类构造函数来继承父类的属性，并设置子类自己的属性。继承父类的方法：将子类的原型对象设置为父类的实例，从而继承父类的方法。添加子类特有的方法：在子类的原型对象上添加子类特有的方法。创建子类实例：通过子类构造函数创建子类的实例，并调用继承自父类的方法以及子类自己的方法。

// 1

function Parent(name) {

this.name = name;

this.colors = ['red', 'blue', 'green'];

}

Parent.prototype.sayName = function() {

console.log(this.name);

};

// 2

function Child(name, age) {

Parent.call(this, name);

this.age = age;

}

// 3

Child.prototype = new Parent();

// 这行代码的作用是确保子类原型对象的`constructor`属性指向子类自身，而不是指向父类。因为在前面修改原型对象的过程中，`constructor`属性被覆盖为父类的构造函数

Child.prototype.constructor = Child;

// 4

Child.prototype.sayAge = function() {

console.log(this.age);

}

// 5

var child1 = new Child('Tom', 5);

child1.colors.push('black');

console.log(child1.name); // 输出 "Tom"

console.log(child1.age); // 输出 5

console.log(child1.colors); // 输出 ["red", "blue", "green", "black"]

child1.sayAge() // 输出 5

var child2 = new Child('Jerry', 4);

console.log(child2.name); // 输出 "Jerry"

console.log(child2.age); // 输出 4

console.log(child2.colors); // 输出 ["red", "blue", "green"]

child2.sayAge() // 输出 4

通过以上步骤，你就可以使用组合继承在JavaScript中实现父类和子类之间的继承关系。这种方式既能够继承父类的属性，又能够继承父类的方法，并且还能添加子类特有的方法。

优点子类实例能够拥有父类的属性和方法，包括通过原型继承得到的共享方法。子类实例能够拥有自己独有的属性和方法。使用原型链继承时，父类的原型方法可以在子类实例上直接访问，减少了内存占用。借用构造函数继承可以避免引用类型属性的共享问题。缺点在使用组合继承时，每次创建子类实例都会调用一次父类的构造函数，导致父类的属性被重复定义。原型链继承会将父类的属性方法复制到子类的原型上，可能导致内存占用过大。组合继承需要调用两次父类的构造函数，一次是在子类的构造函数中调用 Parent.call(this)，一次是通过 Child.prototype = new Parent() 实现原型继承。这样做既增加了调用次数，也可能导致父类构造函数中的逻辑被执行多次。

总结来说，组合继承是一种常用的继承方式，它既能够继承父类的属性和方法，又能够拥有自身独有的属性和方法。但它的缺点是在创建子类实例时会重复调用父类的构造函数，可能导致内存占用过大，并且需要额外处理父类构造函数中的逻辑。

结语

牵手 持续为你分享各类知识和软件 ，欢迎访问、关注、讨论 并留下你的小心心❤