JS中let和var的区别：严格模式、作用域与重复声明详解

本文深入解析JavaScript中let与var定义变量的区别。重点介绍使用let时必须开启严格模式的必要性及解决方法，对比两者在初始值、未声明访问及重复声明时的不同表现，并详细阐述块级作用域与函数作用域的差异，帮助开发者避免常见错误。

JavaScript 严格模式

初次接触 let 关键字时，有一个关键概念需要特别注意，即“JavaScript 严格模式”。若未启用该模式，直接运行包含 let 声明的代码将会导致报错。


let hello = 'hello world.';
console.log(hello);

具体的错误提示信息如下所示：


let hello = 'hello world.';
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
 ...

解决此问题的方法是在文件头部添加“JavaScript 严格模式”的声明语句。


'use strict';
let hello = 'hello world.';
console.log(hello);

let 和 var 关键字的异同

声明后未赋值的表现

当变量声明后未进行赋值时，两者的表现是相同的。


'use strict';
(function() {
 var varTest;
 let letTest;
 console.log(varTest); //输出undefined
 console.log(letTest); //输出undefined
}());

使用未声明变量的差异

然而，在访问尚未声明的变量时，两者的行为存在显著差异：


(function() {
 console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
 console.log(letTest); //直接报错：ReferenceError: letTest is not defined
 var varTest = 'test var OK.';
 let letTest = 'test let OK.';
}());

重复声明变量的不同结果

在尝试重复声明同一个变量时，两者的表现也不相同：


'use strict';
(function() {
 var varTest = 'test var OK.';
 let letTest = 'test let OK.';
 var varTest = 'varTest changed.';
 let letTest = 'letTest changed.'; //直接报错：SyntaxError: Identifier 'letTest' has already been declared
 console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
 console.log(letTest);
}());

变量作用范围的区别

关于变量的作用范围，两者的表现截然不同：


'use strict';
(function() {
 var varTest = 'test var OK.';
 let letTest = 'test let OK.';
 {
 var varTest = 'varTest changed.';
 let letTest = 'letTest changed.';
 }
 console.log(varTest); //输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明
 console.log(letTest); //输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量
}());

总结

上述内容介绍了 JavaScript 中 let 与 var 定义变量的主要区别，希望能对读者有所帮助。如有任何疑问，欢迎留言，小编会及时回复。在此非常感谢大家对本站的支持！

JavaScript中let与var定义变量的核心区别解析