1. 程式人生 > >JS 面向物件之原型鏈

JS 面向物件之原型鏈

物件的原型鏈

  1. 只要是物件就有原型
  2. 原型也是物件
  3. 只要是物件就有原型, 並且原型也是物件, 因此只要定義了一個物件, 那麼就可以找到他的原型, 如此反覆, 就可以構成一個物件的序列, 這個結構就被成為原型鏈
  4. 原型鏈到哪裡是一個頭?
  5. 一個預設的原型鏈結構是什麼樣子的?(當前物件->建構函式.prototype->Object.prototype->null)
  6. 原型鏈結構對已知語法結構有什麼修正?

原型鏈的結構

  1. 原型鏈繼承就是利用就是修改原型鏈結構( 增加、刪除、修改節點中的成員 ), 從而讓例項物件可以使用整個原型鏈中的所有成員( 屬性和方法 )
  2. 使用原型鏈繼承必須滿足屬性搜尋原則

屬性搜尋原則

  1. 所謂的屬性搜尋原則, 就是物件在訪問屬性與方法的時候, 首先在當前物件中查詢
  2. 如果當前物件中儲存在屬性或方法, 停止查詢, 直接使用該屬性與方法
  3. 如果物件沒有改成員, 那麼再其原型物件中查詢
  4. 如果原型物件含有該成員, 那麼停止查詢, 直接使用
  5. 如果原型還沒有, 就到原型的原型中查詢
  6. 如此往復, 直到直到 Object.prototype 還沒有, 那麼就返回 undefind.
  7. 如果是呼叫方法就包錯, 該 xxxx 不是一個函式

屬性搜尋原則

在實現繼承的時候,有時會利用替換原型鏈結構的方式實現原型繼承,那麼原型鏈結構就會發生改變

function ItcastCollection( ){ }
ItcastCollection.prototype=[ ];
var arr=new ItcastCollection( );
//arr->[ ]->Array.prototype->Object.prototype->null
//var arr=new Array( );

什麼是原型式繼承(這裡的使用原則必須滿足屬性搜尋原則)

所謂的原型式繼承就是利用修改原型鏈的結構(增加一個節點,刪除一個節點,修改節點中的成員)來使得例項物件可以使用整條鏈中的所有成員


在js中,所有的物件字面量在解析以後,就是一個具體的物件了,那麼可以理解為呼叫的對應的構造方法
1,例如在程式碼中寫上‘{ }’,就相當於‘new Array( )’
2,例如程式碼中有'[ ]',就相當於‘new Array( )’
3,例如程式碼中有'/ . /',相當於‘new  REgExp( ' . ’)'
注意:在底層理論執行的過程中,是否有呼叫建構函式,不一定,和瀏覽器的版本有關

原型鏈結構圖    

  1. 建構函式 物件原型鏈結構圖
    function Person (){}; var p = new Person();

  2. {} 物件原型鏈結構圖

  3. [] 陣列原型鏈結構圖

  4. Object.prototype 對應的建構函式

  5. div 對應的建構函式
  6. div -> DivTag.prototype( 就是 o ) -> Object.prototype -> null

var o = {
    appendTo: function ( dom ) {
    }
};
function DivTag() {}
DivTag.prototype = o;

var div = new DivTag();


函式的原型鏈結構

任意的一個函式, 都是相當於 Function 的例項. 類似於 {} 與 new Object() 的關係

    function foo () {};
    // 告訴直譯器, 有一個物件叫 foo, 它是一個函式
    // 相當於 new Function() 得到一個 函式物件
  1. 函式有 __proto__ 屬性
  2. 函式的建構函式是 Function
  3. 函式應該繼承自 Function.prototype
  4. Fucntion.prototype 繼承自 Object.protoype
  5. 建構函式有prototype, 例項物件才有__proto__指向原型, 建構函式的原型才有 constructor 指向建構函式
  6. Object函式是Function的一個例項
  7. Object作為物件時繼承自Function.prototype的,又Function.prototype繼承自Object.prototype
  8. Function是自己的建構函式