JS中let和var的区别_jslet和var的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62599305/article/details/145799584

`let` 和 `var` 的区别

1. 声明的作用域

`var` 的作用域

var 声明的变量是 函数作用域（function-scoped）的。如果你在函数内声明变量，它的作用范围仅限于该函数内部，无法访问函数外部。
如果在函数外部声明 var，它会成为 全局变量，也就是说可以在整个程序中访问。

function testVar() {
  if (true) {
    var x = 10;  // 使用 var 声明
  }
  console.log(x);  // 10，函数作用域
}

testVar();

`let` 的作用域

let 声明的变量是 块级作用域（block-scoped）的，这意味着它只在代码块（如 if 语句、循环、函数等）中有效，无法访问代码块外部。

function testLet() {
  if (true) {
    let y = 20;  // 使用 let 声明
    console.log(y);  // 20
  }
  console.log(y);  // ReferenceError: y is not defined
}

testLet();

总结：

var 是 函数作用域，声明的变量在函数内的任何地方都可访问，即使在声明之前。
let 是 块级作用域，声明的变量仅在其所在的代码块内有效，外部无法访问。

2. 变量提升（Hoisting）

`var` 和提升

var 声明的变量会被提升到函数的顶部，但只会提升声明，而不会提升赋值。这意味着如果在赋值之前访问该变量，值将是 undefined。

console.log(a);  // undefined，因为声明被提升了，但赋值还没有
var a = 5;
console.log(a);  // 5

`let` 和提升

let 也会被提升，但 不会被初始化。如果在声明之前访问它，JavaScript 会抛出 ReferenceError。这种行为被称为 “暂时性死区”（TDZ, Temporal Dead Zone）。

console.log(b);  // ReferenceError: Cannot access 'b' before initialization
let b = 10;

总结：

var 声明的变量会被提升到顶部，并且初始化为 undefined。
let 声明的变量会被提升，但在声明之前是不能访问的。

3. 变量重复声明

`var` 允许重复声明

在同一个作用域内，使用 var 可以重复声明相同的变量，不会抛出错误。

var c = 30;
var c = 40;  // 没有错误，变量被重新赋值为 40
console.log(c);  // 40

`let` 不允许重复声明

在同一个作用域内，使用 let 声明变量时，如果尝试再次声明相同的变量，会抛出 SyntaxError。

let d = 50;
let d = 60;  // SyntaxError: Identifier 'd' has already been declared

总结：

var 允许在同一作用域内多次声明同一个变量。
let 不允许在同一作用域内重复声明同一个变量。

4. 全局对象属性

`var` 在全局作用域下的行为

如果在全局作用域中使用 var 声明变量，这个变量会成为 全局对象（window 或 global） 的属性。也就是说，它会挂载到 window 或 global 对象上。

var e = 100;
console.log(window.e);  // 100 (在浏览器中，window 是全局对象)

`let` 在全局作用域下的行为

如果在全局作用域中使用 let 声明变量，变量不会成为全局对象的属性。它只会在全局作用域中存在，不会挂载到 window 或 global 对象上。

let f = 200;
console.log(window.f);  // undefined

总结：

var 在全局作用域下会成为全局对象的属性。
let 在全局作用域下不会成为全局对象的属性。

5. `let` 和 `var` 的常见使用场景

使用 `var` 的场景：

在旧版 JavaScript 中，var 是唯一的变量声明方式（直到 ES6 引入了 let 和 const）。
对于较为简单的、仅在函数作用域内使用的变量，var 仍然能正常工作。

使用 `let` 的场景：

当需要块级作用域时，使用 let 使得代码更加清晰和安全。
在循环、条件判断等代码块中声明变量时，推荐使用 let，它能够确保变量只在特定块级作用域内有效。

总结：`let` vs `var` 💡

特性	`var`	`let`
作用域	函数作用域	块级作用域
提升行为	提升至作用域顶部，值为 `undefined`	提升至作用域顶部，但存在 “暂时性死区”（TDZ）
重复声明	允许在同一作用域内重复声明变量	不允许在同一作用域内重复声明变量
全局对象属性	在全局作用域中，成为全局对象的属性	在全局作用域中，不会成为全局对象的属性