let关键字:加强版的var关键字

你好,今天大叔想和你唠扯唠扯 ES6 新增的关键字 —— let。再说 let 的具体用法之前,大叔想先和你说说大叔自己对 let 的感受 —— let 其实就是加强版的 var。为啥这么说呢?别急,且听大叔慢慢道来。

首先,let 和 var 的作用是一样一样滴,都是用来声明变量。看到这儿,你可能会有个问题啦,既然作用一样,为啥还要再搞个什么新特性出来?

想要回答这个问题,就要说到 let 和 var 的不同之处了。比方说 var 声明的全局变量会自动添加到顶级对象中作为属性,而 let 就不会。再比方说 var 允许声明提升或者重复声明,而 let 就不允许这样做。当然了,它们之间的不同可不止这些,大叔也只是举个栗子而已。

如果你没了解过 ES6 的内容,看到这儿可能有点懵。没关系啊~ 别往心里去,因为接下来大叔就是要和你唠扯唠扯 let 的具体用法。

声明的全局变量不是顶级对象的属性

在整明白 let 和 var 第一点不同之前,大叔要先和你唠扯唠扯 var 这个关键字的一些用法。为啥?!var 你要是都整不明白的话,你还想整明白 let,那就是一个美丽的扯!

首先,咱们都知道其实声明一个全局变量,是既可以使用 var 进行声明,也可以不使用 var 进行声明的。比方说像下面这段代码一样:

var a = 'a' console.log(a) b = 'b' console.log(b)

上面这段代码不用大叔多扯,想必你也知道打印的结果是个啥 —— 打印 a 和 b 嘛。别急,这才是个开始,咱不点慢慢来不是~

接下来呢,大叔要用 delete 这个运算符来做个骚操作了 —— 先用 delete 删除上面的两个变量 a 和 b,然后呢再分别打印这两个变量的值。

你寻思一下这个时候应该打印的结果是啥呢?对啦!变量 a 的值会正常输出 a,但变量 b 会报错 b is not defined。那为啥又是这样一个结果呐?

大叔觉得你应该知道 delete 运算符的作用是用来删除对象的属性,但是 delete 是无法删除变量的。对啦!你想的没错,这就说明上面声明的 a 是变量但不是对象的属性,而是 b 是对象的属性但不是变量。

大叔这话说的有点绕,给你带入一个场景吧。比如上面这段代码是在一个 HTML 页面中定义的 JavaScript 代码,那 a 就是一个全局变量,b 就是向 window 对象添加了一个属性。所以,delete 运算符可以删除 b,但不能删除 a 的原因了。

那也就是说使用 var 关键字声明的是变量,不使用 var 关键字声明的是 window 对象的属性呗。话唠叨这儿,大叔还得来个骚操作。咱再看一段代码:

var a = 'a' console.log(window.a) var b = 'b' console.log(window.b)

这段代码如果按照上面的结论,打印的结果就应该是 undefined 和 b。但是~ 你真实运行一下这段代码,就应该知道实际上打印的结果是 a 和 b!

这咋和上面的结论不一样呢?!是不是又有点懵?哈哈~ 别先急着懵逼,这个问题实际上是 JavaScript 的作者 Brendan Eich 当年在设计 JavaScript 这门语言时的一个小失误:在全局作用域中声明的变量同时会被作为属性添加到顶级对象中。

let关键字:加强版的var关键字

可能唠扯到这儿,你会满屏的吐槽弹幕:这尼玛谁不知道?!但大叔真正想和你唠扯的就是这一点,这个小小的失误,就导致了使用 var 关键字声明的全局变量会污染全局对象的问题

而 ES6 新增的 let 就很好滴弥补了这个问题!也就是说,使用 let 关键字声明的全局变量不会污染全局对象。不信咱可以来试试嘛~ 还是刚才那个场景,在一个 HTML 页面中定义 JavaScript 代码,仅仅把 var 改成 let:

let a = 'a' console.log(a) console.log(window.a)

这段代码实际的运行结果就是 a 和 undefined。事实证明 let 有效滴解决了 var 的问题,所以你知道为啥 ES6 要新增一个关键字来完成和 var 一样的事儿了吧?!

不允许重复声明

但是,但可是,可但是~ let 就这么一点点和 var 的区别吗?答案肯定不是滴。咱们还是先来唠扯唠扯 var 关键字,使用 var 声明的变量是允许反复滴重复声明的,就像下面这段代码:

var a = 'a' var a = 'aa' console.log(a)

这段代码最终打印的结果是 aa,原因就在于 var 声明的变量是允许重复声明的。可能这会儿你又会问了,这我也知道啊,有啥子问题吗?

问题肯定是有滴,要是没有大叔花这么多口舌和你在这儿叨逼叨干啥啊~ 大叔还是给你带入一个场景,比方说你定义了一个 JS 文件是需要被其他小伙伴导入使用滴,那你在这个文件里面声明的变量在人家那分分钟被重新声明了,你内心是个啥感受?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdgws.html