JavaScript Scoping Hoisting解析
Scoping & Hoisting
var a = 1;function foo() { if (!a) { var a = 2; } alert(a);};foo();
上面這段代碼在運行時會產生什麼結果?
儘管對於有經驗的程序員來説這只是小菜一碟,不過我還是順着初學者常見的思路做一番描述:
1.創建了全局變量 a,定義其值為 1
2.創建了函數 foo
3.在 foo 的函數體內,if 語句將不會執行,因為 !a 會將變量 a 轉變成布爾的假值,也就是 false
4.跳過條件分支,alert 變量 a,最終的結果應該是輸出 1
嗯,看起來無懈可擊的推理啊,但讓人驚訝的是:答案竟然是 2!為什麼?
彆着急,我會解釋給你聽。首先我要告訴你這不是什麼錯誤,而是 JavaScript 語言解釋器的一個(非官方的)特性,某人(Ben Cherry)把這個特性叫做:Hoisting(目前尚未有標準的翻譯,比較常見的是提升)。
聲明與定義
為了理解 Hoisting,我們先來看一個簡單的情況:
var a = 1;
你是否想過,上面這句代碼在運行的時候到底發生了什麼?
你是否知道,就這句代碼而言,“聲明變量 a” 和 “定義變量 a”這兩個説法哪一個才是正確的?
下例叫做 “聲明變量”:
var a;
下例叫做 “定義變量”:
var a = 1;
聲明:是指你聲稱某樣東西的存在,比如一個變量或一個函數;但你沒有説明這樣東西到底是什麼,僅僅是告訴解釋器這樣東西存在而已;
定義:是指你指明瞭某樣東西的具體實現,比如一個變量的'值是多少,一個函數的函數體是什麼,確切的表達了這樣東西的意義。
總結一下:
var a; // 這是聲明
a = 1; // 這是定義(賦值)
var a = 1; // 合二為一:聲明變量的存在並賦值給它
重點來了:當你以為你只做了一件事情的時候(var a = 1),實際上解釋器把這件事情分解成了兩個步驟,一個是聲明(var a),另一個是定義(a = 1)。
這和 Hoisting 有何關係?
回到最開始的那個令人困惑的例子,我告訴你解釋器是如何分析你的代碼的:
var a;a = 1;function foo() { var a; // 關鍵在這裏 if (!a) { a = 2; } alert(a); // 此時的 a 並非函數體外的那個全局變量}
如代碼所示,在進入函數體後解釋器聲明瞭新的變量 a,而無論 if 語句的條件如何,都將為新的變量 a 賦值為 2。你若不相信可以在函數體外面 alert(a),然後再執行 foo() 對比一下結果就知道了。
Scoping(作用域)
有人可能會問了:“為什麼不是在 if 語句內聲明變量 a?”
因為 JavaScript 沒有塊級作用域(Block Scoping),只有函數作用域(Function Scoping),所以説不是看見一對花括號 {} 就代表產生了新的作用域,和 C 不一樣!
當解析器讀到 if 語句的時候,它發現此處有一個變量聲明和賦值,於是解析器會將其聲明提升至當前作用域的頂部(這是默認行為,並且無法更改),這個行為就叫做 Hoisting。
OK,大家都懂了,你懂了嗎……
懂了不代表就會用了,就拿最開始的例子來説,如果我就是想要 alert(a) 出那個 1 可咋整呢?
創建新的作用域
alert(a) 在執行的時候,會去尋找變量 a 的位置,它從當前作用域開始向上(或者説向外)一直查找到頂層作用域為止,若是找不到就報 undefined。
因為在 alert(a) 的同級作用域裏,我們再次聲明瞭本地變量 a,所以它報 2;所以我們可以把本地變量 a 的聲明向下(或者説向內)移動,這樣 alert(a) 就找不到它了。
記住:JavaScript 只有函數作用域!
var a = 1;function foo() { if (!a) { (function() { // 這是上一篇説到過的 IIFE,它會創建一個新的函數作用域 var a = 2; // 並且該作用域在 foo() 的內部,所以 alert 訪問不到 }()); // 不過這個作用域可以訪問上層作用域哦,這就叫:“閉包” }; alert(a);};foo();
你或許在無數的 JavaScript 書籍和文章裏讀到過:“請始終保持作用域內所有變量的聲明放置在作用域的頂部”,現在你應該明白為什麼有此一説了吧?因為這樣可以避免 Hoisting 特性給你帶來的困擾(我不是很情願這麼説,因為 Hoisting 本身並沒有什麼錯),也可以很明確的告訴所有閲讀代碼的人(包括你自己)在當前作用域內有哪些變量可以訪問。但是,變量聲明的提升並非 Hoisting 的全部。在 JavaScript 中,有四種方式可以讓命名進入到作用域中(按優先級):
1.語言定義的命名:比如 this 或者 arguments,它們在所有作用域內都有效且優先級最高,所以在任何地方你都不能把變量命名為 this 之類的,這樣是沒有意義的
2.形式參數:函數定義時聲明的形式參數會作為變量被 hoisting 至該函數的作用域內。所以形式參數是本地的,不是外部的或者全局的。當然你可以在執行函數的時候把外部變量傳進來,但是傳進來之後就是本地的了
3.函數聲明:函數體內部還可以聲明函數,不過它們也都是本地的了
4.變量聲明:這個優先級其實還是最低的,不過它們也都是最常用的
另外,還記得之前我們討論過 聲明 和 定義 的區別吧?當時我並沒有説為什麼要理解這個區別,不過現在是時候了,記住:
Hosting 只提升了命名,沒有提升定義
這一點和我們接下來要講到的東西息息相關,請看:
函數聲明與函數表達式的差別
先看兩個例子:
function test() { foo(); function foo() { alert("我是會出現的啦……"); }}test();
function test() { foo(); var foo = function() { alert("我不會出現的哦……"); }}test();
同學,在瞭解了 Scoping & Hoisting 之後,你知道怎麼解釋這一切了吧?
在第一個例子裏,函數 foo 是一個聲明,既然是聲明就會被提升(我特意包裹了一個外層作用域,因為全局作用域需要你的想象,不是那麼直觀,但是道理是一樣的),所以在執行 foo() 之前,作用域就知道函數 foo 的存在了。這叫做函數聲明(Function Declaration),函數聲明會連通命名和函數體一起被提升至作用域頂部。
然而在第二個例子裏,被提升的僅僅是變量名 foo,至於它的定義依然停留在原處。因此在執行 foo() 之前,作用域只知道 foo 的命名,不知道它到底是什麼,所以執行會報錯(通常會是:undefined is not a function)。這叫做函數表達式(Function Expression),函數表達式只有命名會被提升,定義的函數體則不會。
尾記:Ben Cherry 的原文解釋的更加詳細,只不過是英文而已。我這篇是借花獻佛,主要是更淺顯的解釋給初學者聽,若要看更多的示例,請移步原作,謝謝。
-
php程序員的簡歷模板
日子如同白駒過隙,新一輪的招聘又在朝我們招手,這時一份好的簡歷可以起到很好的.作用哦。那麼如何寫簡歷才簡練、明確呢?以下是小編收集整理的php程序員的簡歷模板,希望能夠幫助到大家。基本簡歷姓名:黃先生國籍:中國現在所在地:廣州民族:漢族户口所在地:潮州身材:170cm...
-
針對dom元素的分析應用
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裏寫入DOM元素。今天這章我們就講這兩個應用(一)對html裏現有的DOM元素進行操作。我上面説了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣...
-
SQL語句類型的標準模式
1、查詢語句:主要是由select關鍵字完成2、事務控制語句:主要由commit、rollback和savepoint三個關鍵字完成3、DML(數據操作語言)語句:主要由、update和三個關鍵字完成4、DDL(數據定義語言)語句:主要由create、alter、drop和truncate四個關鍵字完成5、DCL(數據控制...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
相關文章
- 我的英語演講稿living at present is my top concern
- Time To Stop Worrying About Invasive Species美文欣賞
- 英語閲讀:VIT declines to acquire Ang Mo Kio property
- JavaScript如何實現JSON.stringify
- javascript中toString()的用法
- 淺析javascript中function 的length屬性
- 高中英語作文:My approach to difficulties in learning
- Why Public Speaking Is So Important 公共演説的重要性大學英語
- Unit six Opening and Closing Ceremonies口譯材料
- Passage Eighteen (Strictly Ban smoking)英語閲讀理解