一 概览

  这篇文章是我通过阅读《JavaScript 高级程序设计》和《你不知道的JavaScript》中关于 继承 模块的一点心得。

二 面向对象回顾

面向类编程

  你是否还记得大学里面刚学C++的时候关于面向对象的介绍呢，让我们一块来回顾一下吧。
  类的 定义：在面向对象编程中，类是一种 代码组织结构形式，一种从真实世界到软件设计的建模方法。
  类的 组织形式：面向对象或者面向类编程强调 数据 和 操作数据的行为 应该 封装 在一起,在正式计算机科学中我们称为 数据结构。

类与23种高级设计模式

  类是面向对象的 底层设计模式，它是面向对象23种高级设计模式的 底层机制。
  你或许还听说过 过程化编程,一种不借助高级抽象，仅仅由 过程（函数）调用 来组织代码的编程方式。程序语言中，Java只支持面向类编程，C/C++/Php既支持过程化编程，也支持面向类编程。

类的机制

  在类的设计模式中，它为我们提供了 实例化、 继承、多态 3种机制。
  构造器：类的实例由类的一种特殊方法构建，这个方法的名称通常与类名相同，称为 “构造器（constructor）”。这个方法的明确的工作，就是初始化实例所需的所有信息（状态）。
  实例化：借助构造函数，由通用类到具体对象的过程。
  继承：子类通过 拷贝（请一定要记住这个词）父类的属性和方法，从而使自己也能拥有这些属性与方法的过程。
  多态：由继承产生的，子类重写从父类中继承的属性和方法，从而子类更加具体。

类的继承

（1）相对多态：任何方法都可以引用位于继承层级上更高一层的其他方法（同名或不同名）。我们说“相对”，因为我们不绝对定义我们想访问继承的哪一层（也就是类），而实质上在说“向上一层”来相对地引用。
（2）超类：在许多语言中，使用 super 关键字来引用 父类或祖先类。
（3）如果子类覆盖父类的某个方法，原版的方法和覆盖后的方法都是可以存在的，允许访问。
（4) 不要让多态搞糊涂，子类并不是链接到父类上，子类只是父类的一个副本，类继承的实质是拷贝行为。
（5）多重继承：子类的父类不止一个，JavaScript不支持多重继承。

混入

原理: 子构造函数混入父构造函数的属性和方法。
JavaScript的复合类型以 引用 的方式传递,不支持拷贝行为。混入（Mixin） 以 手动拷贝 的方式模拟继承的拷贝行为。

明确混入：

（1）定义：显示的把一个对象的属性混入另一个对象。
（2）实现如下：

// 另一种mixin，对覆盖不太“安全”
// 大幅简化的`mixin(..)`示例：
function mixin( sourceObj, targetObj ) {
    for (var key in sourceObj) {
        // 仅拷贝非既存内容
        if (!(key in targetObj)) {
            targetObj[key] = sourceObj[key];
        }
    }

    return targetObj;
}

var Vehicle = {
    engines: 1,

    ignition: function() {
        console.log( "Turning on my engine." );
    },

    drive: function() {
        this.ignition();
        console.log( "Steering and moving forward!" );
    }
};

var Car = mixin( Vehicle, {
    wheels: 4,

    drive: function() {
        Vehicle.drive.call( this );
        console.log( "Rolling on all " + this.wheels + " wheels!" );
    }
} );

（3）显示假想多态:Vehicle.drive.call(this)。因为ES6之前，JavaScript无法实现相对多态（inherit：drive()），所以我们明确地用名称指出Vehicle对象，然后在它上面调用drive()函数。
（4）问题：
  A.技术上讲，函数没有被复制，只是复制了函数的引用；
  B.在每一个需要建立 假想多态 引用的函数中都需要建立手动链接（Vehicle.drive.call(this)），维护成本高。可以尝试通过它实现 多重继承。
（5）结论：明确混入复杂、难懂、维护成本高，不推荐使用。

寄生继承：

（1）明确的mixin模式的一个变种，在某种意义上是明确的而在某种意义上是隐含的。
（2）实现如下：在子构造函数中new一个如果找函数的实例对象，在这个对象上扩展属性、方法，最后将这个对象返回。

// “传统的JS类” `Vehicle`
function Vehicle() {
    this.engines = 1;
}
Vehicle.prototype.ignition = function() {
    console.log( "Turning on my engine." );
};
Vehicle.prototype.drive = function() {
    this.ignition();
    console.log( "Steering and moving forward!" );
};

// “寄生类” `Car`
function Car() {
    // 首先, `car`是一个`Vehicle`
    var car = new Vehicle();

    // 现在, 我们修改`car`使它特化
    car.wheels = 4;

    // 保存一个`Vehicle::drive()`的引用
    var vehDrive = car.drive;

    // 覆盖 `Vehicle::drive()`
    car.drive = function() {
        vehDrive.call( this );
        console.log( "Rolling on all " + this.wheels + " wheels!" );
    };
    return car;
}

var myCar = new Car();

myCar.drive();
// Turning on my engine.
// Steering and moving forward!
// Rolling on all 4 wheels!

（3）问题：子函数的初始化创建对象丢失，改变了this绑定，不过不用new去直接创建。

隐式混入

（1）定义：父、子构造函数在原有构造函数与属性、方法之间，添加一层函数，子构造函数中间函数的this绑定到父构造函数中间函数
（2）实现原理：利用了this的二次绑定。
（3) 实现如下：

var Something = {
    cool: function() {
        this.greeting = "Hello World";
        this.count = this.count ? this.count + 1 : 1;
    }
};

Something.cool();
Something.greeting; // "Hello World"
Something.count; // 1

var Another = {
    cool: function() {
        // 隐式地将`Something`混入`Another`
        Something.cool.call( this );
    }
};

Another.cool();
Another.greeting; // "Hello World"
Another.count; // 1 (不会和`Something`共享状态)

(4) 问题：单纯的利用this的二次绑定，不能实现相对应用。
(5) 结论：谨慎使用。

三 原型

prototype

prototype 定义：JavaScript中每个对象都拥有一个prototype属性，它只是一个 其他对象的引用。几乎所有的对象在被创建时，它的这个属性都被赋予了一个 非null 值。

类

“类”函数

代码如下：

function Foo() {
    // ...
}

var a = new Foo();

Object.getPrototypeOf( a ) === Foo.prototype; // true

结论: 当通过调用new Foo()创建实例对象时，实例对象会被链接到Foo.prototype指向的对象。

拷贝与链接

代码如下：

function Foo() {

}

Foo.prototype.fruit = ['apple'];

// foo1的[prototype]链接到了 Foo.prototype
var foo1 = new Foo();
foo1.fruit.push('banana');

// foo2的[prototype]也被链接到了 Foo.prototype
var foo2 = new Foo();
foo2.fruit // [apple, banana]

  在面向类的语言中，可以创造一个类的多个拷贝。在JavaScript中，我们不能创造一个类的多个实例，可以创建多个对象，它们的[prototype]链接指向一个共同对象。但默认地，没有拷贝发生，如此这些对象彼此间最终不会完全分离和切断关系，而是 链接在一起。

  “继承”意味着 拷贝 操作，而JavaScript不拷贝对象属性（原生上，默认地）。相反，JS在两个对象间建立链接，一个对象实质上可以将对属性/函数的访问 委托 到另一个对象上。对于描述JavaScript对象链接机制来说，“委托”是一个准确得多的术语。

new调用和普通调用本质相同

  JavaScript中，new在某种意义上劫持了普通函数，并将它以另一种函数调用：构建一个对象，外加调用这个函数所做的任何事。

实例对象没有constructor属性

function Foo() { }

var foo1 = new Foo();

foo1.constructor === Foo  // true

// 修改Foo.prototype指向的对象
Foo.prototype = {
    //
}

var foo2 = new Foo();

foo2.constructor === Foo  // false

  a.constructor === Foo为true意味着a上实际拥有一个.constructor属性，指向Foo？不对。
  实际上，.constructor引用也 委托 到了Foo.prototype，它 恰好 有一个指向Foo的默认属性。

3 “原型继承”

原型继承分析

代码如下：

function Foo(name) {
    this.name = name;
}

Foo.prototype.myName = function() {
    return this.name;
};

function Bar(name,label) {
    // 构造函数内部相对多态
    Foo.call( this, name );
    this.label = label;
}

// 这里，我们创建一个新的`Bar.prototype`链接链到`Foo.prototype`
Bar.prototype = Object.create( Foo.prototype );

// 注意！现在`Bar.prototype.constructor`不存在了，
// 如果你有依赖这个属性的习惯的话，可以被手动“修复”。
Bar.prototype.myLabel = function() {
    return this.label;
};

var a = new Bar( "a", "obj a" );

a.myName(); // "a"
a.myLabel(); // "obj a"

核心代码分析：
代码1：

function Bar(para1, para2) {
   Foo.call(this, para1);
   //...
}

代码1分析：构造函数内部初始化，利用this绑定，根据父构造函数初始化子构造函数内部。

代码2：

Bar.prototype = Object.create(Foo.prototype)

代码2分析：原型初始化，将子构造函数的[prototype]链接到父构造函数的[prototype]链接的对象。

误区：

Bar.prototype = Foo.prototype

这种方法是错误的，子构造函数会污染到父构造函数

ES6 新方法：

Object.setPrototypeOf(Bar.prototype, Foo.prototype)

“自身”

  面向类语言中，根据实例对象查找创建它的类模板，称为自省（或反射）。JavaScript中，如何根据实例对象，查找它的委托链接呢？

1 instanceOf:

代码如下：

function Foo() {
    //...
}

var a = new Foo();

a instanceOf Foo  // true

代码分析：
a: instanceOf 机制，在实例对象（a）的原型链中，是否有Foo.prototype；
b: 需要用于可检测的构造函数（Foo）;
c: 无法判断实例对象间（比如a，b）是否通过[prototype]链相互关联。

2 isPrototypeOf [[prototype]]反射：

代码如下：

function Foo() {
    // ...
}

var a = new Foo();

Foo.prototype.isPrototypeOf(a);  // true

// 对象b是否在a的[[prototype]]链出现过
b.isPrototypeOf(a);

代码分析：
a：在实例对象（a）的原型链中，是否有Foo.prototype；
b：需要用于可检测的构造函数（Foo）；
c：可以判断对象间是否通过[prototype]链相互关联。

3 getPrototypeOf 获取原型链：

代码如下：

function Foo() {
    // ...
}

var a = new Foo();

Object.getPrototypeOf(a)  // 查看constructor属性

4 proto：

代码如下：

function Foo() {
    // ...
}

var a = new Foo();

a.__proto__ === Foo.prototype  // true

代码分析：
a：proto属性在ES6被标准化；
b：proto属性跟 constructor属性类似，它不存在实例对象中。constructor属性存在于 原型链中,proto存在于Object.prototype中。
c：proto看起来像一个属性，但实际上将它看做是一个getter/setter更合适。

Object.defineProperty( Object.prototype, "__proto__", {
    get: function() {
        return Object.getPrototypeOf( this );
    },
    set: function(o) {
        // setPrototypeOf(..) as of ES6
        Object.setPrototypeOf( this, o );
        return o;
    }
} );

对象关联

创建关联

代码如下：

var foo = {
    printFoo: function() {
        console.log('foo');
    }
}

var a = Object.create(foo);

a.printFoo();  // 'foo'

代码分析：
a、Object.create()会创建一个对象（a），并把它链接到指定对象（foo）；
b、相比new 调用，Object.create()不会产生 prototype引用和 constructor引用。

关联是否备用

代码如下：

var anotherObject = {
    cool: function() {
        console.log('cool');
    }
}

var bar = Object.create(anotherObject);

bar.cool();  // 'cool'

代码分析：
a、单纯的在bar无法处理属性或方法时，建立备用链接（anotherObject），代码会变得很难理解和维护，这种模式应该慎重使用；
b、ES6提供“代理”功能，它实现的就是“方法无法找到”时的行为。