哇好久都沒有寫隨筆啦,整個人都慵懶啦。 爲了不讓大家忘記我,把以前寫過的一些慢慢發出來。
在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)
實現思路.
如果覺得圖畫的還可以,其實我原來是學美術的 .
如果有錯,望不吝賜教