JavaScript 变量声明与作用域

JavaScript 变量声明与作用域

JavaScript 中有三种常见方式来声明变量：使用 var let 和 const 关键字。我们先来看一下 JavaScript 中的变量提升以及作用域。

变量提升

• 在 JavaScript 中，变量提升是指在代码执行之前，变量的声明会被提升到代码的顶部。这意味着，你可以在变量声明之前使用这些变量，而不会报错。

使用 var 关键字声明变量

console.log(x); // 输出: undefined
var x = 10;
console.log(x); // 输出: 10

上述代码中，var x 的声明被提升到了代码的顶部，所以在第一个 console.log(x) 中，x 的值为 undefined。但是在第二个 console.log(x) 中，x 的值已经被赋为了 10。

使用 let 和 const 关键字声明变量

• let 和 const 关键字是 ES6 引入的新特性，它们对变量提升的行为与 var 有所不同。

console.log(x); // 报错: ReferenceError: Cannot access 'x' before initialization
let x = 10;
console.log(x); // 输出: 10

上述代码中，在第一个 console.log(x) 中使用 let 声明变量 x 时，会报错。因为 let 和 const 声明的变量不会被变量提升，所以在使用它们声明变量之前使用该变量会导致引用错误。

作用域

• 作用域指的是变量在代码中的可访问范围。在 JavaScript 中，有全局作用域和局部作用域两种。全局作用域中声明的变量可以在代码的任何地方访问，而局部作用域中声明的变量只能在其所在的函数或块级作用域中访问。

• 全局作用域

全局作用域中声明的变量可以在代码的任何地方访问。

var x = 10; // 全局作用域

function foo() {
  console.log(x); // 输出: 10
}

foo();

在上述代码中，x 通过 var 关键字在全局作用域中声明，所以在 foo 函数中可以访问到 x 的值。

局部作用域

• 局部作用域中声明的变量只能在其所在的函数或块级作用域中访问。

function foo() {
  var x = 10; // 局部作用域

  console.log(x); // 输出: 10
}

foo();
console.log(x); // 报错: ReferenceError: x is not defined

在上述代码中，x 通过 var 关键字在 foo 函数内的局部作用域中声明，所以只能在该函数内部访问到 x 的值。在函数外部访问x时会报错。

示例

• 下面是一个综合运用变量声明、变量提升和作用域的示例：

var x = 10; // 全局变量

function foo() {
  var y = 20; // 局部变量

  if (true) {
    var z = 30; // 函数作用域
    let w = 40; // 块级作用域
    console.log(x, y, z, w); // 输出: 10 20 30 40
  }

  console.log(x, y, z); // 输出: 10 20 30
  console.log(w); // 报错: ReferenceError: w is not defined
}

foo();
console.log(x); // 输出: 10
console.log(y); // 报错: ReferenceError: y is not defined
console.log(z); // 报错: ReferenceError: z is not defined

上述示例中，x 是全局变量，可以在函数内外任意地方访问。y 是在 foo 函数内部声明的局部变量，只能在foo函数内部访问。z 通过 var 在函数内部声明，所以它具有函数作用域，可以在函数内部访问。w 通过 let 在块级作用域中声明，只能在其所在的代码块内部访问。

希望这篇文档对你在理解 JavaScript 的变量声明与作用域方面有所帮助。