在本文中,苏南大叔介绍javascript的最基本概念的let。多数情况下,它和var基本上是一致的。本文的let的测试代码,都是源自var的相似代码的替换表述,本文的姊妹文章链接地址见文末。

苏南大叔:JavaScript,js中的let作用域是如何生效的? - js-let
JavaScript,js中的let作用域是如何生效的? (图8-1)

本文测试环境:win10chrome@89.0.4389.90。你真的了解了let的使用方法了么?letvar的使用区别,你看出来了吗?

let定义之前不能使用变量

无论是否是严格模式,在let定义之前,都不能使用未定义的变量名,否则会得到下面的报错信息。

Uncaught ReferenceError: Cannot access 'a' before initialization

苏南大叔:JavaScript,js中的let作用域是如何生效的? - let-error-no-strict
JavaScript,js中的let作用域是如何生效的? (图8-2)

所以,在使用let定义变量之前,决定不能出现未使用关键词的同名变量。这也是本文中一个需要了解的重要前提,因为这个显示,对相关测试代码都做了修正。

苏南大叔:JavaScript,js中的let作用域是如何生效的? - let-error-1
JavaScript,js中的let作用域是如何生效的? (图8-3)

严格模式下,也不能出现不使用关键词的变量定义。但是,两者的报错信息是不一样的。

苏南大叔:JavaScript,js中的let作用域是如何生效的? - let-error-2
JavaScript,js中的let作用域是如何生效的? (图8-4)

苏南大叔:JavaScript,js中的let作用域是如何生效的? - let-error-3
JavaScript,js中的let作用域是如何生效的? (图8-5)

作用域范围有限

let的作用域有限,不会提升到{}作用域之外。下面是对应的代码及运行结果截图。

"use strict";
let a="苏南大叔";
{
    //console.log("1",a);
    let a="苏南大叔加油";
    console.log("2",a);
}
console.log("3",a);

苏南大叔:JavaScript,js中的let作用域是如何生效的? - let-code-1
JavaScript,js中的let作用域是如何生效的? (图8-6)

"use strict";
let a="苏南大叔";
(function(){
    //console.log(a);
    let a="苏南大叔加油呀";
    console.log(a);
})();
console.log(a);

苏南大叔:JavaScript,js中的let作用域是如何生效的? - let-code-2
JavaScript,js中的let作用域是如何生效的? (图8-7)

当然,定义在顶端的let就是全局的作用域了。如果{}没有出现再次定义的let的话,那么就改变的是全局。请看下面的代码及运行结果。

"use strict";
let a="苏南大叔";
(function(){
    //console.log(a);
    a="苏南大叔加油呀";
    console.log(a);
})();
console.log(a);

苏南大叔:JavaScript,js中的let作用域是如何生效的? - let-code-3
JavaScript,js中的let作用域是如何生效的? (图8-8)

相关链接

总结

本文中的let的用法,和var是有所区别的,你细品一下。更多js基本知识,可以参见苏南大叔的更多文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

本站的忠实读者小伙伴,正在阅读下面这些文章: