前端实现继承的几种方式

开发 前端
原型链的基本构想: 如果原型是另一个类型的实例呢?那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。

一、原型链继承

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

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

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

function SuperType() {
this.property = true
}
SuperType.prototype.getSuperValue = function () {
return this.property
}
function SubType() {
this.subproperty = false
}
// 继承 SuperType
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function () {
return this.subproperty
}
let instance = new SubType()
console.log(instance.getSuperValue()) // true
复制代码

特点:

  1. 实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。

缺点:

  1. 新实例无法向父类构造函数传参。
  2. 继承单一。(只能继承一个父类构造函数)
  3. 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原性也会被修改!)
  4. 要想为子类原型新增属性和方法,必须要在new SuperType()这样的语句之后执行

代码如下:

function SuperType() {
this.colors = ["red", "blue", "green"]
}
function SubType() {}
// 继承 SuperType
SubType.prototype = new SuperType()
let instance1 = new SubType()
instance1.colors.push("black")
console.log(instance1.colors) // "red,blue,green,black"
let instance2 = new SubType()
console.log(instance2.colors) // "red,blue,green,black"
复制代码

二、借用构造函数继承

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

function SuperType(name) {
this.name = name
}
function SubType() {
// 继承 SuperType 并传参
SuperType.call(this, "Nicholas")
// 实例属性
this.age = 29
}
let instance = new SubType()
console.log(instance.name) // "Nicholas";
console.log(instance.age) // 29
复制代码

特点:

  1. 只继承了父类构造函数的属性,没有继承父类原型的属性。
  2. 解决了原型链继承缺点 1、2、3。
  3. 可以继承多个构造函数属性(call 多个)。
  4. 在子实例中可向父实例传参。
  5. 解决了引用值问题

缺点:

  1. 只能继承父类构造函数的属性。
  2. 无法实现构造函数的复用。
  3. 每个新实例都有父类构造函数的副本,臃肿。

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

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

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

特点:

  1. 可以继承父类原型上的属性,可以传参,可复用。
  2. 每个新实例引入的构造函数属性是私有的。

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

四、原型式继承

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

//核心代码
function object(o) {
function F() {}
F.prototype = o
return new F()
}

let person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"],
}
let anotherPerson = object(person)
anotherPerson.name = "Greg"
anotherPerson.friends.push("Rob")
let yetAnotherPerson = object(person)
yetAnotherPerson.name = "Linda"
yetAnotherPerson.friends.push("Barbie")
console.log(person.friends) // "Shelby,Court,Van,Rob,Barbie"
复制代码

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

缺点:

  1. 所有实例都会继承原型上的属性。
  2. 无法实现复用。(新实例属性都是后面添加的)

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

五、寄生式继承

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

function object(o) {
function F() {}
F.prototype = o
return new F()
}

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

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

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

缺点: 没用到原型,无法复用。

六、寄生组合式继承(常用)

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

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

组合:

  1. 函数的原型等于另一个实例。
  2. 在函数中用 apply 或者 call 引入另一个构造函数,可传参
function object(o) {
function F() {}
F.prototype = o
return new F()
}

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

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

//inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function () {
console.log(this.age)
}
复制代码

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

缺点: 实现麻烦

文章出自:​​前端餐厅ReTech​​,如有转载本文请联系前端餐厅ReTech今日头条号。

github:​​https://github.com/zuopf769​

责任编辑:武晓燕 来源: 今日头条
相关推荐

2010-02-06 14:12:54

C++继承方式

2021-10-07 20:36:45

Redis集群场景

2023-10-30 11:53:37

继承JS父类

2010-08-05 09:39:17

Flex页面跳转

2023-05-07 07:56:53

Python方式

2022-11-03 15:22:15

数据结构Python

2021-05-27 08:21:51

JS继承对象

2009-05-13 11:50:17

C#多继承接口

2021-05-07 16:19:36

异步编程Java线程

2010-09-25 14:48:55

SQL连接

2021-01-19 11:56:19

Python开发语言

2022-03-28 20:57:31

私有属性class属性和方法

2022-02-17 08:20:17

Spring执行代码SpringBoot

2011-03-10 14:19:56

JavaScript

2022-04-14 20:43:24

JavaScript原型链

2021-08-02 11:13:28

人工智能机器学习技术

2010-11-24 09:56:20

mysql拷贝表

2023-09-07 13:21:00

Linux软件

2021-06-16 07:02:22

Python方式邮件

2023-05-10 07:53:08

.Net开发多进程通信方式
点赞
收藏

51CTO技术栈公众号