JavaScript【继承】

大大qiqiu
827 阅读13分钟

前言

【荷包蛋！荷包蛋！】

看过一遍《红宝书》，只不过仅对很多概念熟悉并不算是掌握。这一阵子的面试 JS 基础中都会问到继承，大概都讲个一知半解。所以打算一字一行再学习一遍。

继承

在很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际具体的方法。

接口继承在 ECMAScript 中是不可能的，因为函数没有签名。因此 ECMAScript 主要通过原型链来实现继承。

原型链

原型链是 ECMAScript 的主要继承方式，基本思想是通过原型继承多个引用类型的属性和方法。

关系

构造函数、原型和实例的关系：

  • 每个构造函数都有一个 prototype 指向原型对象
  • 原型有一个属性 constructor 指回构造函数
  • 实例有一个内部指针 __proto__ 指向原型

所以当原型作为是另一个构造函数的实例，则本身该原型也有一个内部指针指向上一个原型。这样就在实例和原型之间构造了一条原型链。

例子

// 父构造函数
function SuperType() {
  this.prototyppe = true;	// 构造函数定义属性
}
// 原型上定义方法
SuperType.protytpe.getSuperValue = function() {
  return this.property
}

// 子构造函数
function SubType() {
  this.subpropertype = false
}

// 继承 SuperType
SubType.prototype = new SuperType()

// 原型上定义子方法
SubType.prototype.getSubValue = function() {
  return this.subpropertyp
}

let instance = new SubType()
console.log(instance)	// SuperType { subpropertype: false }
console.log(instance.getSuperValue)	// true（SuperType 上的属性）

小解析

  • 以上代码定义了两个类型：SuperType 和 SubType。并分别定义了一个属性和一个方法。
  • SubType 通过创建 SuperType 的实例并将其赋值给自己的原型，实现了对 SuperType 的继承。
    • SuperType 实例可以访问的所有属性和方法也会存在于 SubType.prototype上。
  • SubType.prototype 新增了一个方法
    • 也就是 SuperType 的实例上添加了一个新方法。
  • 最后创建了 SubType 的实例 instance 来查看继承过来的数据。
    • 调用实例 instance.getSuperValue 方法，可通过原型链向上查找。

小总结

  • SubType 将原型替换成 SubPerType 的实例 => SubType 的实例不仅能从 SubperType 的实例中即成属性

  • 实例化出来的 instance 通过 __proto__ 指向 SubType 的 prototype

  • SubType.prototype 指向 SuperType.prototype

    • getSuperValue() 方法还在 SuperType.prototype 对象上（是一个挂载在原型的方法）

      prototype 属性则在 SubType.prototype 上（是一个实例的属性）

  • SubType.prototype 的 constructor 属性被重写为 SuperType

    • instance.constructor 也指向 SuperType

原型链扩展了原型搜索机制

  • 在读取实例上的属性时，首先会在实例上搜索这个属性。如果没有找到，则会继承搜索实例的原型。

  • 若是通过原型链实现继承之后，搜索就可以继承向上搜索原型的原型，会一直持续到原型链的末端。

    • 调用 instance.getSuperValue() 经过了 3 步的搜索：
      • instance
      • SubType.prototype
      • SuperType.prototype，在这里才找到了这个方法

默认原型

实际上，默认情况下，所有引用类型都继承自 Object，这也是通过原型链实现的。

任何函数的默认原理都是一个 Object 的实例，这意味着这个实例有一个内部指针指向 Object.prototype。这也是为什么自定义类型能够继承包括 toString() 、valueOf() 在内的所有默认方法的原因。

上一节的例子中，SubType 继承 SuperType，而 SuperType 继承 Object。在调用 instance.toString() 时，实际上调用的是保存在 Object.protorype 上的方法。

原型与继承关系

原型与实例的关系可以通过两种方式来确定。

第一种方法是使用 instanceof 操作符。

// 接上节例子
console.log(instance instanceof Object);	// true
console.log(instance instanceof SuperType);	// true
console.log(instance instanceof SubType);	// true

// 从技术上来讲，instance 是 Object、SuperType 和 SubType 的实例，因此都返回 true。

第二种方法是使用 isPrototypeOf() 方法

原型链中的每个原型都可以调用这个方法，只要原型链中包含这个原型，则返回 true

// 接上节例子
console.log(Object.prototype.isPrototypeOf(instance));	// true
console.log(SuperType.prototype.isPrototypeOf(instance));	// true
console.log(SubType.prototype.isPrototypeOf(instance));	// true

关于方法

子类有时候需要覆盖父类的方法（形成多态），或者增加父类没有的方法（实现扩展）。

这些方法必须在原型赋值之后再添加到原型上。

例子

function SuperType() {
  this.prototyppe = true;
}

SuperType.protytpe.getSuperValue = function() {
  return this.property
}

function SubType() {
  this.subpropertype = false
}

SubType.prototype = new SuperType()

// 原型定义新方法
SubType.prototype.getSubValue = function() {
  return this.subpropertyp
}

// 覆盖已有的方法
SubType.prototype.getSuperValue = function() {
  return false
}

let instance = new SubType()
console.log(instance.getSubValue)	// false
console.log(instance.getSuperValue)	// false（覆盖方法）

SubType 的实例调用的是覆盖后的方法 => false

SuperType 的实例调用的是原先的方法 =>true

重点在于新方法需要在把原型赋值为 SuperType 的实例之后定义的

对象字面量

以对象字面量方式创建原型方法会破坏之前的原型链，因为这相当于重写了原型链。

function SuperType() {
  this.prototyppe = true;
}

SuperType.protytpe.getSuperValue = function() {
  return this.property
}

function SubType() {
  this.subpropertype = false
}

// 继承 SuperType => 原型是 SuperType 的实例
SubType.prototype = new SuperType()

// 通过对象字面量添加新方法，这会导致上一行无效
SubType.prototype = {
  getSubValue() {
    return this.subproperty
  },
  someOtherMethod() {
    return false
  }
}

let instance = new SubType()
console.log(instance.getSuperValue)	// 出错（原型链遭破坏，找不到 SuperType 原型）

这段代码中，子类的原理在被赋值为 SuperType 的实例后，又被对象字面量覆盖了。

覆盖后的原型是一个 object 的实例，而不再是 SuperType的实例。

因此之前的原型链就断了。SubType 和 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"（噢ho！）

SubType.prototype 变成了 SuperType 的一个实例，因而也获得了自己的 colors 属性 => 类似于创建了 SubType.prototype.colors 属性。

但是，SubType 的所有实例都会共享这个 colors 属性。这一点通过 instance1.colors 上的修改也能反映到 instance2.colors 上就可以看出来

第二个问题是，子类型在实例化时不能给父类型的构造函数传参。实际上，我们无法在不影响所有对象实例的情况下把参数传进父类的构造函数。再加上原型中包含引用值的问题，导致原型链基本不会被单独使用，所有有了后边的继承的设计思维。

盗用构造函数

盗用构造函数（constructor stealing），也被称为对象伪装或经典继承。用于解决原型包含引用值导致的继承问题。

大致基本思路为：在子类构造函数中调用父类构造函数。毕竟函数就是特定上下文中执行代码的简单对象，所以可以使用 apply () 和 call() 方法以新创建的对象为上下文执行构造函数

例子

function SuperType() {
  this.colors = ['red', 'blue', 'green']
}

function SubType() {
  // 调继承 SuperType
  SuperType.call(this)
}

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"

通过使用改变 this 指向的方法，SuperType 构造函数在为 SubType 的实例创建的新对象的鹅上下文中执行了。

这相当于新的 SubType 对象上运行了 SuperType() 函数中的所有初始化代码，结果就是每个实例都会有自己的引用数据。（colors 属性）

当然也可以在调用 SubType() 构造函数时，传递参数。

问题

主要缺点或问题，也就是使用构造函数模式自定义类型的问题：

  • 必须在构造函数中定义方法，因此函数不用重用。
  • 子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。

所以盗用构造函数基本上虽说解决了原型链继承的引用类型的缺陷，但也不能单独使用。

组合继承

组合继承（伪经典继承）其实也就是综合了原型链和盗用构造函数，将其优点集中。

基本思路：**使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。**这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

例子

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
}

// 继承方法
SubType.prototype = new SuperType()

// 挂载新方法
SuperType.prototype.sayAge = function () {
  console.log(this.age)
}

let instance1 = new SubType("Lindada", 21)
instance1.colors.push('black')
console.log(instance1.colors)	// "red, blue, green, black"
instance1.sayName()	// "Lindada"
instance1.sayAge()	// 21

let instance2 = new SubType("Lindada2", 3)
console.log(instance2.colors)	// "red, blue, green"
instance2.sayName()	// "Lindada2"
instance2.sayAge()	// 3

小解析

  • SuperType 构造函数定义了两个属性，name 和 colors，而原型上也定义了 sayName() 方法。
  • SubType 构造函数调用了 SuperType 构造函数，传入了 name 参数，又定义了自己的属性 age。
  • SubType.prototype 也被赋值为 SuperType 的实例，再在原型上添加了新方法 sayAge()。
  • 这样就让 SubType 的两个实例都有自己的属性同时还共享相同的方法。

原型式继承

Douglas Crockford 写的一篇文章《JavaScript 中的原型式继承》，介绍了一种不涉及严格意义上构造函数的继承方法。

出发点是即使不自定义类型也可以通过原型实现对象之间的信息共享。

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

这个 object() 函数会创建一个临时构造函数，将传入的对象赋值给这个构造函数的原型，然后返回这个临时类型的一个实例。

本质上，object() 是对传入的对象执行了一次浅复制。

例子

// 原型式
function object(o) {
	function F() {}
  F.prototype = o
  return new F()
}

let person = {
  name: 'Lindada',
  friends: ['ShuaiGe', 'MeiNv', 'LiangZai']
}
let anotherPerson = object(person)
anotherPerson.name = 'Lindada2'
anotherPerson.friedns.push('DaRen')

let yetAnotherPerson = object(person)
yetAnotherPerson.name = 'Lindada3'
yetAnotherPerson.friedns.push('XiaoRen')

console.log(person.friends)	// ['ShuaiGe', 'MeiNv', 'LiangZai', 'DaRen', 'XiaoRen']

小解析

原型式继承适用于这种情况：你有一个对象，想在它的基础上再创建一个新对象。你需要把这个对象先传给 object()，然后再对返回的对象进行适当修改。

  • person 对象定义了另一个对象也应该共享的信息，把它传给 object() 之后会返回一个新对象。
  • 新对象的原型是 person，意味着它的原型上既有原始值属性又有引用值属性。
  • 因此 person.friends 不仅是 person 的属性，也会跟 anotherPerson 和 yetAnotherPerson 共享。
  • 这里实际上克隆了两个 person。

Object.create()

ECMAScript 5 通过增加 Object.create() 方法将原型式继承的概念规范化了。

方法接受两个参数：作为新对象原型的对象，给新对象定义额外属性的对象（可选）。

若仅传入一个参数，则与上一节例子中的object 方法并无差别。

let person = {
  name: 'Lindada',
  friends: ['ShuaiGe', 'MeiNv', 'LiangZai']
}
let anotherPerson = Object.create(person)
anotherPerson.name = 'Lindada2'
anotherPerson.friedns.push('DaRen')

let yetAnotherPerson = Object.create(person)
yetAnotherPerson.name = 'Lindada3'
yetAnotherPerson.friedns.push('XiaoRen')

console.log(person.friends)	// ['ShuaiGe', 'MeiNv', 'LiangZai', 'DaRen', 'XiaoRen']

传入第二个参数与 Object.defineProperties() 的第二个参数一样，每个新增属性都通过各自的描述符来描述。以这种方式添加的属性会遮蔽原型对象上的同名属性

let person = {
  name: 'Lindada',
  friends: ['ShuaiGe', 'MeiNv', 'LiangZai']
}
let anotherPerson = Object.create(person, {
  name: {
    value: "Lindada2"
  }
})

console.log(person.friends)	// ['ShuaiGe', 'MeiNv', 'LiangZai', 'DaRen', 'XiaoRen']

原型式继承非常适合不许单独创建构造函数，但仍然需要再对象间共享信息的场合。

因此，属性中包含的引用值始终会再相关对象间共享，是跟使用原型模式是一样。

寄生式继承

寄生式继承（parasitic inheritance）与原型式继承比较接近。

基本思路类似于寄生构造函数和工厂模式：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。

例子

function createAnother(original) {
  let clone = Object.create(original)	// 创建一个新对象
  clone.sayHi = function() {	// 以某种方式增强这个对象
    console.log("hi")
  }
  return clone	// 返回新对象
}

let person = {
  name: 'Lindada',
  friends: ['ShuaiGe', 'MeiNv', 'LiangZai']
}

let anotherPerson = createAnother(person)
anotherPerson.sayHi()	// "hi"

小解析

  • createAnother() 方法给予 person 对象返回了一个新对象。
  • 新返回的 anotherPerson 对象具有 person 的所有属性和方法，还有一个新方法叫 sayHi()

寄生式继承同样适合主要关注对象，而不在乎类型的构造函数的场景。Object.create() 函数不是寄生式继承所必需的，任何返回对象的函数都可以在这里使用。

但通过此继承给对象添加函数会导致函数难以重用，与构造函数模式类似。

寄生式组合继承

出现原因

组合继承有个主要的效率问题就是父类构造函数始终会被调用两次：

  • 创建子类原型时调用
  • 子类构造函数中调用

本质上，子类原型最终是要包含超类对象的所有实例属性，子类构造函数只要在执行时重写自己的原型就行。

例子

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.constructor = SubType

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

小解析

  • SubType.prototype 上会有两个属性：name 和 colors，均为 SuperType 的实例属性，现在成为 SubType 的原型属性。
  • 调用 SubType 构造函数时，也会调用 SuperType 构造函数，这一次会在新对象上创建实例属性 name 和 colors。
  • 这两个实例属性会遮蔽原型上同名的属性。
  • 因此会造成两组 name 和 colors 属性：一组在实例上，一组在 SubType 的运行上。

解决

寄生式组合继承通过盗用结构函数继承属性，且使用混合式原型链继承方法。

基本思路：使用寄生式继承来继承父类原型，将返回的新对象赋值给子类原型。

基本模式如下：

function inheritPrototype(subType, superType) {
  let prototype = Object.create(superType.prototype)	// 创建对象
  prototype.constructor = subType	// 增加对象
  subType.prototype = prototype	// 赋值对象
}

这个函数接收两个参数：子类构造函数和父类构造函数。

  • 第一步创建父类原型的一个副本

  • 第二步给返回的新对象 prototype 设置 constructor 属性，解决由于重写原型导致默认 constructor 丢失的问题

  • 最后将新创建的对象赋值给子类型的原型

例子

function inheritPrototype(subType, superType) {
  let prototype = Object.create(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)	// 调用一次 SuperType()
  this.age = age
}

inheritPrototype(SubType, SubperType)

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

小解析

在原型链保持不变的基础上，这里只调用了一次 SuperType 构造函数，避免了 SubType.prototype 上不必要也用不到的属性。因此可以说这个例子的效率更高。

因此 instanceof 操作符和 isPrototypeOf() 方法正常有效，综上寄生式组合继承可以算是引用类型继承的最佳模式。

结尾

整理了一天，算是理解并一字一行打出来理清楚一遍。对于上边内容有本人精简概括，若是有不对或纰漏的地方，还望海涵和不吝指正。当然最好还是看《红宝书》进行一次详细阅读。

总之不知道下一次实习面试自己还能不能理的清楚，那就不断地回滚知识吧！

最后对自己加油～鹅鹅鹅鹅鹅

avatar
文章
阅读
粉丝