經過分析這段代碼的進化歷程，或許可以加深您對JavaScript的做用域的理解

前言

這裏咱們不討論做用域鏈的問題，這些問題您能夠看下我以前寫的東西，經過這一段代碼，讓咱們從新認識JavaScript。
這回咱們主要來分享一下，JavaScript中做用域的建立方式。

代碼

經過理解代碼來記住知識點是最快的，面試官問道相似的問題的時候，舉個代碼的例子就你們都懂了，賽過任何含糊的概念描述，因此咱們來看一下這個代碼的例子吧。

rank-01

請思考輸出結果，for循環的{}能建立一個做用域嗎？

for (var i = 0; i < 2; i++) {
    console.log("in for:"+i);
}
console.log("out for:"+i);

rank-02

請思考代碼運行結果，function應該能建立做用域吧？

function forscope(){
    for (var i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
};
forscope();
console.log("out for:"+i);

rank-03

爲何這樣寫會更好呢？

(function(){
    for (var i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
})();
console.log("out for:"+i);

rank-04-a

老外說，這樣子寫纔是最佳實踐，您看出來門道了嗎？

(function forscope(){
    for (var i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
})();
console.log("out for:"+i);

rank-04-b

這樣寫太鬼了吧？

try{
    undefined();
}catch(i){
    for (i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
}
console.log("out for:"+i);

rank-es6-01

如今能體會到es6中let存在的意義了吧？

for (let i = 0; i < 2; i++) {
    console.log("in for:"+i);
}
console.log("out for:"+i);

rank-es6-02

聽說這纔是最佳實踐！

{
    let i;
    for (i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
}
console.log("out for:"+i);

總結

1. function，try catch都可以建立做用域，可使用它們來更好地保護代碼細節，通常仍是用function，try catch通常是代碼轉換器會用的。

2. 當即執行函數(function(){...})();是個不錯的選擇，但具名的當即執行函數可讓代碼自己更具備可讀性，是個最佳實踐(function forscope(){...})();。

3. es6中let能夠隱式地和最近的{}一塊兒建立一個做用域，但顯示地建立可以方便以後代碼塊的移動，是個最佳實踐。

其餘

參考書

1. 《你不知道的JavaScript（上卷）》第一部分，亞馬遜電子書9.9元，強力推薦

網站

1. 在線es6編輯器，https://babeljs.io/repl/