系列文章導(dǎo)航：

JavaScript學(xué)習(xí)筆記一——數(shù)據(jù)類(lèi)型

JavaScript學(xué)習(xí)筆記二——函數(shù)

JavaScript學(xué)習(xí)筆記三——作用域

JavaScript學(xué)習(xí)筆記四——Eval函數(shù)

JavaScript學(xué)習(xí)筆記五——類(lèi)和對(duì)象

JavaScript學(xué)習(xí)筆記六：prototype的提出

Javascript學(xué)習(xí)筆記七——原型鏈的原理

Javascript學(xué)習(xí)筆記八——用JSON做原型

Javascript學(xué)習(xí)筆記九——prototype封裝繼承

Javascript學(xué)習(xí)筆記十——網(wǎng)頁(yè)運(yùn)行原理

Javascript學(xué)習(xí)筆記十一——包裝DOM對(duì)象

Javascript學(xué)習(xí)筆記十三——關(guān)于響應(yīng)事件

Javascript學(xué)習(xí)筆記十二——Ajax入門(mén)

說(shuō)到prototype，就不得不先說(shuō)下new的過(guò)程。

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

    <script type="text/Javascript">        var Person = function () { };        var p = new Person();    script>

很簡(jiǎn)單的一段代碼，我們來(lái)看看這個(gè)new究竟做了什么？我們可以把new的過(guò)程拆分成以下三步：

<1> var p={}; 也就是說(shuō)，初始化一個(gè)對(duì)象p。

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是說(shuō)構(gòu)造p，也可以稱(chēng)之為初始化p。

關(guān)鍵在于第二步，我們來(lái)證明一下：

    <script type="text/Javascript">        var Person = function () { };        var p = new Person();        alert(p.__proto__ === Person.prototype);    script>

這段代碼會(huì)返回true。說(shuō)明我們步驟2的正確。

那么__proto__是什么？我們?cè)谶@里簡(jiǎn)單地說(shuō)下。每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是__proto__，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去__proto__里找這個(gè)屬性，這個(gè)__proto__又會(huì)有自己的__proto__，于是就這樣一直找下去，也就是我們平時(shí)所說(shuō)的原型鏈的概念。

按照標(biāo)準(zhǔn)，__proto__是不對(duì)外公開(kāi)的，也就是說(shuō)是個(gè)私有屬性，但是Firefox的引擎將他暴露了出來(lái)成為了一個(gè)共有的屬性，我們可以對(duì)外訪問(wèn)和設(shè)置。

好，概念說(shuō)清了，讓我們看一下下面這些代碼：

    <script type="text/Javascript">        var Person = function () { };        Person.prototype.Say = function () {            alert("Person say");        }        var p = new Person();        p.Say();    script>

這段代碼很簡(jiǎn)單，相信每個(gè)人都這樣寫(xiě)過(guò)，那就讓我們看下為什么p可以訪問(wèn)Person的Say。

首先var p=new Person()；可以得出p.__proto__=Person.prototype。那么當(dāng)我們調(diào)用p.Say()時(shí)，首先p中沒(méi)有Say這個(gè)屬性，于是，他就需要到他的__proto__中去找，也就是Person.prototype，而我們?cè)谏厦娑x了Person.prototype.Say=function(){}; 于是，就找到了這個(gè)方法。

好，接下來(lái)，讓我們看個(gè)更復(fù)雜的。

    <script type="text/Javascript">        var Person = function () { };        Person.prototype.Say = function () {            alert("Person say");        }        Person.prototype.Salary = 50000;        var Programmer = function () { };        Programmer.prototype = new Person();        Programmer.prototype.WriteCode = function () {            alert("programmer writes code");        };        Programmer.prototype.Salary = 500;        var p = new Programmer();        p.Say();        p.WriteCode();        alert(p.Salary);    script>

我們來(lái)做這樣的推導(dǎo)：

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

而在上面我們指定了Programmer.prototype=new Person();我們來(lái)這樣拆分，var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根據(jù)上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。

好，算清楚了之后我們來(lái)看上面的結(jié)果,p.Say()。由于p沒(méi)有Say這個(gè)屬性，于是去p.__proto__，也就是Programmer.prototype，也就是p1中去找，由于p1中也沒(méi)有Say，那就去p.__proto__.__proto__，也就是Person.prototype中去找，于是就找到了alert(“Person say”)的方法。

其余的也都是同樣的道理。

這也就是原型鏈的實(shí)現(xiàn)原理。

最后，其實(shí)prototype只是一個(gè)假象，他在實(shí)現(xiàn)原型鏈中只是起到了一個(gè)輔助作用，換句話(huà)說(shuō)，他只是在new的時(shí)候有著一定的價(jià)值，而原型鏈的本質(zhì)，其實(shí)在于__proto__！

it知識(shí)庫(kù)：Javascript學(xué)習(xí)筆記七——原型鏈的原理，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。