Javascript學習筆記七——原型鏈的原理

作者: 飛林沙  來源: 博客園  發布時間: 2010-01-25 13:07  閱讀: 12874 次  推薦: 14   原文鏈接   [收藏]  

系列文章導航:

JavaScript學習筆記一——數據類型

JavaScript學習筆記二——函數

JavaScript學習筆記三——作用域

JavaScript學習筆記四——Eval函數

JavaScript學習筆記五——類和對象

JavaScript學習筆記六:prototype的提出

Javascript學習筆記七——原型鏈的原理

Javascript學習筆記八——用JSON做原型

Javascript學習筆記九——prototype封裝繼承

Javascript學習筆記十——網頁運行原理

Javascript學習筆記十一——包裝DOM對象

Javascript學習筆記十三——關于響應事件

Javascript學習筆記十二——Ajax入門

 

 

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

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

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

 

很簡單的一段代碼,我們來看看這個new究竟做了什么?我們可以把new的過程拆分成以下三步:

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

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是說構造p,也可以稱之為初始化p。

關鍵在于第二步,我們來證明一下:

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

 

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

那么__proto__是什么?我們在這里簡單地說下。每個對象都會在其內部初始化一個屬性,就是__proto__,當我們訪問一個對象的屬性時,如果這個對象內部不存在這個屬性,那么他就會去__proto__里找這個屬性,這個__proto__又會有自己的__proto__,于是就這樣一直找下去,也就是我們平時所說的原型鏈的概念。

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

好,概念說清了,讓我們看一下下面這些代碼:

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

 

這段代碼很簡單,相信每個人都這樣寫過,那就讓我們看下為什么p可以訪問Person的Say。

首先var p=new Person();可以得出p.__proto__=Person.prototype。那么當我們調用p.Say()時,首先p中沒有Say這個屬性,于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我們在上面定義了Person.prototype.Say=function(){}; 于是,就找到了這個方法。

好,接下來,讓我們看個更復雜的。

    <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>

 

我們來做這樣的推導:

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__!

14
0
 
標簽:JavaScript
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()