JavaScript高階特性 — 作用域

作用域在javascript中分為全域性作用域和區域性作用域，而區域性作用域其實指得就是函式作用域，javascript將函式作為作用域的最小範圍。

全域性作用域 Global Scope

在程式碼的任何地方都可以訪問到的物件，比如window物件及window物件的屬性，就擁有全域性作用域。
1、在最外層定義的變數，預設都是window物件的屬性；
2、未定義的變數預設都是全域性的，預設也都是window物件的屬性； 這一條是經常犯的錯誤,但是新版瀏覽器已經修復了這個問題！
舉例如下：

var firstName = "leo";function changeName() {    var secondName = "jut";
    fullName = "jutleo";    function getName() {        console.log(secondName);
    }
    getName();
}console.log(firstName);console.log(fullName);//報錯// console.log(secondName);//報錯changeName();// getName();//報錯

區域性作用域/函式作用域(Local Scope/Function Scope)

在函式中定義一個變數時，這個變數只對當前函式可見,javascript會搜尋當前函式的作用域，如果沒有找到，則繼續向上層搜尋，直到在全域性作用域也沒有找到會返回undefined；

var version = "version_1";var f1 = function() {    console.log(version);//version_1}
f1();

在f1函式中沒有找到，繼續往上查詢

var version = "version_1";var f2 = function() {    var version = "version_2";    console.log(version);//version_2}
f2();

在f2函式中直接找到

var socpe = "scope_01";var f3 = function() {    console.log(scope); //undefined
    var scope = "scope_02";
}
f3();

這又是為什麼呢？原來javascript在f3函式內搜尋scope變數，並且找到了，這個時候外層的scope就被忽略了，但是執行到console.log(scope)時，scope還沒有被初始化，所以返回undefined

var f4 = function() {    var scope = "scope_02";
    (function(){        var scope = "scope_03";
        (function(){            console.log(scope); //scope_03
        })();
    })();
}
f4();

巢狀也是要遵循同樣的規則的，先在函式內部查詢，沒有找到繼續往上層找！

var x_scope = "leo";var f5 = function() {    console.log(x_scope); //leo}var f6 = function() {    var x_scope = "jut";
    f5();
}
f6();

這又是為什麼呢？原來javascript函式巢狀時，作用域是由巢狀關係決定的，呼叫的順序忽略不記！

說了這麼多，這個作用域如何使用呢？我們從以上例子可以看出，javascript在查詢變數時，順序往上找的這個鏈條就作用域鏈。在實際應用中變數的位置越深，讀寫的速度就越慢，直到找到全域性作用域中。

看例子：

function setLabelBgColor(){    document.getElementById("btn").onclick=function(){        document.getElementById("label").style.backgroundColor="red";
    };
}

根據作用域鏈的查詢邏輯，查詢document變數必須遍歷整個作用域鏈，直到最後在全域性物件中才能找到，這個函式引用了兩次。最佳化如下：

function setLabelBgColor(){    var doc = document;
    doc.getElementById("btn").onclick=function(){
        doc.getElementById("label").style.backgroundColor="red";
    };
}

這個只是個例子，這麼做並不會大幅提升效能哦！但是在實際使用中要避免全域性變數被大量訪問的情況。

(function(exports){    //do some thing ...})(window);

思考一下，為什麼看到的庫、框架都是這麼開始的？