Javascript中變數範圍和hoist現象

wangdai發表於2014-09-05
JavaScript變數

這個還是自己記一下，在以下這篇文章中也有很好的講解
http://www.kenneth-truyers.net/2013/04/20/javascript-hoisting-explained/

Javascript中沒有block scope，只有函式和全域性兩個範圍。
在函式中部宣告的變數會被隱式的提升(hoist)到函式頭部，比如以下程式碼

function test() {
    alert(a); // undefined, 注意不是ReferenceError
    while (true) {
        var a = 5;
        break;
    }
    alert(a); // 5
}
test();

這裡能兩個都能alert出來沒有錯誤是因為，這段程式碼等同於如下程式碼

function test() {
    var a; // 把函式中所有區域性變數的宣告都提升到頭部
    alert(a);
    while (true) {
        a = 5;
        break;
    }
    alert(a);
}
test();

這裡就要非常小心這種被隱式提升的區域性變數和全域性變數的一些衝突了，比如下面這段程式碼

var bird = 'sparrow';
function test() {
    if (typeof bird === 'undefined') {
        var bird = 'pigeon';
    } 
    alert(bird); // pigeon
}
test();

很奇怪吧為什麼alert出來是pigeon而不是sparrow, 因為區域性變數bird把全域性變數遮蓋了。而在if語句之前，區域性變數bird確實是undefined。
不得不說這很tricky。

順便有個網站能線上執行js，http://jsfiddle.net。
不過一直沒發現有好的js的直譯器和偵錯程式，在瀏覽器里弄略蛋疼。

相關文章