問題的提出
首先看一個例子:
- var name = 'laruence';
- function echo() {
- alert(name);
- var name = 'eve';
- alert(name);
- alert(age);
- }
- echo();
運行結果是什麼呢?
上面的問題, 我相信會有很多人會認為是:
- laruence
- eve
- [指令碼出錯]
因為會以為在echo中, 第一次alert的時候, 會取到全域變數name的值, 而第二次值被局部變數name覆蓋, 所以第二次alert是’eve’. 而age屬性沒有定義, 所以指令碼會出錯.
但其實, 運行結果應該是:
- undefined
- eve
- [指令碼出錯]
為什麼呢?
JavaScript的範圍鏈
首先讓讓我們來看看Javasript(簡稱JS, 不完全代表JScript)的範圍的原理: JS權威指南中有一句很精闢的描述: ”JavaScript中的函數運行在它們被定義的範圍裡,而不是它們被執行的範圍裡.”
為了接下來的知識, 你能順利理解, 我再提醒一下, 在JS中:”一切皆是對象, 函數也是”.
在JS中,範圍的概念和其他語言差不多, 在每次調用一個函數的時候 ,就會進入一個函數內的範圍,當從函數返回以後,就返回調用前的範圍.
JS的文法風格和C/C++類似, 但範圍的實現卻和C/C++不同,並非用“堆棧”方式,而是使用列表,具體過程如下(ECMA262中所述):
任何執行內容時刻的範圍, 都是由範圍鏈(scope chain, 後面介紹)來實現.
在一個函數被定義的時候, 會將它定義時刻的scope chain連結到這個函數對象的[[scope]]屬性.
在一個函數對象被調用的時候,會建立一個使用中的物件(也就是一個對象), 然後對於每一個函數的形參,都命名為該使用中的物件的命名屬性, 然後將這個使用中的物件做為此時的範圍鏈(scope chain)最前端, 並將這個函數對象的[[scope]]加入到scope chain中.
看個例子:
- var func = function(lps, rps){
- var name = 'laruence';
- ........
- }
- func();
在執行func的定義語句的時候, 會建立一個這個函數對象的[[scope]]屬性(內部屬性,只有JS引擎可以訪問, 但FireFox的幾個引擎(SpiderMonkey和Rhino)提供了私人屬性__parent__來訪問它), 並將這個[[scope]]屬性, 連結到定義它的範圍鏈上(後面會詳細介紹), 此時因為func定義在全域環境, 所以此時的[[scope]]只是指向全域使用中的物件window active object.
在調用func的時候, 會建立一個使用中的物件(假設為aObj, 由JS引擎先行編譯時刻建立, 後面會介紹),並建立arguments屬性, 然後會給這個對象添加倆個命名屬性aObj.lps, aObj.rps; 對於每一個在這個函數中申明的局部變數和函數定義, 都作為該使用中的物件的同名命名屬性.
然後將調用參數賦值給形參數,對於缺少的調用參數,賦值為undefined。
然後將這個使用中的物件做為scope chain的最前端, 並將func的[[scope]]屬性所指向的,定義func時候的頂級使用中的物件, 加入到scope china.
有了上面的範圍鏈, 在發生標識符解析的時候, 就會逆向查詢當前scope chain列表的每一個使用中的物件的屬性,如果找到同名的就返回。找不到,那就是這個標識符沒有被定義。
注意到, 因為函數對象的[[scope]]屬性是在定義一個函數的時候決定的, 而非調用的時候, 所以如下面的例子:
- var name = 'laruence';
- function echo() {
- alert(name);
- }
- function env() {
- var name = 'eve';
- echo();
- }
- env();
運行結果是:
- laruence
結合上面的知識, 我們來看看下面這個例子:
- function factory() {
- var name = 'laruence';
- var intro = function(){
- alert('I am ' + name);
- }
- return intro;
- }
- function app(para){
- var name = para;
- var func = factory();
- func();
- }
- app('eve');
當調用app的時候, scope chain是由: {window使用中的物件(全域)}->{app的使用中的物件} 組成.
在剛進入app函數體時, app的使用中的物件有一個arguments屬性, 倆個值為undefined的屬性: name和func. 和一個值為’eve’的屬性para;
此時的scope chain如下:
- [[scope chain]] = [
- {
- para : 'eve',
- name : undefined,
- func : undefined,
- arguments : []
- }, {
- window call object
- }
- ]
當調用進入factory的函數體的時候, 此時的factory的scope chain為:
- [[scope chain]] = [
- {
- name : undefined,
- intor : undefined
- }, {
- window call object
- }
- ]
注意到, 此時的範圍鏈中, 並不包含app的使用中的物件.
在定義intro函數的時候, intro函數的[[scope]]為:
- [[scope chain]] = [
- {
- name : 'laruence',
- intor : undefined
- }, {
- window call object
- }
- ]
從factory函數返回以後,在app體內調用intor的時候, 發生了標識符解析, 而此時的sope chain是:
- [[scope chain]] = [
- {
- intro call object
- }, {
- name : 'laruence',
- intor : undefined
- }, {
- window call object
- }
- ]
因為scope chain中,並不包含factory使用中的物件. 所以, name標識符解析的結果應該是factory使用中的物件中的name屬性, 也就是’laruence’.
所以運行結果是:
- I am laruence
現在, 大家對”JavaScript中的函數運行在它們被定義的範圍裡,而不是它們被執行的範圍裡.”這句話, 應該有了個全面的認識了吧?
Javascript的先行編譯
我們都知道,JS是一種指令碼語言, JS的執行過程, 是一種翻譯執行的過程.
那麼JS的執行中, 有沒有類似編譯的過程呢?
首先, 我們來看一個例子:
- <script>
- alert(typeof eve); //function
- function eve() {
- alert('I am Laruence');
- };
- </script>
誒? 在alert的時候, eve不是應該還是未定義的麼? 怎麼eve的類型還是function呢?
恩, 對, 在JS中, 是有先行編譯的過程的, JS在執行每一段JS代碼之前, 都會首先處理var關鍵字和function定義式(函數定義式和函數運算式).
如上文所說, 在調用函數執行之前, 會首先建立一個使用中的物件, 然後搜尋這個函數中的局部變數定義,和函數定義, 將變數名和函數名都做為這個使用中的物件的同名屬性, 對於局部變數定義,變數的值會在真正執行的時候才計算, 此時只是簡單的賦為undefined.
而對於函數的定義,是一個要注意的地方:
- <script>
- alert(typeof eve); //結果:function
- alert(typeof walle); //結果:undefined
- function eve() { //函數定義式
- alert('I am Laruence');
- };
- var walle = function() { //函數運算式
- }
- alert(typeof walle); //結果:function
- </script>
這就是函數定義式和函數運算式的不同, 對於函數定義式, 會將函數定義提前. 而函數運算式, 會在執行過程中才計算.
說到這裡, 順便說一個問題 :
- var name = 'laruence';
- age = 26;
我們都知道不使用var關鍵字定義的變數, 相當於是全域變數, 聯絡到我們剛才的知識:
在對age做標識符解析的時候, 因為是寫操作, 所以當找到到全域的window使用中的物件的時候都沒有找到這個標識符的時候, 會在window使用中的物件的基礎上, 返回一個值為undefined的age屬性.
也就是說, age會被定義在頂級範圍中.
現在, 也許你注意到了我剛才說的: JS在執行每一段JS代碼..
對, 讓我們看看下面的例子:
- <script>
- alert(typeof eve); //結果:undefined
- </script>
- <script>
- function eve() {
- alert('I am Laruence');
- }
- </script>
明白了麼? 也就是JS的先行編譯是以段為處理單元的…
揭開謎底
現在讓我們回到我們的第一個問題:
當echo函數被調用的時候, echo的使用中的物件已經被先行編譯過程建立, 此時echo的使用中的物件為:
- [callObj] = {
- name : undefined
- }
當第一次alert的時候, 發生了標識符解析, 在echo的使用中的物件中找到了name屬性, 所以這個name屬性, 完全的遮擋了全域使用中的物件中的name屬性.
現在你明白了吧?
未找到出處,請知道的人告之。