深入理解let,var的区别以及变量提升

let与var

let是ES6新增的变量类型,是用来替代var的设计,与var不同的是:

  1. let使用块级作用域
  2. let不支持在同作用域中声明标识符相同的变量
  3. let用TDZ禁止了声明前访问

我们一条一条说明:

  1. JavaScript的作用域(scope)只有全局和局部,对于var声明的变量,只有函数才能为它创建新的作用域,而let支持块级作用域,花括号就能为它创建新的作用域;
  2. 相同作用域,var可以反复声明相同标识符的变量,而let是不允许的;
  3. let声明的变量禁止在声明前访问,这也是为什么很多人认为let是不支持变量提升的原因,但真的是这样吗?我们来讨论这个问题:

我们先说明一下什么是变量提升(hoisting)

变量提升

先上一个简单的例子:

console.log(a);//undefined

var a = "hey I am now hoisting";

看起来,我们在a被声明前调用a,没有报错,反而是返回一个undefined值,原因是:a其实已经在调用前被声明了,只是没有被初始化。JavaScript会把作用域里的所有变量和函数提到函数的顶部声明,相当于:

var a;
console.log(a);//undefined

a = "hey I am now hoisting";

JavaScript会使用undefined缺省值创建变量a,注意,事实上浏览器并没有把声明语句放到作用域的顶部,在编译阶段,控制流进入域,该域所有的变量和函数的声明先进入内存,文中代码的相对位置不会变动的。

由此可以知道,变量提升指的是变量声明的提升,不会提升变量的初始化和赋值。

对于let来说,情况有点不同:

console.log(a);//Uncaught ReferenceError: a is not defined

let a = "hey I am now hoisting";

这里抛出了一个错误,浏览器认为a并没有声明,这是否意味着let并没有使a变量提升呢?我们再看一个例子

let a = "hey I am outside";
if(true){
    console.log(a);//Uncaught ReferenceError: a is not defined
    let a = "hey I am inside";
}

注意看,这里同样抛出了一个错误,认为a没有声明,但是,如果a没有变量提升,执行到console.log时应该是输出全局作用域中的a,而不是出现错误。

我们可以推知,这里确实出现了变量提升,而我们不能够访问的原因事实上是因为let的死区(temporal dead zone)设计:当前作用域顶部到该变量声明位置中间的部分,都是该let变量的死区,在死区中,禁止访问该变量。由此,我们给出结论,let声明的变量存在变量提升, 但是由于死区我们无法在声明前访问这个变量。

最后要指出的是,函数也是存在提升(hoisting)的,并且,函数的提升不同于变量的提升,函数相当于把自己的声明、赋值整个的放到了当前作用域的顶部。
转载:csdn:https://blog.csdn.net/triumphs/article/details/80142721

hxy

hxy

秦 夏

留下你的评论

快留下你的小秘密吧