内容承接 面向对象（二）
继承
ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
原型链的基本概念
简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。
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
}
const instance = new SubType()
alert(instance.getSuperValue()) //true
以上代码定义了两个类型： SuperType和SubType。每个类型分别有一个属性和一个方法。它们的主要区别是SubType 继承了 SuperType ，而继承是通过创建SuperType的实例，并将该实例赋给SubType.prototype实现的。
实现继承的本质是重写原型对象，代之以一个新类型的实例。
原型搜索机制
当以读取模式访问一个实例属性时，首先会在实例中搜索该属性。如果没有找到该属性，则会继续搜索实例的原型。在通过原型链实现继承的情况下，搜索过程就得以沿着原型链继续向上。就拿上面的例子来说，调用instance.getSuperValue() 会经历三个搜索步骤：
- 搜索实例；
- 搜索
SubType.prototype； - 搜索
SuperType.prototype，最后一步才会找到该方法。在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。
细节一：别忘记默认的原型
所有引用类型默认都继承了Object，而这个继承也是通过原型链实现的。大家要记住，所有函数的默认原型都是Object的实例，因此默认原型都会包含一个内部指针，指Object.prototype。
如何确定原型和实例的关系
1. instanceof
可以通过两种方式来确定原型和实例之间的关系。第一种方式是使用instanceof操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回true。以下几行代码就说明了这一点。
alert(instance instanceof Object) //true
alert(instance instanceof SuperType) //true
alert(instance instanceof SubType) //true
2. isPrototypeOf()
第二种方式是使用 isPrototypeOf()方法。同样，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此isPrototypeOf()方法也会返回 true，如下所示。
alert(Object.prototype.isPrototypeOf(instance)) //true
alert(SuperType.prototype.isPrototypeOf(instance)) //true
alert(SubType.prototype.isPrototypeOf(instance)) //true
细节二：谨慎地定义方法
子类型有时候需要重写超类型中的某个方法，或者需要添加超类型中不存在的某个方法。但不管怎样，给原型添加方法的代码一定要放在替换原型的语句之后。来看下面的例子。
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
}
// 重写超类型中的方法
SubType.prototype.getSuperValue = function () {
return false
}
const instance = new SubType()
alert(instance.getSuperValue()) //false
第一个方法 getSubValue()被添加到了SubType中。第二个方法 getSuperValue()是原型链中已经存在的一个方法，但重写这个方法将会屏蔽原来的那个方法。换句话说，当通过SubType 的实例调用getSuperValue()时，调用的就是这个重新定义的方法；但通过SuperType的实例调用 getSuperValue()时，还会继续调用原来的那个方法。
这里要格外注意的是，必须在用
SuperType的实例替换原型之后，再定义这两个方法。
细节三：不使用对象字面量创建原型方法
在通过原型链实现继承时，不能使用对象字面量创建原型方法。因为这样做就会重写原型链，如下面的例子所示。
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
},
someOtherMethod: function () {
return false;
}
}
const instance = new SubType()
alert(instance.getSuperValue()) //error!
原型链的问题
在通过原型来实现继承时，原型实际上会变成另一个类型的实例。于是，原先的实例属性也就顺理成章地变成了现在的原型属性了。
function SuperType() {
this.colors = ["red", "blue", "green"]
}
function SubType() {
}
//继承了 SuperType
SubType.prototype = new SuperType()
const instance1 = new SubType()
instance1.colors.push("black")
alert(instance1.colors) // red,blue,green,black"
const instance2 = new SubType()
alert(instance2.colors) // "red,blue,green,black"
当 SubType通过原型链继承了SuperType 之后，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)
}
const instance1 = new SubType()
instance1.colors.push("black")
alert(instance1.colors) // "red,blue,green,black"
const instance2 = new SubType()
alert(instance2.colors) // "red,blue,green"
通过使用call()方法（或 apply()方法也可以），我们实际上是在（未来将要）新创建的SubType实例的环境下调用了 SuperType构造函数。这样一来，就会在新 SubType对象上执行SuperType() 函数中定义的所有对象初始化代码。
优点： 传递参数
相对于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向超类型构造函数传递参数。看下面这个例子。
function SuperType(name) {
this.name = name
}
function SubType() {
//继承了 SuperType，同时还传递了参数
SuperType.call(this, "Nicholas")
//实例属性
this.age = 29
}
const instance = new SubType()
alert(instance.name) //"Nicholas";
alert(instance.age) //29
缺点：函数复用
如果仅仅是借用构造函数，那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。考虑到这些问题，借用构造函数的技术也是很少单独使用的。
方式二：组合继承
组合继承（combination inheritance），有时候也叫做伪经典继承，指的是将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。
其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。
function SuperType(name) {
this.name = name
this.colors = ["red", "blue", "green"]
}
SuperType.prototype.sayName = function () {
alert(this.name)
}
function SubType(name, age) {
//继承属性
SuperType.call(this, name)
this.age = age
}
//继承方法
SubType.prototype = new SuperType()
SubType.prototype.constructor = SubType
SubType.prototype.sayAge = function () {
alert(this.age)
}
const instance1 = new SubType("Nicholas", 29)
instance1.colors.push("black")
alert(instance1.colors) //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
const instance2 = new SubType("Greg", 27)
alert(instance2.colors) //"red,blue,green"
instance2.sayName() //"Greg";
instance2.sayAge() //27
SubType 构造函数在调用SuperType构造函数时传入了 name 参数，紧接着又定义了它自己的属性age。然后，将SuperType的实例赋值给 SubType的原型，然后又在该新原型上定义了方法sayAge()。这样一来，就可以让两个不同的 SubType 实例既分别拥有自己属性——包括colors属性，又可以使用相同的方法了。
组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为
JavaScript中最常用的继承模式。而且，instanceof和isPrototypeOf()也能够用于识别基于组合继承创建的对象。
方式三：原型式继承
道格拉斯·克罗克福德在 2006年写了一篇文章，题为Prototypal Inheritance in JavaScript（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()
}
const person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
}
const anotherPerson = object(person)
anotherPerson.name = "Greg"
anotherPerson.friends.push("Rob")
const yetAnotherPerson = object(person)
yetAnotherPerson.name = "Linda"
yetAnotherPerson.friends.push("Barbie")
alert(person.friends) //"Shelby,Court,Van,Rob,Barbie"
克罗克福德主张的这种原型式继承，要求你必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话，可以把它传递给object()函数，然后再根据具体需求对得到的对象加以修改即可。
可以作为另一个对象基础的是person对象，于是我们把它传入到object()函数中，然后该函数就会返回一个新对象。这个新对象将person作为原型，所以它的原型中就包含一个基本类型值属性和一个引用类型值属性。这意味着person.friends不仅属于person所有，而且也会被anotherPerson以及yetAnotherPerson 共享。
Object.create()
ECMAScript 5通过新增 Object.create()方法规范化了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。在传入一个参数的情况下，Object.create() 与 object()方法的行为相同。
const person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
}
const anotherPerson = Object.create(person)
anotherPerson.name = "Greg"
anotherPerson.friends.push("Rob")
const yetAnotherPerson = Object.create(person)
yetAnotherPerson.name = "Linda"
yetAnotherPerson.friends.push("Barbie")
alert(person.friends) //"Shelby,Court,Van,Rob,Barbie"
Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。
const person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
}
const anotherPerson = Object.create(person, {
name: {
value: "Greg"
}
})
alert(anotherPerson.name) //"Greg"
支持Object.create()方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 12+和 Chrome。
方式四：寄生式继承
寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。以下代码示范了寄生式继承模式。
function createAnother(original) {
const clone = object(original) //通过调用函数创建一个新对象
clone.sayHi = function () { //以某种方式来增强这个对象
alert("hi")
}
return clone //返回这个对象
}
在这个例子中，createAnother() 函数接收了一个参数，也就是将要作为新对象基础的对象。然后，把这个对象（original）传递给object()函数，将返回的结果赋值给clone 。再为 clone对象添加一个新方法sayHi()，最后返回clone对象。可以像下面这样来使用 createAnother() 函数：
function createAnother(original) {
const clone = object(original) //通过调用函数创建一个新对象
clone.sayHi = function () { //以某种方式来增强这个对象
alert("hi")
}
return clone //返回这个对象
}
const person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
}
const anotherPerson = createAnother(person)
anotherPerson.sayHi() //"hi"
这个例子中的代码基于person 返回了一个新对象—— anotherPerson。新对象不仅具有person的所有属性和方法，而且还有自己的 sayHi()方法。
使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率；这一点与构造函数模式类似。
方式五：寄生组合式继承
组合继承是JavaScript最常用的继承模式；不过，它也有自己的不足。组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。
function SuperType(name) {
this.name = name
this.colors = ["red", "blue", "green"]
}
SuperType.prototype.sayName = function () {
alert(this.name)
};
function SubType(name, age) {
SuperType.call(this, name) // 第二次调用 SuperType()
this.age = age
}
SubType.prototype = new SuperType() // 第一次调用 SuperType()
SubType.prototype.constructor = SubType
SubType.prototype.sayAge = function () {
alert(this.age)
}
在第一次调用SuperType 构造函数时，SubType.prototype会得到两个属性：name和colors；它们都是SuperType 的实例属性，只不过现在位于SubType的原型中。当调用 SubType构造函数时，又会调用一次SuperType 构造函数，这一次又在新对象上创建了实例属性name和colors 。于是，这两个属性就屏蔽了原型中的两个同名属性。
所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示。
function inheritPrototype(subType, superType){
const prototype = object(superType.prototype) //创建对象
prototype.constructor = subType //增强对象
subType.prototype = prototype //指定对象
}
这个示例中的 inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数：子类型构造函数和超类型构造函数。
在函数内部，第一步是创建超类型原型的一个副本。第二步是为创建的副本添加 constructor 属性，从而弥补因重写原型而失去的默认的constructor 属性。最后一步，将新创建的对象（即副本）赋值给子类型的原型。这样，我们就可以用调用inherit-Prototype()函数的语句，去替换前面例子中为子类型原型赋值的语句了，例如：
function inheritPrototype(subType, superType) {
const 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 () {
alert(this.name)
}
function SubType(name, age) {
SuperType.call(this, name)
this.age = age
}
inheritPrototype(SubType, SuperType)
SubType.prototype.sayAge = function () {
alert(this.age)
}
这个例子的高效率体现在它只调用了一次 SuperType 构造函数，并且因此避免了在 SubType.prototype上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用instanceof 和 isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
网友评论