es6之前的 JavaScript 继承

学习 JavaScritpt 高级程序设计的笔记

经典继承方式

原型链方式

基本思想：利用原型让一个引用类型集成另一个引用类型的属性和方法。
简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

function SuperType() {
    this.prototype = true;
}
SuperType.prototype.getSuperValue = function () {
    return this.prototype;
};
function SubType() {
    this.subprototype = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
    return this.subprototype;
};
var instance = new SubType();
console.log(instance.getSuperValue()); // true

SubType 继承 SuperType ,并且继承是通过创建 SuperType 的实例，并将实例赋给了 SubType.prototype 。实现本质是重写原型的实例，代之以一个新类型的实例。
通过原型链实现继承时，会经历三个搜索步骤：

1. 搜索实例；
2. 搜索 SubType.prototype;
3. 搜索 SuperType.prototype;

function SuperType() {
    this.colors = ['red', 'blue', 'green'];
}
function SubType() {
}
SubType.prototype = new SuperType();
var instance = new SubType();
instance.colors.push('black');
console.log(instance.colors); // ... black
var instance2 = new SubType();
console.log(instance2.colors); // ...black

原型链问题：
5. 包含引用类型值的原型属性会被所有实例共享；
6. 在创建子类型的实例时，不能向超类型的构造函数中传递参数。实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类的构造函数传递参数。

借用构造函数

思想：在子类构造函数中调用超类构造函数。

function SuperType() {
    this.colors = ['red', 'blue', 'green'];
}
function SubType() {
    SuperType.call(this);
}
SubType.prototype = new SuperType();
var instance = new SubType();
instance.colors.push('black');
console.log(instance.colors); // ... black
var instance2 = new SubType();
console.log(instance2.colors); // red blue green

1. 传递参数：

function SuperType(name) {
    this.name = name;
}
function SubType() {
    SuperType.call(this, "Liu");
    this.age = 24;
}
var instance = new SubType();
console.log(instance.name); // liu
console.log(instance.age); // 24

SuperType 只会接受一个参数 name，该参数会直接赋给一个属性。为了确保SuperType 构造函数不会重写子类的属性，可以在调用超类构造函数时，再添加应该在子类型中定义的属性。
2. 构造函数的问题
无法避免构造函数模式存在的问题——方法都在构造函数中定义，因此函数复用就无从提起了。而且在超类原型中定义的方法，对子类而言时不可见的，结果所有类型都只能使用构造函数模式。

组合继承

思想：原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。

function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'yellow'];
}
function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
    console.log(this.age)
};
console.log(SubType.prototype.constructor); // [Function: SubType]
var sub = new SubType("liu", 25);
sub.colors.push('black');
console.log(sub.name +' '+ sub.age +' '+ sub.colors);// liu, 25, red, blue, yellow, black
var sub1 = new SubType('wang', 24);
sub1.colors.push('green');
console.log(sub1.name +' '+ sub1.age +' '+ sub1.colors); // wang 24 red, blue, yellow, green
var sup = new SuperType('wang');
console.log(SubType.prototype.isPrototypeOf(sup)); // false
console.log(SubType.prototype.isPrototypeOf(sub)); // true
console.log(SuperType.prototype.isPrototypeOf(sub)); // true
console.log(sub instanceof SubType);    // true
console.log(sub instanceof SuperType);  // true

原型式继承

思想：借助原型可以基于已有的对象创建新对象，同时不必因此创建自定义类型。

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

在 object() 函数内部，先创建一个临时构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个实例。

var person = {
   name: 'liu',
   friends: ['Tom', 'Sandy', 'Anny']
}
var anotherPerson = Object.create(person);
anotherPerson.name = 'wang'
anotherPerson.friends.push('Jack')
console.log(anotherPerson.name + ' ' + anotherPerson.friends) // wang Tom, Sandy, Anny, Jack
var yetPerson = Object.create(person)
yetPerson.name = 'wu'
yetPerson.friends.push('Paul')
console.log(yetPerson.name + ' ' + yetPerson.friends); // wu Tom, Sandy, Anny, Jack, Paul

问题：包含引用类型值的属性始终都会共享。

寄生式继承

思想：与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地时它做了所有工作一样返回对象。

function creatAnother(origin) {
   var clone = Object(origin);
   clone.sayHi = function () {
      console.log('hi');
   };
   return clone;
}
var person = {
   name: 'liu',
   friends: ['wang', 'ni', 'ma']
};
var anotherPerson = creatAnother(person);
anotherPerson.sayHi();	// hi

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

寄生组合式继承

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

/**
 * 第一步：创建超类型原型的一个副本。
 * 第二步：为创建的副本添加 constructor 属性，从而弥补因重写原型而失去的默认的 constructor 属性
 * 第三步：将新创建的对象（即副本）赋值给子类型的原型
 *
 * @param  {[type]} subType   [子类行构造函数]
 * @param  {[type]} superType [超类型构造函数]
 * @return {[type]}           [description]
 */
function inheritPrototype(subType, superType) {
   var prototype = Object(superType.prototype) // 创建新对象
   prototype.constructor = subType // 增强对象
   subType.prototype = prototype // 指定对象
}

 function SuperType(name) {
   this.name = name
   this.colors = ['red', 'yellow', 'blue']
}
SuperType.prototype.sayName = function() {
   console.log(this.name);
}
function SubType(name, age) {
   SuperType.call(this, name) // apply 需要传入数组
   this.age = age
}
inheritPrototype(SubType, SuperType)
SubType.prototype.sayAge = function() {
   console.log(this.age);
}
var subPerson = new SubType('liu', 25)
subPerson.sayAge() // 25
subPerson.sayName()    // liu
var a = new SubType('wang', 24);
a.sayAge() // 24   
a.sayName()    // wang

红皮书没有新版 es6 的class相关的，所以就不此讨论了。
水平有限，如若出错，还望指出。谢谢