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