javascript中变量提升以及处理方法

很久没更新文章了，主要是懒，还有学校的作业，所以抽不开时间。

今天我们来说说js中变量提升，for循环作用域在使用过程中遇到的一些问题，并解决。

在我以前的文章中：javascript中的变量提升的简单说明 ，中已经说了变量提升的要点了，所以我这篇不赘述，这篇和此篇有一些关联性，所以我希望各位可以先看完javascript中的变量提升的简单说明在来观看此篇文章，效果会更好。

我们从一个实际的例子开始：

        var list = document.getElementsByTagName('li')
        for (var i = 0; i < 5; i++) {
            list[i].onclick = function () {
                console.log(i);
            }
        }

大家想想点击li之后，控制台会输出什么？是0,1,2,3,4等等吗？

其实只会输出一个数字，那就是5，这是为什么呢?

首先第一个知识点，就是作用域，js的for循环是没有作用域的，跟java,c#这类后端语言不一样，在for中定义的变量，所以i这个变量是在全局上的。

然后第二个知识点，就是变量提升，js把i这个变量提升到作用域的顶端，不赋值。这里听不懂赶紧回去看javascript中的变量提升的简单说明。

最后我们的点击事件肯定是在for循环执行完之后，循环执行完后，i这个变量已经被赋值为5了，所以点击所有li，都只会输出5。

好了，产生的原因已经说清楚了，接下来说怎么解决，目前我处理有两个方法。

1：使用IIFE(立即执行函数)

原因：因为立即执行函数有自己的作用域，把变量传入进去之后，不会担心被外部修改，代码如下：

        var list = document.getElementsByTagName('li')
        for (var i = 0; i < 5; i++) {
            (function (is) {
                list[i].onclick = function () {
                  console.log(is);
                }
            })(i)
        }

 2：使用let来声明变量

使用let来声明变量i,这是es6的新语法，使用let之后，在for中就有自己的作用域，把var换成let即可，代码省略。

好了，今天到处为止。