切换主题
字数
1188 字
阅读时间
5 分钟
let 和 var 是 JavaScript 中用于声明变量的两种关键字，它们之间有一些主要区别：
作用域：
var声明的变量存在函数作用域（function scope），即在声明的函数内部可见。let声明的变量存在块作用域（block scope），即在{}内部可见，例如if语句、for循环、while循环等。
变量提升：
- 使用
var声明的变量会被提升（hoisted），即在执行代码前会被提升到函数或全局作用域的顶部，但初始化的部分不会被提升，如果在声明前使用该变量，其值为undefined。 - 使用
let声明的变量也会被提升，但是在提升的过程中，变量会被初始化为一个特殊的值undefined，这意味着在声明前使用let声明的变量会导致 ReferenceError。
- 使用
重复声明：
- 使用
var可以重复声明同一个变量而不会报错，新的声明会覆盖之前的声明。 - 使用
let声明的变量不允许在同一作用域内重复声明，否则会报错。
- 使用
全局对象属性：
- 使用
var声明的变量会成为全局对象（如浏览器环境下的window对象）的属性，即使在函数内声明也是如此。 - 使用
let声明的变量不会成为全局对象的属性，它们只存在于声明的块作用域内。
- 使用
临时死区：
- 使用
let声明的变量存在临时死区（Temporal Dead Zone，TDZ），即在变量声明之前的任何地方引用该变量都会导致 ReferenceError。这是因为在 TDZ 中，变量已经被声明，但是尚未初始化。 - 使用
var声明的变量不会出现临时死区，因为在变量声明前引用变量会得到undefined。
- 使用
综上所述，主要区别在于作用域、变量提升、重复声明、全局对象属性和临时死区等方面。在现代 JavaScript 开发中，推荐使用 let 和 const 来声明变量，因为它们提供了更好的作用域控制和变量声明行为。
变量提升的细节
- var声明的变量：使用
var声明的变量会被提升到它们所在的函数顶部或全局作用域的顶部。这意味着你可以在声明之前引用变量。在实际执行前，这些变量会被初始化为undefined。 - let和const声明的变量：使用
let和const声明的变量也会被提升，但它们被提升到块的顶部，而不是整个封闭函数或全局作用域。与var不同的是，let和const在声明之前不可访问，这个区域被称为“暂时性死区”（Temporal Dead Zone, TDZ）。 - 函数声明：函数声明也会被提升，这意味着在代码中任何地方都可以调用函数，即使是在函数声明之前。
- 函数表达式：如果使用函数表达式（特别是当函数赋值给使用
var、let或const声明的变量时），只有变量名被提升，而函数定义本身不会提升。
示例
下面的例子展示了 var、let、const 和函数声明的提升：
javascript
复制代码
console.log(x); // 输出 `undefined`，因为变量 x 被提升并初始化为 undefined var x = 5; console.log(x); // 输出 5 console.log(y); // 报错：ReferenceError，因为变量 y 处于暂时性死区 let y = 10; console.log(z); // 报错：ReferenceError，因为变量 z 处于暂时性死区 const z = 15; console.log(myFunction()); // 输出 `Hello, world!`，因为函数声明被提升 function myFunction() { return "Hello, world!"; } console.log(myFuncExpr()); // 报错：TypeError，因为变量 myFuncExpr 被提升但没有初始化 var myFuncExpr = function() { return "Hello from function expression!"; };
变量提升的影响
变量提升可以导致一些不直观的行为，特别是对于初学者。在 var 的情况下，可能会导致意外的 undefined 值，因为开发者可能认为变量已经初始化。对于 let 和 const，虽然不会得到 undefined，但在声明前访问这些变量会导致错误，这有助于避免运行时错误。总的来说，了解变量提升对于编写更可靠、更易于理解的 JavaScript 代码是非常重要的。
4
贡献者
sunchengzhi