ES6作用域（let,给按钮循环添加点击事件问题）

最新推荐文章于 2024-01-05 02:24:22 发布

远方有只兔子~

最新推荐文章于 2024-01-05 02:24:22 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_43812504/article/details/114645244

javaScript 专栏收录该内容

14 篇文章

订阅专栏

探讨ES5中变量作用域的问题及解决方案，并介绍ES6引入let关键字以创建块级作用域，解决循环和条件语句中的变量污染问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES5之前存在的问题：因为if和for都没有块级作用域的概念，所以很多时候都必须借助函数的作用域来解决使用外面变量的问题。

    // 1.变量作用域：变量在什么范围内可用,但是使用var时没有作用域，上述都能够打印出why
    {
      var name = 'why';
      console.log(name);
    }
    console.log(name);


```javascript
    //2没有块级作用域引起的问题：if的块级
    var fun;
    if(true){
      var name='lee';
      fun = function(){
        console.log(name);
      }
      fun();//打印出lee
    }
   //假如在外面使用fun(),本意想输出if中的name,
   //但是name在外面可以任意改变
    name='修改lee';
    fun();//修改lee

    //3没有块级作用域引起的问题：for没作用域,经典按钮问题
    var btns = document.getElementsByTagName('button');
    for(var i = 0;i<btns.length;i++){
      btns[i].addEventListener('click',function(){
        console.log(i);
      })
    }
    // 不管点击什么按钮都是5
    // i循环结束后变成五，又由于for没有块级作用域问题，不会将每次的i保存在作用域中，最后点击的时候，i就从外面获取i的值，而此时i已经变为5了，在真正使用i之前，i发生了改变。与上述if的例子相同，i值可以在下次循环的时候发生改变，而不会保持原来在一个for循环中的值。

以前解决办法：写闭包，因为函数具有作用域：

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

在这里插入图片描述
相当于：

    function(i){//i=0
      btns[i].addEventListener('click', function () {
        console.log(i);
      })
    }
    function(i){//i=1
      btns[i].addEventListener('click', function () {
        console.log(i);
      })
    }

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

    var btns = document.getElementsByTagName('button');
    //将var i = 0 改为 let i = 0 就可以实现功能
    for(let i = 0;i<btns.length;i++){
      btns[i].addEventListener('click',function(){
        console.log(i);
      })
    }

由于let具有块级作用域,相当于（都有自己独立的作用域）：

    {i=0
      btns[i].addEventListener('click', function () {
        console.log(i);
      })
    }
    {i=1
      btns[i].addEventListener('click', function () {
        console.log(i);
      })
    }