ECMAScript中var let const常见问题及区别详解

理解三种声明方式的基础

ECMAScript提供了三种声明变量的关键字：var、let和const。其中，var在所有版本中均可使用，而let和const需依赖ECMAScript 6（ES6）及以上环境。let和const的行为高度相似，核心区别在于：const必须在声明时进行初始化，且后续不可修改其绑定值；若尝试重新赋值，将引发运行错误。因此，常规定义不可变数据时使用const。

作用域差异

作用域是区分这三者最显著的特征：var拥有函数作用域，而let和const具备块级作用域。这意味着由var声明的变量会穿透至函数末尾销毁，而let/const声明的变量仅在最近的代码块（如花括号{}）内部生效。

这一差异在处理循环结构时尤为明显，特别是在涉及异步回调的场景中：

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, 0);
}
// 输出结果：5 5 5 5 5

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, 0);
}
// 输出结果：0 1 2 3 4

产生上述现象的原因在于：var声明的变量不受循环块限制，循环结束后迭代变量保留导致退出的最终值。而let会在每次迭代中创建一个新的词法环境实例，每个setTimeout引用的都是该轮迭代对应的独立变量。

变量提升与暂时性死区

变量提升（Hoisting）是指变量声明会被提升至作用域顶部。对于var而言，这种机制使得声明之前的访问虽不报错但值为undefined。而let虽然也会在解析阶段被登记，但在进入其作用域的初始化之前，无法访问该变量。这一未被初始化的区间被称为“暂时性死区”（TDZ）。

// var: 提升并初始化为 undefined
console.log(name); // undefined
var name = "Matt";

// let: 存在暂时性死区，抛出ReferenceError
console.log(nameName); // ReferenceError: name is not defined
let name = "Matt";

全局环境下的表现

在全局脚本环境中，var声明的变量会成为全局对象（如浏览器中的window）的属性，而let和const不会：

var globalVar = "exposed";
let globalLet = "hidden";

console.log(window.globalVar); // "exposed"
console.log(window.globalLet); // undefined

补充规则

除了上述差异，还需注意以下两点：

• 在代码块内使用let或const即自动激活块级作用域限制。
• 函数声明的提升优先级高于var的变量提升，为避免歧义，不建议让变量与函数同名。

以上就是ECMAScript中var let const常见问题及区别详解的详细内容，更多关于JavaScript变量声明规范的资料请关注本站其它相关文章！