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

161 阅读3分钟

输入图片描述

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

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

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

无法继承父类原型链上的方法和属性,只能继承父类构造函数中的属性和方法 父类的方法无法复用,每个子类实例都会创建一份方法的副本

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

组合继承

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

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

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

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

  1. 创建父类构造函数:定义一个父类构造函数,用来初始化父类的属性和方法
  2. 创建子类构造函数:定义一个子类构造函数,通过调用父类构造函数来继承父类的属性,并设置子类自己的属性。
  3. 继承父类的方法:将子类的原型对象设置为父类的实例,从而继承父类的方法。
  4. 添加子类特有的方法:在子类的原型对象上添加子类特有的方法。
  5. 创建子类实例:通过子类构造函数创建子类的实例,并调用继承自父类的方法以及子类自己的方法。
// 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() 实现原型继承。这样做既增加了调用次数,也可能导致父类构造函数中的逻辑被执行多次。

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

结语

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