16-JavaScript高级程序设计-继承

一、继承

许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，实现继承则继承实际的方法。
ECMAScript 只支持实现继承，主要依靠原型链实现。

理解继承：一个对象自己没有的属性和方法，另一个对象有，拿过来使用，就实现了继承。

1.原型链

原型对象也有自己的原型，原型的原型也指向自己的构造函数。层层递进，形成原型链。

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;
};
var instance = new SubType();
alert(instance.getSubValue()); // false
alert(instance.getSuperValue()); // true

默认的原型

所有引用类型默认都继承了 Object
–> 原型链最终指向 Object.prototype （实际最顶端是null）
–> 自定义类型会继承 toString()、valueOf() 等默认方法

确定原型和实例的关系

• instanceof 操作符
  测试实例与原型链中出现过的构造函数，返回 true
• isPrototypeOf()
  只要是原型链中出现的原型，isPrototypeOf() 返回 true

谨慎地定义方法

注意：给原型添加方法的代码，一定要放在替换原型的语句之后。

原型链的问题

最主要的问题：来自包含引用类型值的原型。（详见上一篇）
第二个问题：在创建子类型的实例时，不能向超类型的构造函数中传递参数。
结论：很少单独使用

2.借用构造函数

借用构造函数(constructor stealing)（伪造对象或经典继承）
基本思想：在子类型构造函数的内部调用超类型构造函数。

function SuperType(){
  this.colors = ["red", "blue", "green"];
}
function SubType(){
  // 继承了 SuperType
  SuperType.call(this); // this是实例本身调用
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

传递参数

可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType(name){
  this.name = name;
}
function SubType(){
  //继承了 SuperType，同时还传递了参数
  SuperType.call(this, "Nicholas");
  //实例属性(为确保不会重写子类型的属性，写在调用后面)
  this.age = 29;
}
var instance = new SubType();

借用构造函数的问题

构造函数模式存在的问题：方法都在构造函数中定义，没做到函数复用；
在超类型的原型中定义的方法，对子类型是不可见的，结果所有类型都只能使用构造函数模式。
结论：很少单独使用

3.组合继承 ☆☆☆☆☆

组合继承(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);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

instanceof 和 isPrototypeOf() 能够用于识别基于组合继承创建的对象。
结论：最常用的继承方式

4.原型式继承

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。这种方法没有使用严格意义上的构造函数。
要求：必须有一个对象可以作为另一个对象的基础。

Object.create()
两个参数：一个用作新对象原型的对象 和 一个为新对象定义额外属性的对象（可选的）。

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person, {
  name: {
    value: "Greg"
  }
});
alert(anotherPerson.name); //"Greg"
alert(anotherPerson.friends); //["Shelby", "Court", "Van"]

浏览器支持：IE9+、Firefox 4+、Safari 5+、Opera 12+ 和 Chrome。
结论：没必要创建构造函数，只想让一个对象与另一个对象保持类似的情况下，可以使用原型式继承。

5.寄生式继承

寄生式(parasitic)继承思路：
创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的是它做了所有工作一样返回对象。

// 寄生式继承模式：
function createAnother(original){ 
  varclone = Object.create(original); //通过调用函数创建一个新对象
  clone.sayHi = function(){ //以某种方式来增强这个对象
    alert("hi");
  };
  return clone; //返回这个对象
}
// 调用
var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

结论：在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。
注意：使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率。

6.寄生组合式继承 ☆☆☆

最常用的继承模式：组合继承
最大的问题：无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

解决方式：寄生组合式继承
通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。
基本思路：不必为了指定子类型的原型而调用超类型的构造函数。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

function inheritPrototype(subType, superType){
  var 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(){
  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() 。

结论：普遍认为寄生组合式继承是引用类型最理想的继承范式。
应用：YUI 的 YAHOO.lang.extend() 方法

---

上一篇：15-JavaScript高级程序设计-创建对象
下一篇：17-JavaScript高级程序设计-函数表达式

全书整理版：《Javascript高级程序设计》第3版（总结版）

---