详细分析ES6中let与var变量提升的区别

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_40169665/article/details/83819825

今天在知乎看到一篇讲解let跟var的文章,我认为关于let不会变量提升问题存疑,于是乎想自己写一篇文章结合理论实践给各位更清晰的区别开let跟var的变量提升问题。(观点基于我的实践,如有错还请大佬们指点,纯属探讨)

let跟var 大部分人的第一反应肯定作用域问题,var没有块级作用域,而let拥有块级作用域。这个也是我们最熟悉的一个特性,其实它们对于变量提升的处理也是不一样的。

先导知识:每个function都有自己的作用域

理解:下面结合我在牛客网刷过的一道题来分析变量提升以及作用域问题:

从上至下分析,先从顶级作用域里定义了a跟b,这里考察的点我认为在于function内部的语句:var a=b=3;这里实际可以拆分为:b = 3;var a = b;所以b是一个全局变量。因为变量提升的问题,所以我将整个函数重写一遍让你们更直观的看到实际的函数:

以从上至下alert的分别为: undefined,undefined,3,3,undefined,3

好,作用域大致理解了,下面讲一下老生常谈的变量提升问题了,从作用域的例子里我们已经在函数内部看到了变量提升了,众所周知js变量是会提升的,所以今天看到说let不会变量提升后我就特意去测试了一下,一眼看下去好像没什么错误,他给出的例子大概是:

但是我认为导致出错的原因是let 定义仅仅提升变量,而不会自动赋值undefined

先说在我的观点中为什么先用后let会报错而先用后var不会报错:

var 定义变量提升的同时会直接赋值一个undefined,而let定义变量是单纯的declare,不赋任何值。再往上翻看一眼我给你们写的变量提升的图片里就var的定义同时赋值了undefined。

将上面的题稍微改变一下,换成let会怎么样?这里我将alert改成console.log 在浏览器演示一遍,清晰直观

先说效果:报错

报了一个 a is not defined 的错,为什么会这样呢?同样的我将这段代码改写为提升后的版本:

这里我想表达的意思是,let定义就单纯只是定义,不会自动赋上undefined,只有当js执行到let赋值语句那里才会替变量赋值undefined

如果结论是let变量不会提升的话,原函数是不应该这么早报错的,因为他在当前作用域上找不到a就会顺着作用域链找到最外层的a,那么在函数内的最想打印出的a是已赋值的,所以会打印3才对

所以得出结论:let 定义变量也会提升,但是不会自动赋值一个undefined,而var定义变量的同时会自动赋值undefined。

用代码描述就是

转化为

转化为

猜你喜欢

转载自blog.csdn.net/weixin_40169665/article/details/83819825