手记

【金秋打卡】第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的便捷,课后再重复画了一遍老师画的作用域图,知识点更加清晰了,期待后面的课程,加油!


0人推荐
随时随地看视频
慕课网APP