JS的作用域以及全局变量的问题

一、js的作用域

1、全局变量：函数外声明的变量，称为全部变量
局部变量：函数内部使用var声明的变量，称为局部变量
在JS中，只有函数作用域，没有块级作用域！！！也就是说，if/for等有{}的结构体，并不能具备自己的作用域。
所以，函数外部不能访问函数内部局部变量（私有属性）。因为，函数内部的变量，在函数执行完毕以后，就会被释放掉。

            if (true) {
                var x = 'hello'
            }
            for (var i = 0; i < 10; i++) {

            }
            console.log(i)//10
            console.log(x)//hello
            function test () {
                var test2 = 'word'
            }
            test()
            //console.log(test2)//test2 is not defined

2、使用闭包，可以访问函数的私有变量
JS中，提供了一种“闭包”的概念：在函数内部，定义一个子函数，子函数可以访问父函数的私有便利。可以在子函数中进行操作，最后将子函数通过return返回

           function func () {
                let num = 123
                function func2 () {
                    return num
                }
                return func2
            }
            let num1 = func()()
            console.log(num1)//123

3、闭包的作用：
①可以在函数外部访问函数的私有变量
②让函数内部的变量可以始终存在于内存中，不会再函数调用完成后立即释放。

二、全局变量的问题

var lis = document.getElementsByTagName("li");//长度为5
for(var i=0; i<lis.length;i++){
  lis[i].onclick = function(){
    alert(i);//全部是5
  }
}

产生问题的原因：
代码从上自下，执行完毕后，li的onclick还没有触发，for循环已经转完！
而for循环没有自己的作用域！所以循环5次，用的是同一个全局变量i！也就是在for循环转完后，这个全局变量已经变成了5，那么点第几个都会是5

解决方案：
1.闭包
函数具有自己的作用域，在for循环转一次，创建一个自执行函数。在自执行函数中，都有自己独立的i，而不会被释放掉。所以for循环转完以后，创建的5个自执行函数的作用域中，分别储存了5个不同的i变量。

                  var lis = document.getElementsByTagName("li")
            for(var i=0; i< lis.length; i++){
                (function (i) {
                    lis[i].onclick = function () {
                        console.log(i)
                    }
                })(i)
            }

2.let声明循环变量
let具有自己的块级作用域，所以for循环转一次，创建一个块级作用域，思路与闭包相同

          var lis = document.getElementsByTagName("li")
            for(let i=0; i< lis.length; i++){
                lis[i].onclick = function () {
                    console.log(i)
                }
            }

3.添加index属性通过this获取
出错的原则在于全局变量i在多次循环后被污染。那么在点击事件中，就可以不使用i变量，通过添加的index属性来获下标。

                    var lis = document.getElementsByTagName("li")
            for(var i=0; i< lis.length; i++){
                lis[i].index = i
                lis[i].onclick = function () {
                    console.log(this.index)
                }
            }