关于我对let的块级作用域以及作用的理解

最新推荐文章于 2024-05-30 00:41:17 发布

Carol_liuo

最新推荐文章于 2024-05-30 00:41:17 发布

阅读量457

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Dnlhh/article/details/125191424

本文探讨了JavaScript中let和const变量声明的特性，指出它们并不像var那样存在作用域提升，但在解析阶段会被创建。同时，介绍了ES6引入的块级作用域，对比了ES5之前的函数作用域，并通过实例解释了如何利用块级作用域解决循环中变量共享的问题，如按钮点击事件监听。此外，还讨论了不同方法创建块级作用域，包括使用this.index、立即执行函数以及将var替换为let。

1.有无作用域提升?无作用域提升.

1.1从声明之前就能被访问的角度看

var 会作用域提升可以在第一行访问,结果是undefined---->是一种早期语言设计的缺陷
let/const --->报错:初始化之前不能访问

1.2从被创建的角度看(尽管不能被访问,但是可以被访问)标识符在词法环境被创建时就会被创建出来.

let/const 定义的变量是在被执行之前就随其词法环境被创建出来的.

1.3结论:从作用域提升的定义来看(在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；)=>因此,我认为let、const没有进行作用域提升，但是会在解析阶段被创建出来。

2.let/const的块级作用域

2.1 ES5 之前,只有全局和函数会有块级作用域的

2.2 ES6开始,let/const/function/class 都有自己的块级作用域

function比较特殊,JS引擎对函数做的特殊处理,使得fuction作用域提升可以在外部访问.

2.3作用:动态监听按钮的点击

核心:只要形成块级作用域,就可以保存多个i,而不是最后一个i
保存多个的几种方法
- 方法一:this.index

for(var i = 0; i < btnEls.length; i++) {
      var btnEl = btnEls[i]
      btnEl.index = i
      btnEl.onclick = function() {
        console.log(this.index)
      }
    }

- 方法二:立即执行函数-->形成闭包

for (var i = 0; i < btnEls.length; i++) {
      var btnEl = btnEls[i];
      (function (m) {
        btnEl.onclick = function () {
          debugger
          console.log(`第${m}个按钮`)
        }
      })(i)
    }

- 方法三:将var->改成let形成闭包

for (let i = 0; i < btnEls.length; i++) {
      var btnEl = btnEls[i];
      btnEl.onclick = function () {
        console.log(i)
      }
    }