理解js中的原型鏈，prototype與__proto__的關係

 

 

首先，要明確幾個點：

1.在JS裏，萬物皆對象。方法（Function）是對象，方法的原型(Function.prototype)是對象。所以，它們都會具備對象共有的特色。
即：對象具備屬性__proto__，可稱爲隱式原型，一個對象的隱式原型指向構造該對象的構造函數的原型，這也保證了實例可以訪問在構造函數原型中定義的屬性和方法。

2.方法(Function)
方法這個特殊的對象，除了和其餘對象同樣有上述_proto_屬性以外，還有本身特有的屬性——原型屬性（prototype），這個屬性是一個指針，指向一個對象，這個對象的用途就是包含全部實例共享的屬性和方法（咱們把這個對象叫作原型對象）。原型對象也有一個屬性，叫作constructor，這個屬性包含了一個指針，指回原構造函數。

 

好啦，知道了這兩個基本點，咱們來看看上面這副圖。

1.構造函數Foo()
構造函數的原型屬性Foo.prototype指向了原型對象，在原型對象裏有共有的方法，全部構造函數聲明的實例（這裏是f1，f2）均可以共享這個方法。

2.原型對象Foo.prototype
Foo.prototype保存着實例共享的方法，有一個指針constructor指回構造函數。

3.實例
f1和f2是Foo這個對象的兩個實例，這兩個對象也有屬性__proto__，指向構造函數的原型對象，這樣子就能夠像上面1所說的訪問原型對象的全部方法啦。

 

另外：

構造函數Foo()除了是方法，也是對象啊，它也有__proto__屬性，指向誰呢？
指向它的構造函數的原型對象唄。函數的構造函數不就是Function嘛，所以這裏的__proto__指向了Function.prototype。
其實除了Foo()，Function(), Object()也是同樣的道理。

原型對象也是對象啊，它的__proto__屬性，又指向誰呢？
同理，指向它的構造函數的原型對象唄。這裏是Object.prototype.

最後，Object.prototype的__proto__屬性指向null。

 

總結：

1.對象有屬性__proto__,指向該對象的構造函數的原型對象。
2.方法除了有屬性__proto__,還有屬性prototype，prototype指向該方法的原型對象。

 

 

 

*******************************************************************************************************

說到prototype，就不得不先說下new的過程。

咱們先看看這樣一段代碼：

1	<script type="text/javascript">

2	var Person = function () { };

3	var p = new Person();

4

</script>

很簡單的一段代碼，咱們來看看這個new究竟作了什麼？咱們能夠把new的過程拆分紅如下三步：

<1> var p={}; 也就是說，初始化一個對象p。

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是說構造p，也能夠稱之爲初始化p。

關鍵在於第二步，咱們來證實一下：

1	<script type="text/javascript">

2	var Person = function () { };

3	var p = new Person();

4	alert(p.__proto__ === Person.prototype);

5

</script>

這段代碼會返回true。說明咱們步驟2的正確。

那麼__proto__是什麼？咱們在這裏簡單地說下。每一個對象都會在其內部初始化一個屬性，就是__proto__，當咱們訪問一個對象的屬性 時，若是這個對象內部不存在這個屬性，那麼他就會去__proto__裏找這個屬性，這個__proto__又會有本身的__proto__，因而就這樣 一直找下去，也就是咱們平時所說的原型鏈的概念。

按照標準，__proto__是不對外公開的，也就是說是個私有屬性，可是Firefox的引擎將他暴露了出來成爲了一個共有的屬性，咱們能夠對外訪問和設置。

好，概念說清了，讓咱們看一下下面這些代碼：

1	<script type="text/javascript">

2	var Person = function () { };

3	Person.prototype.Say = function () {

4	alert("Person say");

5

}

6	var p = new Person();

7

p.Say();

8

</script>

這段代碼很簡單，相信每一個人都這樣寫過，那就讓咱們看下爲何p能夠訪問Person的Say。

首先var p=new Person()；能夠得出p.__proto__=Person.prototype。那麼當咱們調用p.Say()時，首先p中沒有Say這個屬性， 因而，他就須要到他的__proto__中去找，也就是Person.prototype，而咱們在上面定義了 Person.prototype.Say=function(){}; 因而，就找到了這個方法。

好，接下來，讓咱們看個更復雜的。

01	<script type="text/javascript">

02	var Person = function () { };

03	Person.prototype.Say = function () {

04	alert("Person say");

05

}

 

06	Person.prototype.Salary = 50000;

 

07	var Programmer = function () { };

08	Programmer.prototype = new Person();

09	Programmer.prototype.WriteCode = function () {

10	alert("programmer writes code");

 

11

};

 

 

12	Programmer.prototype.Salary = 500;

 

13	var p = new Programmer();

14

p.Say();

15	p.WriteCode();

16	alert(p.Salary);

17

</script>

咱們來作這樣的推導：

var p=new Programmer()能夠得出p.__proto__=Programmer.prototype;

而在上面咱們指定了Programmer.prototype=new Person();咱們來這樣拆分，var p1=new Person();Programmer.prototype=p1;那麼:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根據上面獲得p.__proto__=Programmer.prototype。能夠獲得p.__proto__.__proto__=Person.prototype。

好，算清楚了以後咱們來看上面的結果,p.Say()。因爲p沒有Say這個屬性，因而去p.__proto__，也就是 Programmer.prototype，也就是p1中去找，因爲p1中也沒有Say，那就去p.__proto__.__proto__，也就是 Person.prototype中去找，因而就找到了alert(「Person say」)的方法。

其他的也都是一樣的道理。

這也就是原型鏈的實現原理。

最後，其實prototype只是一個假象，他在實現原型鏈中只是起到了一個輔助做用，換句話說，他只是在new的時候有着必定的價值，而原型鏈的本質，其實在於__proto__！