摘要：實(shí)例可以通過代理來找到它，并用來檢測(cè)其構(gòu)造函數(shù)。經(jīng)典繼承圖這也是通過構(gòu)造函數(shù)來創(chuàng)建對(duì)象，但是在這一系列的對(duì)象和實(shí)例之間我們的焦點(diǎn)是放在原型鏈上。盡管，但構(gòu)造函數(shù)的屬性并不是對(duì)象自己的屬性，它實(shí)際上是通過尋找原型鏈獲得的，即所指向的地方。

繼承是面向?qū)ο缶幊陶Z言的一大核心功能點(diǎn)，雖然JavaScript并不是一門真正意義上的面向?qū)ο蟮木幊陶Z言，但也通過某種手段實(shí)現(xiàn)了繼承這一功能，最常見的JavaScript繼承是通過原型鏈去實(shí)現(xiàn)，這就涉及到了prototype、__proto__、[[prototype]]三者之間的關(guān)系了。

如上圖所示，理解JavaScript中的繼承的關(guān)鍵是要理解母雞如何產(chǎn)蛋的過程。

每個(gè)對(duì)象都可以有另一個(gè)對(duì)象作為其原型。然后前一個(gè)對(duì)象繼承了它的所有原型屬性。對(duì)象通過內(nèi)部屬性[[Prototype]]指定其原型。由[[Prototype]]屬性連接的對(duì)象鏈稱為原型鏈。

為了理解基于原型的繼承是怎么樣的，我們先來看一個(gè)例子。

var proto = {
    describe: function () {
        return "name: "+this.name;
    }
};
var obj = {
    [[Prototype]]: proto,
    name: "obj"
};

> obj.describe
[Function]

> obj.describe()
"name: obj"

__proto__是Object.prototype對(duì)象的訪問者屬性。它暴露了訪問它的對(duì)象的內(nèi)部原型（[[Prototype]]）

function Foo(name) {
    this.name = name
    this.whoAmI = function () {
        return this.name
    }
}
var b = new Foo("b")
var a = new Foo("a")
b.say = function () {
    console.log(`Hi from ${this.whoAmI()}`)
}
console.log(a.__proto__ === Foo.prototype); // true
console.log(a.__proto__ === b.__proto__); // true

JavaScript引擎在對(duì)象b上添加了一個(gè)say方法，而不是在Foo原型對(duì)象(Foo.prototype)上。

正如上圖中看到的那樣，a.__ proto__暴露了指向Foo.prototype對(duì)象的[[Prototype]]。同樣，b.__ proto__也指向與a.__ proto__相同的對(duì)象。

除了通過指定模式創(chuàng)建對(duì)象之外，構(gòu)造函數(shù)還可以執(zhí)行另一個(gè)有用的操作 - 它會(huì)自動(dòng)為新創(chuàng)建的對(duì)象設(shè)置原型對(duì)象。此原型對(duì)象存儲(chǔ)在構(gòu)造函數(shù)的原型對(duì)象屬性中。

我們可以使用構(gòu)造函數(shù)用b對(duì)象重寫前面的例子。因此，對(duì)象a（原型）Foo.prototype的作用：

創(chuàng)建擁有原型對(duì)象屬性x及方法calculate()的一個(gè)Foo對(duì)象。

function Foo(y) {
  this.y = y;
}
Foo.prototype.x = 10;
Foo.prototype.calculate = function (z) {
  return this.x + this.y + z;
};

使用對(duì)象Foo創(chuàng)建一個(gè)b對(duì)象實(shí)例。

var b = new Foo(20);
b.calculate(30); // 60
console.log(
  b.__proto__ === Foo.prototype, // true
  b.__proto__.calculate === Foo.prototype.calculate // true
  b.__proto__.calculate === b.calculate, // true
  Foo === b.constructor, // true
  Foo === Foo.prototype.constructor, // true
);

正如上面打印出來的信息，對(duì)象b從Foo()繼承了方法calculate。“Foo.prototype”自動(dòng)創(chuàng)建一個(gè)特殊屬性“constructor”，它是對(duì)構(gòu)造函數(shù)本身的引用。實(shí)例b可以通過代理來找到它，并用來檢測(cè)其構(gòu)造函數(shù)。

這也是通過構(gòu)造函數(shù)來創(chuàng)建對(duì)象，但是在這一系列的對(duì)象和實(shí)例之間我們的焦點(diǎn)是放在原型鏈上。原型對(duì)象其實(shí)也是普通的對(duì)象，也有屬于它們自己的屬性。如果原型具有對(duì)其原型的非空引用，依此類推，則稱為原型鏈。

以下是JavaScript經(jīng)典繼承的圖表。構(gòu)造函數(shù)Foo只是虛構(gòu)類的類名。 foo對(duì)象是Foo的一個(gè)實(shí)例。

現(xiàn)在我們可以從圖中看到為什么當(dāng)我們從Dog類繼承Animal 時(shí)，我們會(huì)這樣做:

function Dog() {} // the usual constructor function
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

當(dāng)通過new操作符創(chuàng)建一個(gè)實(shí)例的時(shí)候，都發(fā)生了些什么：

注意Foo.prototype的原型(prototype)并不是來自原型鏈。Foo.prototype指向原型鏈中的某些位置，但Foo的這個(gè)原型屬性不是來自原型鏈。構(gòu)成原型鏈的是proto指向鏈，以及proto指向的對(duì)象。比如從foo .__ proto__，鏈接到到foo .__ proto . proto__，等等，直到達(dá)到null(也就是咱們常說的原型鏈的頂部是null)。

proto and prototype的關(guān)系:

JavaScript的經(jīng)典繼承就像這樣：我是一個(gè)構(gòu)造函數(shù)，我只是一個(gè)函數(shù)，我持有一個(gè)原型引用，每當(dāng)調(diào)用foo = new Foo（）時(shí)，我會(huì)讓foo .__ proto__指向我的原型對(duì)象。所以，F(xiàn)oo.prototype 與 obj.__proto__是兩個(gè)不同的概念。Foo.prototype指示，當(dāng)創(chuàng)建Foo的對(duì)象時(shí)，這是新對(duì)象的原型鏈應(yīng)該指向的點(diǎn) - 也就是說，foo .__ proto__應(yīng)該指向Foo.prototype指向的位置。

如果需要添加一個(gè)方法怎么辦？

如果woofie這個(gè)對(duì)象沒有movie方法，它將通過原型鏈去尋找，就像任何原型繼承場(chǎng)景一樣，首先這個(gè)對(duì)象通過woofie.__proto__,它與Dog.prototype所指的對(duì)象相同。如果move方法不是這個(gè)對(duì)象的一個(gè)屬性(意味著Dog這個(gè)類并沒有move這個(gè)方法)，則在原型鏈中上升一級(jí)(去原型鏈上尋找)，即woofie .__ proto . proto__，或者與Animal.prototype相同。

Animal.prototype.move = function() { ... };

*盡管foo.constructor === Foo，但構(gòu)造函數(shù)的屬性并不是foo對(duì)象自己的屬性，它實(shí)際上是通過尋找原型鏈獲得的，即foo .__ proto__所指向的地方。對(duì)Function.constructor也是一樣。

當(dāng)我們看到Constructor.prototype，foo .__ proto__，F(xiàn)oo.prototype.constructor時(shí)，該圖可能很復(fù)雜，有時(shí)會(huì)令人困惑。

要驗(yàn)證圖表，請(qǐng)注意，即使foo.constructor將顯示一個(gè)值，foo.constructor也不是foo自己的屬性，而是通過跟蹤原型鏈獲得的，因?yàn)榭梢詼贤ㄟ^foo.hasOwnProperty（“constructor”）來進(jìn)行驗(yàn)證。
*

[[Prototype]]：對(duì)象通過其內(nèi)部屬性指定的原型對(duì)象

proto ：創(chuàng)建的對(duì)象實(shí)例所擁有的內(nèi)部屬性，在語言層面可以直接訪問[[Prototype]]

prototype：prototype是在使用new操作符創(chuàng)建對(duì)象時(shí)用于構(gòu)建__proto__的對(duì)象,在實(shí)例化的對(duì)象上(或其他對(duì)象)不可使用，僅在構(gòu)造函數(shù)上使用，因?yàn)樗菑腇untion和Object上復(fù)制的。而__proto__隨處可用

    ( new Foo ).__proto__ === Foo.prototype  //true
    ( new Foo ).prototype === undefined      //true
    

http://speakingjs.com/es5/ind...

http://www.javascripttutorial...

http://stackoverflow.com/ques...

http://dmitrysoshnikov.com/ec...

https://www.quora.com/What-is...

http://www.jisaacks.com/proto...

http://kenneth-kin-lum.blogsp...