JS继承必会的几种方式

╮执着的年纪

已于 2023-01-06 15:41:00 修改

阅读量69

点赞数

分类专栏：前端基础文章标签： javascript Powered by 金山文档

于 2023-01-03 16:08:08 首次发布

本文链接：https://blog.csdn.net/m0_62046179/article/details/128534695

版权

前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、原型链继承

构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。

原型链的基本构想：如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链

重点：让新实例的原型等于父类的实例。

functionSuperType() {
  this.property=true
}
SuperType.prototype.getSuperValue=function () {
  returnthis.property
}
functionSubType() {
  this.subproperty=false
}
// 继承 SuperType
SubType.prototype=newSuperType()
SubType.prototype.getSubValue=function () {
  returnthis.subproperty
}
letinstance=newSubType()
console.log(instance.getSuperValue()) // true

特点：

实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。

缺点：

新实例无法向父类构造函数传参。

继承单一。(只能继承一个父类构造函数)

所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原性也会被修改！）

要想为子类原型新增属性和方法，必须要在new SuperType()这样的语句之后执行

代码如下：

functionSuperType() {
  this.colors= ["red", "blue", "green"]
}
functionSubType() {}
// 继承 SuperType
SubType.prototype=newSuperType()
letinstance1=newSubType()
instance1.colors.push("black")
console.log(instance1.colors) // "red,blue,green,black"
letinstance2=newSubType()
console.log(instance2.colors) // "red,blue,green,black"

二、借用构造函数继承

重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））

functionSuperType(name) {
  this.name=name
}
functionSubType() {
  // 继承 SuperType 并传参
  SuperType.call(this, "Nicholas")
  // 实例属性
  this.age=29
}
letinstance=newSubType()
console.log(instance.name) // "Nicholas";
console.log(instance.age) // 29

特点：

只继承了父类构造函数的属性，没有继承父类原型的属性。

解决了原型链继承缺点 1、2、3。

可以继承多个构造函数属性（call 多个）。

在子实例中可向父实例传参。

解决了引用值问题

缺点：

只能继承父类构造函数的属性。

无法实现构造函数的复用。

每个新实例都有父类构造函数的副本，臃肿。

三、组合继承（组合原型链继承和借用构造函数继承）（常用）

重点：结合了两种模式的优点，传参和复用

functionSuperType(name) {
  this.name=name
  this.colors= ["red", "blue", "green"]
}
SuperType.prototype.sayName=function () {
  console.log(this.name)
}
functionSubType(name, age) {
  // 继承属性
  SuperType.call(this, name)  第一次调用 SuperType()
  this.age=age
}
// 继承方法
SubType.prototype=newSuperType() // 第二次调用 SuperType()
SubType.prototype.sayAge=function () {
  console.log(this.age)
}
letinstance1=newSubType("Nicholas", 29)
console.log("instance1=>", instance1)
instance1.colors.push("black")
console.log(instance1.colors) // "red,blue,green,black"
instance1.sayName() // "Nicholas";
instance1.sayAge() // 29
letinstance2=newSubType("Greg", 27)
console.log(instance2.colors) // "red,blue,green"
instance2.sayName() // "Greg";
instance2.sayAge() // 27

特点：

可以继承父类原型上的属性，可以传参，可复用。

每个新实例引入的构造函数属性是私有的。

缺点：组合继承其实也存在效率问题。最主要的效率问题就是父类构造函数始终会被调用两次：一次在是创建子类原型时调用，另一次是在子类构造函数中调用

四、原型式继承

重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。

//核心代码
functionobject(o) {
  functionF() {}
  F.prototype=o
  returnnewF()
}

letperson= {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"],
}
letanotherPerson=object(person)
anotherPerson.name="Greg"
anotherPerson.friends.push("Rob")
letyetAnotherPerson=object(person)
yetAnotherPerson.name="Linda"
yetAnotherPerson.friends.push("Barbie")
console.log(person.friends) // "Shelby,Court,Van,Rob,Barbie"

特点：类似于复制一个对象，用函数来包装。

缺点：

所有实例都会继承原型上的属性。

无法实现复用。（新实例属性都是后面添加的）

原型式继承非常适合不需要单独创建构造函数，但仍然需要在对象间共享信息的场合。但要记住，属性中包含的引用值始终会在相关对象间共享，跟使用原型模式是一样的

五、寄生式继承

重点：就是给原型式继承外面套了个壳子。

functionobject(o) {
  functionF() {}
  F.prototype=o
  returnnewF()
}

functioncreateAnother(original) {
  letclone=object(original) // 通过调用函数创建一个新对象
  clone.sayHi=function () {
    // 以某种方式增强这个对象
    console.log("hi")
  }
  returnclone// 返回这个对象
}

letperson= {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"],
}
letanotherPerson=createAnother(person)
anotherPerson.sayHi() // "hi"
//寄生式继承同样适合主要关注对象，而不在乎类型和构造函数的场景。object()函数不是寄生式继承所必需的，任何返回新对象的函数都可以在这里使用。
// 注意 通过寄生式继承给对象添加函数会导致函数难以重用，与构造函数模式类似。

优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。

缺点：没用到原型，无法复用。

六、寄生组合式继承（常用）

重点：通过借用构造函数继承属性，但使用混合式原型链继承方法。基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。说到底就是使用寄生式继承来继承父类原型，然后将返回的新对象赋值给子类原型。

寄生：在函数内返回对象然后调用

组合：

函数的原型等于另一个实例。

在函数中用 apply 或者 call 引入另一个构造函数，可传参

functionobject(o) {
  functionF() {}
  F.prototype=o
  returnnewF()
}

/*function inheritPrototype(subType, superType) { 
 let prototype = object(superType.prototype); // 创建对象
 prototype.constructor = subType; // 增强对象 
 subType.prototype = prototype; // 赋值对象
}*/

functionSuperType(name) {
  this.name=name
  this.colors= ["red", "blue", "green"]
}
SuperType.prototype.sayName=function () {
  console.log(this.name)
}
functionSubType(name, age) {
  SuperType.call(this, name)
  this.age=age
}
letprototype=object(superType.prototype) // 创建对象
subType.prototype=prototype// 赋值对象
prototype.constructor=subType// 修复实例

//inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge=function () {
  console.log(this.age)
}

优先：修复了组合继承的问题

缺点：实现麻烦