JS 面向物件之原型鏈
阿新 • • 發佈:2018-11-09
物件的原型鏈
- 只要是物件就有原型
- 原型也是物件
- 只要是物件就有原型, 並且原型也是物件, 因此只要定義了一個物件, 那麼就可以找到他的原型, 如此反覆, 就可以構成一個物件的序列, 這個結構就被成為原型鏈
- 原型鏈到哪裡是一個頭?
- 一個預設的原型鏈結構是什麼樣子的?(當前物件->建構函式.prototype->Object.prototype->null)
- 原型鏈結構對已知語法結構有什麼修正?
原型鏈的結構
- 原型鏈繼承就是利用就是修改原型鏈結構( 增加、刪除、修改節點中的成員 ), 從而讓例項物件可以使用整個原型鏈中的所有成員( 屬性和方法 )
- 使用原型鏈繼承必須滿足屬性搜尋原則
屬性搜尋原則
- 所謂的屬性搜尋原則, 就是物件在訪問屬性與方法的時候, 首先在當前物件中查詢
- 如果當前物件中儲存在屬性或方法, 停止查詢, 直接使用該屬性與方法
- 如果物件沒有改成員, 那麼再其原型物件中查詢
- 如果原型物件含有該成員, 那麼停止查詢, 直接使用
- 如果原型還沒有, 就到原型的原型中查詢
- 如此往復, 直到直到 Object.prototype 還沒有, 那麼就返回 undefind.
- 如果是呼叫方法就包錯, 該 xxxx 不是一個函式
屬性搜尋原則
在實現繼承的時候,有時會利用替換原型鏈結構的方式實現原型繼承,那麼原型鏈結構就會發生改變
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( ' . ’)'
注意:在底層理論執行的過程中,是否有呼叫建構函式,不一定,和瀏覽器的版本有關
原型鏈結構圖
建構函式 物件原型鏈結構圖
function Person (){}; var p = new Person();
{} 物件原型鏈結構圖
[] 陣列原型鏈結構圖
Object.prototype
對應的建構函式- div 對應的建構函式
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() 得到一個 函式物件
- 函式有
__proto__
屬性 - 函式的建構函式是 Function
- 函式應該繼承自
Function.prototype
Fucntion.prototype
繼承自Object.protoype
- 建構函式有prototype, 例項物件才有__proto__指向原型, 建構函式的原型才有 constructor 指向建構函式
- Object函式是Function的一個例項
- Object作為物件時繼承自Function.prototype的,又Function.prototype繼承自Object.prototype
- Function是自己的建構函式