什么是闭包？为什么有闭包？什么是块级作用域？为什么ES6要有let const var的区别？javascript,js

《深入浅出Javascript闭包》貌似这篇文章讲的更好，哈哈哈

1.先来看一个例子

    <script>
        window.onload = function(){
            var abtn = document.getElementsByTagName('input');
            
            for(var i=0; i<abtn.length; i++ ){
                abtn[i].onclick = function(){
                    alert(i)
                }
            }
        }
    </script>

    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">

这种情况下执行，点击三个按钮，则都是弹出 “3”。
这和我们预期的不一样，我们的原意只是想让它分别打印不同的 i 的值。

问题：为什么每个按钮就是出现 “3” ？ 而不是我们预期中的 0，1，2 ？


答：在页面加载完成的时候，其实整个js文档已经执行完了。在整个js执行过程中，变量 i 的值的变化过程为：第一次循环 i = 0，第二次循环 i = 1，第三次循环 i = 2， 循环结束后 i = 3。


而又因为 var变量 没有块级作用域（或者说 整个js文档就是 var变量 的块级作用域），那么 最终 js执行结束后，document监听到你点击 abtn按钮 时，就去内存中读取 变量 i 的值（注意：此时i 由于被后来的for循环接下来的计算中，被重复赋值为最新的值）所以，最终 变量 i 的值被赋值为3，即最终我们看到的结果：每个按钮都是弹出3.

2.闭包的解决办法

    <script>
        // 闭包
        window.onload = function(){
            var abtn = document.getElementsByTagName('input');
            
            for(var i=0; i<abtn.length; i++ ){
                (function(i){
                    abtn[i].onclick = function(){
                        alert(i)
                    }
                })(i);
            }
        }
    </script>

    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">

这时候我们只需要加一层这个 (function(i){})(i) ，即可解决这个问题，得到我们想要的结果。
原因：因为 var变量 的作用域只能存在于函数中，没有块级作用域

(function(i){
    alert(i);
    // your code...
})(i);

3.再看 let 的解决方法 (ES6 中的块级作用域)

    <script>
        // ES6 let 方法
        window.onload = function(){
            var abtn = document.getElementsByTagName('input');
            
            for(let i=0; i<abtn.length; i++ ){	// 这里吧var 改为let
                abtn[i].onclick = function(){
                    alert(i)
                }
            }
        }
    </script>

    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">

这里跟第一个例子一样，只是把 var 改为 let, 即可解决问题。
原因： let变量，只在块级作用域能使用，超出块级作用域就是 not defind了

科普：什么是块级作用域？ 答：在 {} 花括号内的就是一块作用域，如下

{
	// 这是在块级作用域内
}

	// 这是在块级作用域外

笔记总结参考：石川 讲解ES6 03-变量-let和const.mp4