在 JavaScript 中，作用域（Scope） 是指变量、函数和对象的可访问范围。它决定了如何查找变量以及在不同的代码块中，哪些变量是可见的。理解作用域是理解 JavaScript 执行上下文和变量生命周期的关键。

1. 全局作用域（Global Scope）

全局作用域指的是在代码的最外层定义的变量和函数。它们在整个应用程序中都可以访问。

例子：

let globalVar = "I am global";

function greet() {
  console.log(globalVar);  // 可以访问全局变量
}

greet();  // 输出：I am global
console.log(globalVar);  // 输出：I am global

在上面的例子中，globalVar 定义在全局作用域中，所以它在 greet() 函数内外都可用。

2. 函数作用域（Function Scope）

每个函数都有自己的作用域。函数内部的变量和函数只能在该函数内访问，外部无法访问。

例子：

function greet() {
  let localVar = "I am local";  // 函数内部的变量
  console.log(localVar);  // 可以访问
}

greet();  // 输出：I am local
console.log(localVar);  // 报错：Uncaught ReferenceError: localVar is not defined

在上面的例子中，localVar 是一个在 greet() 函数内部声明的变量，因此只能在函数内部访问，在外部访问时会抛出错误。

3. 块级作用域（Block Scope）

块级作用域是指在 {} 内部定义的作用域。使用 let 和 const 关键字声明的变量有块级作用域，它们只能在声明它们的代码块内访问。var 声明的变量则没有块级作用域，而是属于函数作用域或全局作用域。

例子：

if (true) {
  let blockVar = "I am in block";
  console.log(blockVar);  // 输出：I am in block
}

console.log(blockVar);  // 报错：Uncaught ReferenceError: blockVar is not defined

在上面的例子中，blockVar 只能在 if 语句的代码块内访问，外部无法访问它。

4. 作用域链（Scope Chain）

作用域链是由多个作用域组成的链条。当访问一个变量时，JavaScript 引擎会从当前作用域开始查找，如果没有找到就会查找外部作用域，一直到全局作用域为止。

例子：

let globalVar = "I am global";

function outerFunction() {
  let outerVar = "I am outer";

  function innerFunction() {
    let innerVar = "I am inner";
    console.log(innerVar);  // 访问内层变量
    console.log(outerVar);  // 访问外层函数的变量
    console.log(globalVar); // 访问全局变量
  }

  innerFunction();
}

outerFunction();

输出：

I am inner
I am outer
I am global

在上面的例子中，innerFunction 可以访问自己的作用域中的变量 innerVar，同时也能访问 outerFunction 中的 outerVar 以及全局作用域中的 globalVar。这是因为 innerFunction 的作用域链包括了其自身作用域、outerFunction 的作用域以及全局作用域。

5. 闭包（Closure）

闭包是 JavaScript 中的一个重要概念，它是指函数可以访问其外部函数作用域中的变量，即使外部函数已经返回。闭包允许函数在其外部作用域的环境中保持对变量的引用。

例子：

function outerFunction() {
  let outerVar = "I am outer";

  return function innerFunction() {
    console.log(outerVar);  // innerFunction 访问外部函数的变量
  };
}

let closureFunction = outerFunction();  // 返回内层函数
closureFunction();  // 输出：I am outer

在上面的例子中，innerFunction 是一个闭包，它可以访问 outerFunction 中的 outerVar 变量，即使 outerFunction 已经返回，outerVar 依然在 innerFunction 中可用。

6. 变量提升（Hoisting）

变量提升是 JavaScript 中的一种行为，在执行代码之前，所有的 var 声明会被提升到函数或全局作用域的顶部，但不会提升赋值操作。

例子：

console.log(myVar);  // 输出：undefined
var myVar = 10;
console.log(myVar);  // 输出：10

在上面的例子中，myVar 被提升到作用域的顶部，但它的值赋为 10 的操作保持在原地。因此第一次 console.log(myVar) 输出 undefined，第二次输出 10。

对于 let 和 const，虽然它们也会被提升，但它们不会被初始化，直到代码执行到相应的位置。访问它们会抛出错误。

例子：

console.log(myVar);  // 报错：Uncaught ReferenceError: Cannot access 'myVar' before initialization
let myVar = 10;

7. 总结

• 全局作用域：最外层的作用域，代码中未嵌套在任何函数内的部分。
• 函数作用域：函数内部的作用域，函数内部定义的变量只能在函数内访问。
• 块级作用域：由 {} 包裹的区域，let 和 const 声明的变量具有块级作用域。
• 作用域链：通过链式查找机制查找变量，依次从当前作用域到外部作用域直到全局作用域。
• 闭包：函数可以保持对其外部作用域中变量的引用，即使外部函数已返回。
• 变量提升：var 声明的变量会被提升到作用域顶部，但赋值操作保持原位；let 和 const 不会被提升到已初始化之前使用。

理解作用域对编写高效的 JavaScript 代码至关重要，它有助于避免命名冲突、提升代码可读性和可维护性。更多详细内容请关注其他相关文章！