Html/CSS 作用域

作用域是什么：
有效的范围

1.ES5 中作用域

在ES5中只有函数有作用域，其他没有作用域的概念。所以当在使用的时候需要使用闭包的方式给变量加上作用域，用以防止其他地方对变量的改动从而影响执行效果。

举例说明：

var btns = [XXX];
  for (var i = 0; i < btns.length ; i ++){
      btns[i].addEventListener('click',function(){
        console.log(i);
       })
  }

点击的效果是不管点那个都会是打印最后一个i。 其原因是var 没有作用域的概念，类似于外部变量，每次打印的时候都是临时去取这个变量，这样的话若在使用前被修改则打印就是修改后的值。
可以理解为在 外部 定义了一个var i ;然后每次循环都会i++, 在调用的时候再去找外部i的值。

正确的写法：

var btns = [XXX];
  for (var i = 0; i < btns.length ; i ++){
       （function(i){
          
          btns[i].addEventListener('click',function(){
           console.log(i);
          })；
         }）(i);
  }

可以理解为在 内部 定义了一个var i ， 类似于函数的参数虽然每次循环都会i++, 但是在调用的时候去找的是传入的这个内部的i

2.ES6 中作用域

使用let 可以对if 、 for等执行的时候加上作用域，从而不会由于变量的变化影响{}中变量的使用

举例说明：

const btns = [XXX];
  for (let i = 0; i < btns.length ; i ++){
      btns[i].addEventListener('click',function(){
        console.log(i);
       })
  }

如果用let 去声明，则for里{}则是一个作用域，即使i被改变，i 类似于给函数传的参数，在传过的函数里已经不会再改变了，所以不会被外面的修改影响到