web前端tips：js继承—

web前端tips：js继承——组合继承

news2024/12/26 11:06:10

输入图片描述

上篇文章给大家分享了 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() 实现原型继承。这样做既增加了调用次数，也可能导致父类构造函数中的逻辑被执行多次。

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