DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 關於JavaScript 原型鏈的一點個人理解
關於JavaScript 原型鏈的一點個人理解
編輯:JavaScript基礎知識     

JavaScript借鑒了許多語言的特點;例如語法類Java、函數借鑒Scheme、原型繼承借鑒自Self、正則表達式借鑒於Perl。(DC Javascript:語言精粹)。

     首先,每個JS是一門基於原型繼承的面向對象的語言。裡面數組是對象、函數是對象、“對象”當然還是對象。而且每個對象都有一個internal slot[[prototype]],這才是原型鏈連接起來的關鍵。誠然,我們可以為一個對象設置prototype property,但這又怎麼樣呢,這只是表象;後面暗藏殺機。

    好,那我可以用isPrototypeOf()來檢驗某個對象是不是另一個對象的原型;然而這也是基於[[prototype]]鏈的。

   舉個例子:

    //建立一個函數

    function foo () {} 

    //修改函數的prototype property  

    foo.prototype = {

         name : "foo.prototype" 
              };
     //建立一個實例 

      var a = new foo();

    //重寫 a 的默認原型,本應該是foo.prototype.
       a.prototype = {
         name : "a.prototype"
      };

    下面的問題是foo.prototype是不是a的原型呢?!

    這要分開來看:一方面a.prototype確實是{ name : "a.prototype"};但是,foo.prototype.isPrototypeOf(a)結果是true.

    下面來看一看具體的關系:(使用--->表示不明顯的[[prototype]]鏈,---表示prototype property關系)

        Function ---> Function.prototype--->Object.prototype

                          Function.prototype <--- foo---foo.prototype ------>Object.prototype 。

    另外,Number、Boolean、String等的[[protptype]]仍然是Fuction.prototype對象。Function.prototype對象為“function”,內部不含[[construct]]故而不可做構造函數用;實際上Function.prototype類似:function () {}。“function”類型除了[[prototype]]internal slot外,還有prototype屬性。每個函數總是相伴有一個prototype對象:this.prototype = {constructor:this}(一個普通對象)。這個普通對象的[[prototype]]連接到Object.prototype.

   那構造函數建立的實例對象的[[prototype]]是Object.prototype嗎?

          該實例的[[prototype]]是由構造函數的prototype property初始化的,注意不是函數的[[prototype]].所以如果是由Object這個函數構造的對象,那麼就確實是.

  Object是函數,它的prototype是大名鼎鼎的Object.prototype(有點廢話的意思),但是它的[[prototype]]指向Function.prototype.請看下面:

                                                          Object----->Function.prototype------>Object.prototype.

 如何改變這個[[prototype]]鏈呢?

     可以采用var a = Object.create(obj)的形式,或Object.setPrototypeOf(objA,objB)的形式。我想例子就不用舉了,因為關系很簡單;況且我只舉得出一些蹩腳的例子。沒有意義。

 最後一個問題,行為委托是基於[[prototype]]鏈嗎?

      是的,也是這樣。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved