Javascript要点详解：继承

最新推荐文章于 2024-07-23 12:35:43 发布

Durantchen

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量942

点赞数 37

文章标签： javascript 原型模式开发语言

本文链接：https://blog.csdn.net/weixin_43197654/article/details/137785059

版权

文章目录

前言
一、原型链继承
二、借用构造函数继承
- 2-1 优点：传递参数
- 2-2 缺点：方法不可见，无法复用
三、组合继承（伪经典继承）
四、原型式继承
- 4-1 小结
五、寄生式继承
六、寄生组合式继承
总结

前言

继承是00语言中的一个最为人津津乐道的概念。许多00语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。如前所述，由于函数没有签名，在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现的。下面我们来讲讲《JavaScript高级程序设计》中讲述的六大继承方式。

一、原型链继承

ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
示例代码如下：

function SuperType () {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
const superIns = new SuperType()
console.log(superIns)

function SubType () {
  this.subproperty = false
}
SubType.prototype = new SuperType() // 改变了原型对象指向
SubType.prototype.getSubValue = function () {
  return this.subproperty
}

const subIns = new SubType()
console.log(subIns.getSuperValue())
console.log(subIns)

以上代码定义了两个类型：SuperType和SubType。每个类型分别有一个属性和一个方法。它们的主要区别是SubType继承了SuperType，而继承是通过创建SuperType的实例，并将该实例赋给SubType.prototype实现的。实现的本质是重写原型对象，代之以一个新类型的实例。
输出如下：
原型链继承
在上面的代码中，我们没有使用SubType默认提供的原型，而是给它换了一个新原型；这个新原型就是SuperType的实例。于是，新原型不仅具有作为一个SuperType的实例所拥有的全部属性和方法，而且其内部还有一个指针，指向了SuperType的原型。最终结果就是这样的：subIns指向SubType的原型，SubType的原型又指向SuperType的原型。getSuperValue()方法仍然还在SuperType.prototype中，但property则位于SubType.prototype中。这是因为property是一个实例属性，而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例，那么property当然就位于该实例中了。此外，要注意instance.constructor现在指向的是SuperType，这是因为原来SubType.prototype中的constructor被重写了的缘故。

回顾一下在原型及原型链内提到的属性访问路径：调用subIns.getSuperValue()会经历三个搜索步骤：1）搜索实例；2）搜索SubType.prototype；3）搜索SuperType.prototype，最后一步才会找到该方法。

1-1 确定原型和实例的关系

instanceof操作符

console.log(subIns instanceof Object) // true
console.log(subIns instanceof SuperType) // true
console.log(subIns instanceof SubType) // true

由于原型链的关系，我们可以说instance是Object、SuperType或SubType中任何一个类型的实例。因此，测试这三个构造函数的结果都返回了true。

isPrototypeOf()方法

console.log(Object.prototype.isPrototypeOf(subIns)) // true
console.log(SuperType.prototype.isPrototypeOf(subIns)) // true
console.log(SubType.prototype.isPrototypeOf(subIns)) // true

同样，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此isPrototypeOf()方法也会返回true。

1-2 谨慎地定义方法

给原型对象添加新方法的时候，需注意不要添加与原型链上已有的方法名相同，否则在不同类型上new出来的实例，相同方法功能却不同。
通过原型链实现继承时，不能使用对象字面量创建原型方法，因为这样做会重写原型链，导致原型链被切断。

function SuperType () {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
const superIns = new SuperType()
console.log(superIns)

function SubType () {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype = { // 导致上一行代码无效，设想中的原型链被切断
  getSubValue: function () {
    return this.subproperty
  },
  otherMethod: function () {
    return false
  }
}

const subIns = new SubType()
console.log(subIns.getSuperValue()) // error! 访问不到了

此时的subIns的原型链如下所示：
原型链继承被切断
可以看到，此时的subIns的原型链上已经没有SuperType的身影了，因为SubType的原型被完全重写了。

1-3 原型链继承的问题

包含引用类型的原型属性会被所有实例共享，示例代码如下：

function SuperType () {
  this.color = ['red', 'black', 'green']
}
function SubType () {}
SubType.prototype = new SuperType()

const ins1 = new SubType()
ins1.color.push('blue')
console.log(ins1.color) // ['red', 'black', 'green', 'blue']

const ins2 = new SubType()
console.log(ins2.color) // ['red', 'black', 'green', 'blue']

当SubType通过原型链继承了SuperType之后，SubType.prototype就变成了SuperType的一个实例，因此它也拥有了一个它自己的color属性——就跟专门创建了一个SubType.prototype.color属性一样。但结果是什么呢？结果是SubType的所有实例都会共享这一个color属性。而我们对ins1.color的修改能够通过ins2.color反映出来，就已经充分证实了这一点。

在创建子类型的实例时，不能向超类型的构造函数中传递参数。

实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。有鉴于此，再加上前面刚刚讨论过的由于原型中包含引用类型值所带来的问题，实践中很少会单独使用原型链。

二、借用构造函数继承

在解决原型中包含引用类型值所带来问题的过程中，开发人员开始使用一种叫做借用构造函数的技术（有时候也叫做伪造对象或经典继承）。这种技术的基本思想相当简单，即在子类型构造函数的内部调用超类型构造函数。别忘了，函数只不过是在特定环境中执行代码的对象，因此通过使用apply()和call()方法也可以在（将来）新创建的对象上执行构造函数，如下所示：

function SuperType () {
  this.color = ['red', 'black', 'green']
}
function SubType () {
  SuperType.call(this) // 重点：这行代码“借调”了超类型的构造函数，继承了SuperType
}

const ins1 = new SubType()
ins1.color.push('blue')
console.log(ins1.color) // ['red', 'black', 'green', 'blue']

const ins2 = new SubType()
console.log(ins2.color) // ['red', 'black', 'green']

SubType构造函数内“借调”了超类的构造函数，通过使用call方法（apply也可以）。实际上我们在未来创建SubType实例时是调用的SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果，SubType的每个实例就都会具有自己的color属性的副本了。

2-1 优点：传递参数

相对于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向超类型构造函数传递参数。看下面这个例子：

function SuperType (name) {
  this.name = name
}
function SubType (name) {
  SuperType.call(this, name)
  this.age = 18
}

const ins1 = new SubType('xiaochen')
console.log(ins1.name, ins1.age) // xiaochen 18

代码中的SuperType接受一个参数name，该参数会直接赋给一个属性。在SubType构造函数内部调用SuperType构造函数时，实际上是为SubType的实例设置了name属性。为了确保SuperType构造函数不会重写子类型的属性，可以在调用超类型构造函数后，再添加应该在子类型中定义的属性。

2-2 缺点：方法不可见，无法复用

如果仅仅是借用构造函数，那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

三、组合继承（伪经典继承）

将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。实例如下：

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() // 继承方法
SubType.prototype.sayAge = function () {
  console.log(this.age)
}

const ins1 = new SubType('xiaochen', 18)
ins1.colors.push('black')
console.log(ins1.colors) // ['red', 'blue', 'green', 'black']
ins1.sayName() // xiaochen
ins1.sayAge() // 18

const ins2 = new SubType('durant', 30)
console.log(ins2.colors) // ['red', 'blue', 'green']
ins2.sayName() // durant
ins2.sayAge() // 30

SuperType构造函数定义了两个属性：name和colors。SuperType的原型定义了一个方法sayName()。SubType构造函数在调用SuperType构造函数时传入了name参数，紧接着又定义了它自己的属性age。然后，将SuperType的实例赋值给SubType的原型，然后又在该新原型上定义了方法sayAge()。这样一来，就可以让两个不同的SubType实例既分别拥有自己属性——包括colors属性，又可以使用相同的方法了。

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JavaScript中最常用的继承模式。而且，instanceof和isPrototypeOf()也能够用于识别基于组合继承创建的对象。

四、原型式继承

在原型继承模式中我们认识到原型对象是可以改为另一个对象的。基于此如果我们有一个可以作为共享的对象的时候，就可以使用原型式继承模式：创建一个临时性的构造函数，然后将传入的共享对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。代码如下：

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

看一个实例：

const person = {
  name: 'xiaochen',
  friends: ['hong', 'lin', 'hui']
}
const otherPerson = object(person)
otherPerson.name = 'xiaopeng'
otherPerson.friends.push('bei')

const anotherPerson = object(person)
anotherPerson.name = 'xiaoc'
anotherPerson.friends.push('zhang')

console.log(person.friends) // ['hong', 'lin', 'hui', 'bei', 'zhang']

在这个例子中，可以作为另一个对象基础的是person对象，于是我们把它传入到object()函数中，然后该函数就会返回一个新对象。这个新对象将person作为原型，所以它的原型中就包含一个基本类型值属性和一个引用类型值属性。这意味着person.friends不仅属于person所有，而且也会被anotherPerson以及yetAnotherPerson共享。实际上，这就相当于又创建了person对象的两个副本。

ECMAScript 5通过新增Object.create()方法规范化了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。在传入一个参数的情况下，Object.create()与object()方法的行为相同。

const person = {
  name: 'xiaochen',
  friends: ['hong', 'lin', 'hui']
}
const otherPerson = object(person)
otherPerson.name = 'xiaopeng'
otherPerson.friends.push('bei')

const anotherPerson = Object.create(person) // 此处使用Object.create
anotherPerson.name = 'xiaoc'
anotherPerson.friends.push('zhang')

console.log(person.friends) // ['hong', 'lin', 'hui', 'bei', 'zhang']

Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性

4-1 小结

只想让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。
包含引用类型值的属性始终都会共享相应的值，就像使用原型模式一样。引用类型的属性本质上是创建了指针，指向同一块内容。

五、寄生式继承

寄生式（parasitic）继承是与原型式继承紧密相关的一种思路，与寄生构造函数和工厂模式类似。即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。以下代码示范了寄生式继承模式。

// 寄生式继承模式
function createAnother(original) {
	const clone = object(original)
	clone.sayHi = function () {
		console.log('hi')
	}
  	return clone
}

// 下面是验证
const person = {
  name: 'xiaochen',
  friends: ['hong', 'lin', 'hui']
}
const anotherPerson = createAnother(person)
anotherPerson.sayHi() // hi

createAnother基于person返回一个新对象——anotherPerson。新对象不仅具有person的所有属性和方法，而且还有自己的sayHi()方法。

在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。

使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率；这一点与构造函数模式类似。

六、寄生组合式继承

前面说过，组合继承是JavaScript最常用的继承模式；不过，它也有自己的不足。组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。看代码：

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 // 上一行代码会把SubType的constructor指向SuperType
SubType.prototype.sayAge = function () {
  console.log(this.age)
}

const ins1 = new SubType('xiaochen', 18)
console.log(ins1)

说明：在第一次调用SuperType构造函数时，SubType.prototype会得到两个属性：name和colors;它们都是SuperType的实例属性，只不过现在位于SubType的原型中。当调用SubType构造函数时，又会调用一次SuperType构造函数，这一次又在新对象上创建了实例属性name和colors。于是，这两个属性就屏蔽了原型中的两个同名属性。输出如下：
组合继承
有两组name和colors属性：一组在实例上，一组在SubType原型中。这就是调用两次SuperType构造函数的结果。解决这个问题方法一一寄生组合式继承。

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

寄生组合式继承的基本模式示例代码如下：

function inheritPrototype(subType, superType) {
  const prototype = object(superType.prototype)
  prototype.constructor = subType
  subType.prototype = prototype
}

示例中的inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数：子类型构造函数和超类型构造函数。在函数内部，第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor属性，从而弥补因重写原型而失去的默认的constructor属性。最后一步，将新创建的对象（即副本）赋值给子类型的原型。

下面是改进过的组合继承的代码：

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
}

inheritPrototype(SubType, SuperType) // 继承方法-原型链混成
SubType.prototype.sayAge = function () {
  console.log(this.age)
}

const ins = new SubType('xiaochen', 18)
console.log(ins)

输出如下：
寄生组合式继承res

这个例子的高效率体现在它只调用了一次SuperType构造函数，并且因此避免了在SubType.prototype上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用instanceof和isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

总结

ECMAScript支持面向对象（00）编程，但不使用类或者接口。对象可以在代码执行过程中创建和增强，因此具有动态性而非严格定义的实体。在没有类的情况下，可以采用下列模式创建对象。

工厂模式，使用简单的函数创建对象，为对象添加属性和方法，然后返回对象。这个模式后来被构造函数模式所取代。
构造函数模式，可以创建自定义引用类型，可以像创建内置对象实例一样使用new操作符。不过，构造函数模式也有缺点，即它的每个成员都无法得到复用，包括函数。由于函数可以不局限于任何对象（即与对象具有松散耦合的特点），因此没有理由不在多个对象间共享函数。
原型模式，使用构造函数的prototype属性来指定那些应该共享的属性和方法。组合使用构造函数模式和原型模式时，使用构造函数定义实例属性，而使用原型定义共享的属性和方法。

JavaScript主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的。这样，子类型就能够访问超类型的所有属性和方法，这一点与基于类的继承很相似。原型链的问题是对象实例共享所有继承的属性和方法，因此不适宜单独使用。解决这个问题的技术是借用构造函数，即在子类型构造函数的内部调用超类型构造函数。这样就可以做到每个实例都具有自己的属性，同时还能保证只使用构造函数模式来定义类型。使用最多的继承模式是组合继承，这种模式使用原型链继承共享的属性和方法，而通过借用构造函数继承实例属性。

此外，还存在下列可供选择的继承模式。

原型式继承，可以在不必预先定义构造函数的情况下实现继承，其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步改造。
寄生式继承，与原型式继承非常相似，也是基于某个对象或某些信息创建一个对象，然后增强对象，最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题，可以将这个模式与组合继承一起使用。
寄生组合式继承，集寄生式继承和组合继承的优点与一身，是实现基于类型继承的最有效方式。

[1] 实际上，不是SubType的原型的constructor属性被重写了，而是SubType的原型指向了另一个对象——SuperType的原型，而这个原型对象的constructor属性指向的是SuperType。

Durantchen

关注

37
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
Javascript要点详解：继承

继承是00语言中的一个最为人津津乐道的概念。许多00语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。如前所述，由于函数没有签名，在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现的。下面我们来讲讲《JavaScript高级程序设计》中讲述的六大继承方式。给原型对象添加新方法的时候，需注意不要添加与原型链上已有的方法名相同，否则在不同类型上new出来的实例，相同方法功能却不同。
复制链接

扫一扫