全面解析 JavaScript 作用域

1. 为什么 JavaScript 引入作用域的概念呢？

其主要为了提升代码的可维护性、安全性和避免冲突，确保变量和函数能够在适当的范围内被访问和使用。以下举例说明一下：

1、避免命名冲突

在大型项目中，不同部分可能会使用相同的变量名。如果没有作用域，所有变量都在全局共享，容易发生命名冲突，导致变量的值被意外修改。通过作用域，变量可以限制在特定的范围内，避免这种冲突。

🌰

function foo() {
  var x = 10; // x 只在函数 foo 内部有效
}
function bar() {
  var x = 20; // x 只在函数 bar 内部有效
}
foo();
bar(); // 两个 x 互不影响

2、数据封装与隐藏

作用域允许我们封装数据，将某些变量或函数限制在特定的范围内，防止外部代码直接访问或修改。这增强了代码的安全性和模块化。

🌰

function createCounter() {
  let count = 0; // count 在外部不可访问
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

3、管理变量生命周期

作用域决定了变量的生命周期（即变量存在的时间范围）。当变量超出其作用域时，它就会被销毁，从而释放内存，避免资源浪费。

- 全局变量：一直存在，直到页面关闭；

- 局部变量：（函数或块内的变量）在函数执行结束或块结束后被销毁。

4、作用域链与变量查找

作用域允许 JavaScript 引擎高效地查找变量。当代码访问某个变量时，JavaScript 会沿着作用域链向上查找，直到找到为止。如果没有作用域，所有变量都在同一层次上，查找效率会降低。

🌰

let a = 1;
function outer() {
  let b = 2;
  function inner() {
    let c = 3;
    console.log(a, b, c); // 1 2 3 通过作用域链查找变量
  }
  inner();
}
outer();

5、支持闭包等高级特性

作用域是闭包、模块化等高级特性的基础。通过函数作用域和块级作用域，JavaScript 能够支持闭包，使得函数可以“记住”其定义时的外部变量。

2. 什么是作用域？

作用域（Scope）是指，在代码中变量和函数的可访问范围。作用域决定了程序中变量、函数是否可以在当前环境中被访问或修改。作用域直接影响代码的执行逻辑和变量的生命周期。

3. 分类

在 JavaScript 中，作用域主要分为三种类型：

3.1 全局作用域（Global Scope）

- 定义：在代码中最外层声明的变量或函数属于全局作用域，可以在程序的任何地方访问和修改。

- 使用场景：适用于需要在多个函数或模块中共享的数据。比如：全局配置、工具函数、常量等不容易被修改的全局数据。

- 注意事项：全局变量过多会污染全局命名空间，增加命名冲突的风险。无意中将变量变为全局变量可能导致难以调试的问题。

var globalVar = 'I am global'; // 全局变量

function example() {
  console.log(globalVar); // 在函数内部访问全局变量
}

3.2 函数作用域（Function Scope）

- 定义：在函数内部声明的变量，仅在该函数内部有效，外部无法访问。每调用一次函数，都会创建新的作用域。函数执行完毕，局部变量销毁。

- 使用场景：适用于处理复杂的逻辑、封装业务逻辑的函数，避免变量泄漏到全局作用域。

- 注意事项：使用 var 声明的变量具有函数作用域，存在变量提升问题（变量声明被提升到函数顶部，但赋值不提升）。使用 let 和 const 的块级作用域可以在函数中限制变量的作用范围。

function example() {
  console.log(localVar); // undefined
  var localVar = 'I am local'; // 函数作用域
  console.log(localVar); // I am local
}

example();
console.log(localVar); // Uncaught ReferenceError: localVar is not defined

3.3 块级作用域（Block Scope）

- 定义：块级作用域是 ES6 引入的，任何一对 {} 包裹的代码块（如 if 语句、for 循环、函数内部）都有自己的作用域。使用 let 和 const 声明的变量仅在块内有效。

- 使用场景：常用于在代码块中声明局部变量，特别是在循环 for 或条件 if 判断中。

- 注意事项：避免全局污染，特别是循环体内的变量可以使用块级作用域，防止变量提升带来的意外问题。

if (true) {
  let blockVar = 'I am block scoped';
  console.log(blockVar); // I am block scoped
}
console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined

4. 作用域链 

当 JavaScript 引擎执行代码时，会通过作用域链来查找变量。

作用域链是指当前作用域无法找到变量时，依次向上查找父级作用域，直到找到为止。如果查找到全局作用域还没有找到，则会抛出 ReferenceError 错误。

举个 🌰

var a = 'global';
function outer() {
  var b = 'outer';
  function inner() {
    var c = 'inner';
    console.log(a); // 通过作用域链访问全局变量
    console.log(b); // 通过作用域链访问外层函数变量
    console.log(c); // 访问当前函数的变量
  }
  inner();
}
outer();

5. 注意事项 

1、避免全局变量污染

- 尽量避免使用全局变量，可以通过将变量和函数放入模块或函数内来限制它们的作用范围。

- 使用 let 和 const  声明变量，防止无意中将变量提升为全局变量。

2、变量提升（Hoisting）

- 使用 var 声明的变量存在提升现象，即变量声明会被提升到作用域的顶部，但赋值不会提升。

- 使用 let 和 const 可以避免变量提升带来的困惑。

举个 🌰

function example1() {
  console.log(a); // undefined（变量声明提升）
  var a = 5;
}

example1();

function example2() {
  console.log(b); // ReferenceError（不会提升）: Cannot access 'b' before initialization
  let b = 5;
}

example2();

3、避免闭包引发的内存泄漏

闭包会引用外部函数的变量，如果长时间不释放，可能会导致内存泄漏。对于长时间不需要的变量，可以通过手动将其置为 null 或优化逻辑避免不必要的闭包。

举个 🌰

function outer() {
  let largeData = new Array(1000).fill('data');
  return function inner() {
    console.log(largeData);
  };
}

const closure = outer();
// 通过手动释放 largeData，避免内存泄漏
closure = null;

4、块级作用域的好处

在循环中使用 let 来避免变量提升问题，尤其在异步操作中防止变量共享问题。