011. ES6 语法 - var 和 let 的区别

var 和 let 的区别

因为ES5之前 除了 函数方法 其他的都和是没有 作用域 概念的 下面给你来个例子：

<div>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>

<script>
    var ele = document.getElementsByTagName("button");
    for (var i = 0 ; i < ele.length;i++ ){
        ele[i].addEventListener('click',function (){
            console.log('你点击了第' + i + '个 按钮');
        })
    }
</script>

 

无论你点击那个 控制台都是 点击了 第5个按钮。为什么呢 这就是作用域的问题了。

你尝试换成 let ：

<script>
    var ele = document.getElementsByTagName("button");
    for (let i = 0 ; i < ele.length;i++ ){
        ele[i].addEventListener('click',function (){
            console.log('你点击了第' + i + '个 按钮');
        })
    }
</script>

 

这个错误就完美解决了。

至于为什么 那就是 作用域的问题了。

你想一下 var 的时候 他们是共用一个 i 的，但如果let 的话 他每次执行的 i 和外界没有关系，仅在自己的括号里面的，这就是问题所在！

 

如果你还是不懂 那么： 

    var ele = document.getElementsByTagName("button");
    for ( var i=0 ; i < ele.length;i++ ){
        ele[i].addEventListener('click',function (){
            console.log(i);
            console.log('   你点击了第' + i + '个 按钮');
        })
    }

 

 你就调试下i即可.

多说没用 多实践你就知道 var 他的缺陷了 ，他的作用域是全范围的，可以当做全局作用域了，除了名冲突 不然他的作用域是最Big的.

 

那么就有了什么什么闭包的写法了

闭包写法就是： (定义函数)(执行函数)  就这样...吗，为什么好说的.

    var ele = document.getElementsByTagName("button");
    for ( var i=0 ; i < ele.length;i++ ){
        ( function (i){
            ele[i].addEventListener('click',function (){
                console.log(i);
                console.log('   你点击了第' + i + '个 按钮');
            })
        })(i)
    }