【金秋打卡】第4天let和const在实际开发中的应用

一、课程名称：前端工程师2022版

二、课程章节：ES6基础入门-初识ES6(3-12 let 和 const 的应用-慕课网体系课 (imooc.com))

三、课程讲师：Alex

四、课程内容：

题目：标有0、1、2的三个按钮，随意点击哪一个，在控制台可以输出按钮上的数字

（1）使用var时的做法：使用元素选择器获得按钮后，通过for循环嵌套，绑定addEventListener中的点击事件，输出i，但这同时导致无论点击哪个，输出结果都是3，这是因为函数作用域只有在被调用时才产生，此时并没有函数作用域，var定义的是全局变量，在里层作用域找不到，只能去全局找i，函数结束后i的结果只能是3

  // 1、var的做法

for (var i = 0; i < btns.length; i++) {

        btns[i].addEventListener(

          "click",

          function () {

            console.log(i); //无论点击哪个，输出结果都是3

          },

          false

        );

      }

（2）使用闭包的做法：在for循环中，添加一个IIFE，将for循环中原本的语句放在IIFE中，此时内部含有的作用域主要有最内层的函数作用域（由于未被调用而没有产生，直到点击按钮才会产生）、外层IIFE传入的i的函数作用域（该作用域中存在了传入的变量index，值分别等于0，1，2）、全局作用域（其中i的值为3），而当按钮被点击的时候，内层作用域产生，没有在内层寻找到index的值，就向外层寻找，在外层IIFE传入的i的函数作用域中找到了index值，直接输出，而不再往全局作用域寻找

 //  2、ES6之前，会采用闭包的方法，添加一个IIFE

for (var i = 0; i < btns.length; i++) {

        (function (index) {

          btns[index].addEventListener(

            "click",

            function () {

              console.log(index);

            },

            false

          );

        })(i);

      }

（3）使用let/const的做法：直接将var的语句中两个var改成let就可以了，在这个语句中，全局作用域中没有变量i，在循环的三次中，一共创建了3个块级作用域，等到点击按钮时，就会在各自的块级作用域中创建函数作用域，当执行打印i的语句时，没有在函数作用域中找到，自然会往外层的块级作用域中寻找，可以找到i的值，最后输出i

 //  3、使用let/const的做法

for (let i = 0; i < btns.length; i++) {

        btns[i].addEventListener(

          "click",

          function () {

            console.log(i);

          },

          false

        );

      }

五、课程收获：

今天Alex老师为了讲解let和const在实际开发中的应用，将从前的var做法和闭包的做法重新带我们回顾了一遍，有了前面知识的对比，真正感觉到了let和const的便捷，课后再重复画了一遍老师画的作用域图，知识点更加清晰了，期待后面的课程，加油！