javaScript 變數提升 var let const，以及JS 的解析階段和執行階段

標籤：es6   let   not   bsp   post   關於   test   詳解   log   

我們先來看一道面試題，大家猜想一下，下面這段代碼，列印出來的結果是什麼

var name = ‘World!‘;(function () {    if (typeof name === ‘undefined‘) {        var name = ‘Jack‘;        console.log(‘Goodbye ‘ + name);    } else {        console.log(‘Hello ‘ + name);    }})(); 

這裡列印出來的結果為什麼是 Goodbye Jack， 而不是Hello World呢。

因為JS代碼運行分為兩個階段：解析階段和執行階段

解析階段：找到所有的聲明，包括函式宣告和var聲明，並把聲明操作提升到它所在執行環境的頂部（全域或者函數內），而賦值和邏輯操作則會被留在原地等待代碼執行。

                   並且，當它發現了函數名與函數名或者函數名與變數名衝突的時候，處理原則是：‘處理函式宣告衝突時會覆蓋，處理變數聲明時衝突會忽略’。（後面再詳解）

 

經過解析階段之後，我們的代碼其實被解析成了這樣：

var name = ‘World!‘;(function () {        var name; // 對變數name的聲明會被提升到函數的頂部，並且局部的變數name會覆蓋全域的變數name    if (typeof name === ‘undefined‘) {        name = ‘Jack‘;        console.log(‘Goodbye ‘ + name);    } else {        console.log(‘Hello ‘ + name);    }})(); 

 

執行階段：賦值和邏輯操作就會被放在執行階段。所以當我們在執行階段時，由於name變數的聲明被提升了，在if內判斷typeof name的時候，賦值操作(即name=‘Jack‘)還未執行，所以  typeof name === ‘undefined‘  判斷結果為true，列印出來的結果就是‘GoodBye Jack’。

 

而在ES6中新規範中的 let，const 會不會執行變數提升呢？ 我做了這麼一個小實驗

(function () {    console.log(i); // undefined    var i = ‘test const‘;})();　

(function () {    console.log(i);  // ReferenceError: i is not defined    let i = 0;})();

(function () {    console.log(i); // ReferenceError: i is not defined    const i = ‘test const‘;})();

可以看到 let 和const 聲明的變數是不會被提升的，這也是為什麼一開始的時候我把字型標紅：函式宣告和var聲明會被提升。

 

關於js的解析和執行階段的補充詳解，將在下一篇部落格中講解

javaScript 變數提升 var let const，以及JS 的解析階段和執行階段