Javascript原型鏈和原型繼承
哇好久都沒有寫隨筆啦,整個人都慵懶啦。
為了不讓大家忘記我，把以前寫過的一些慢慢發出來。
在JS 中, 有兩條鏈子,作用域鏈 和 原型鏈.
作用域鏈相對容易理解,兩點
- 函數限定變量作用域,就是說，在JavaScript中，在函數里面定義的變量，可以在函數里面被訪問，但是在函數外無法訪問
- 在JavaScript中使用變量，JavaScript解釋器首先在當前作用域中搜索是否有該變量的定義，如果有，就是用這個變量；如果沒有就到父域中尋找該變量. 由于變量提升,因此在實際開發的時候，推薦將變量都寫在開始的地方，也就是在函數的開頭將變量就定義好.
好了,開始看看原型鏈吧 .
原型鏈
在我之前的一些隨筆, JavaScript使用構造函數獲取變量的類型名 涉及了一些關于 Javascript 原型的東西,這里關于原型就不啰嗦了 .
在 Javascript 中, 每一個對象 o 都具有 __proto__ 屬性(這個屬性在IE9 以下沒有暴露出來),被稱為原型 ,根據 屬性搜索原則 對象 o 可以通過 . 或者 [] 讀取原型的屬性,但是當寫入時,不會在原型上修改屬性,而是直接在對象 o 上添加.
當然,原型也是對象,原型也有 __proto__ 屬性, 子子孫孫無窮盡也 ~~~
真的是無窮盡嗎,當然不是 !
var obj = {a: 'pawn'};
上面通過對象字面值的方式申明了一個對象 obj ,并且擁有屬性 a .
由于 o.__proto__ === Object.prototype ,那么可以認為這種方式等價于
var obj = new Object({a: 10});
所以,o 是繼承自 Object.prototype ,但 Object.prototype 也是對象,它繼承自什么呢?
好吧,它繼承自 null , 萬劍歸宗。
好了,現在找到了原型鏈的第一條子鏈
我們在來看 function
var func = function() {}
通過字面值聲明一個 function
同理
func 繼承自 Function.prototype ,那 Function.prototype 也是對象,它繼承自什么呢?
可以看到, Function.prototype 繼承自 Object.prototype ,這也就回到了上一條鏈子.
好了,那現在引入一個問題, Function 本身也是函數,那 Function 繼承自哪呢? 當然是 Function.prototype ,所以JS中最亂倫的東西出現了, Function 是自己的老子,即
那 Object 也是函數, Object 也當然繼承自 Function.prototype .
好了,這就是所有原型鏈的東西
看起來好像很亂,盜 JK老師 一張圖, 詳細說明這個問題
現在做一個總結
- 所有的函數都繼承自 Function.prototype , Function , Object 是函數,所以繼承自 Function.prototype
- 所有的對象都直接或間接繼承自 Object.prototype , Function.prototype.__proto__ === Object.prototype 函數也是對象,所以函數最終繼承自 Object.prototype .
- Object.prototype 繼承自 null,萬劍歸宗
原型繼承
看完了原型鏈,再看原型繼承就簡單了
var ProtoHerite = function(source) {
var o = {};
if(o.__proto__){
o.__proto__ = source;
return o;
}
var F = function() {};
F.prototype = source;
return new F();
}
這個函數返回的對象原型繼承自 source ,這也是 Object.create(source) 實現思路.
如果覺得圖畫的還可以,其實我原來是學美術的 .
如果有錯,望不吝賜教
來自：http://www.cnblogs.com/likeFlyingFish/p/6505324.html