var和let区别以及块级作用域

在ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须使用function函数的作用域来解决应用外面变量的问题,(因为function作用域中他只管传进去的参数在自己地盘的变化,此参数在之前的行为不归他)
你可能看不懂,那么举例说明

	var name = "coco";
    function changeName()
    {
      name = "lili";
       console.log(name);
     }
    console.log(name);//coco
  	changeName();//lili
//此处可看到function内部的变化不影响外部
 var btn = document.getElementsByTagName("button");
     for(var i=0;i;i++){
       btn[i].addEventListener("click",function(){
         console.log("第"+i+"个按钮被点击了");
       })}
    //不管点击哪个按钮,输出的都是  第5个按钮被点击了
      //在点击按钮之前,循环已经完成了,然后i一直被改变,所以最终拿到的就是4
      //这个情况可以使用闭包解决,但是过于麻烦,,,,为了解决,出现了更完美的let,
      //在写代码时更建议经常使用let,在块级作用域中起作用

在let没出现前,解决这种问题的办法(闭包)

var btn = document.getElementsByTagName("button");
    for(var i=0;i;i++){
      (function(i){
        btn[i].addEventListener("click",function(){
        console.log("第"+i+"个按钮被点击了");
      })
      })(i)
     }
     输出正常,点击哪个就输出哪个被点击

ES6中,加入了let,let他是有if和for的块级作用域!!!

 const btns = document.getElementsByTagName("button");
      for(let i=0;i;i++){
        btns[i].addEventListener("click",function(){
          console.log("第"+i+"个按钮被点击");
          
        })
      }
        输出正常,点击哪个就输出哪个被点击

你可能感兴趣的:(var和let区别以及块级作用域)