经过分析这段代码的进化历程，或许可以加深您对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/