說到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__！

轉載于:https://www.cnblogs.com/chengjun/p/5237288.html

總結

以上是生活随笔為你收集整理的理解js中的原型链，prototype与__proto__的关系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。