JavaScript 作用域

作用域的概念

作用域是指变量、函数和对象在代码中可访问的区域。作用域决定了变量的可见性和生命周期。

JavaScript 中的作用域类型

1. 全局作用域

全局作用域是指在函数外部声明的变量，它们在整个代码中都可访问：

// 全局变量
let globalVar = 'Global';

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

myFunction(); // 输出: Global
console.log(globalVar); // 可以访问全局变量

2. 函数作用域

函数作用域是指在函数内部声明的变量，它们只能在函数内部访问：

function myFunction() {
  // 局部变量
  let localVar = 'Local';
  console.log(localVar); // 可以访问局部变量
}

myFunction(); // 输出: Local
// console.log(localVar); // 错误：无法访问局部变量

3. 块级作用域

块级作用域是指在代码块（如 if、for、while 等）内部声明的变量，它们只能在代码块内部访问。块级作用域是 ES6 引入的，通过 let 和 const 关键字实现：

if (true) {
  // 块级变量
  let blockVar = 'Block';
  const blockConst = 'Block Const';
  console.log(blockVar); // 可以访问块级变量
  console.log(blockConst); // 可以访问块级常量
}

// console.log(blockVar); // 错误：无法访问块级变量
// console.log(blockConst); // 错误：无法访问块级常量

作用域链

当 JavaScript 引擎在当前作用域中找不到某个变量时，它会向上查找父级作用域，直到找到该变量或到达全局作用域。这个查找过程形成了作用域链。

// 全局作用域
let globalVar = 'Global';

function outer() {
  // 外部函数作用域
  let outerVar = 'Outer';
  
  function inner() {
    // 内部函数作用域
    let innerVar = 'Inner';
    console.log(innerVar); // 输出: Inner
    console.log(outerVar); // 输出: Outer
    console.log(globalVar); // 输出: Global
  }
  
  inner();
  console.log(innerVar); // 错误：无法访问内部函数变量
}

outer();

变量提升

1. var 的变量提升

使用 var 声明的变量会被提升到作用域的顶部，但赋值不会被提升：

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

// 上面的代码相当于
var x;
console.log(x); // 输出: undefined
x = 5;
console.log(x); // 输出: 5

2. let 和 const 的暂时性死区

使用 let 或 const 声明的变量不存在变量提升，在声明之前访问会导致错误：

// console.log(x); // 错误：Cannot access 'x' before initialization
let x = 5;
console.log(x); // 输出: 5

// console.log(y); // 错误：Cannot access 'y' before initialization
const y = 10;
console.log(y); // 输出: 10

词法作用域

JavaScript 使用词法作用域（也称为静态作用域），这意味着变量的作用域是由它在代码中的位置决定的，而不是由它的执行位置决定的：

function outer() {
  let outerVar = 'Outer';
  
  function inner() {
    console.log(outerVar); // 可以访问 outerVar，因为 inner 在 outer 内部定义
  }
  
  return inner;
}

const innerFunction = outer();
innerFunction(); // 输出: Outer（即使 innerFunction 在 outer 外部执行，它仍然可以访问 outerVar）

闭包

闭包是指函数能够访问其词法作用域之外的变量：

function createCounter() {
  let count = 0;
  
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 输出: 1
console.log(counter.increment()); // 输出: 2
console.log(counter.decrement()); // 输出: 1
console.log(counter.getCount()); // 输出: 1

全局对象

在浏览器环境中，全局对象是 window；在 Node.js 环境中，全局对象是 global：

// 在浏览器中
var globalVar = 'Global';
console.log(window.globalVar); // 输出: Global

// 在 Node.js 中
var globalVar = 'Global';
console.log(global.globalVar); // 输出: Global

作用域的最佳实践

1. 避免全局变量

尽量避免使用全局变量，以减少命名冲突和副作用：

// 不好的做法
let globalVar = 'Global';

function myFunction() {
  // 使用全局变量
  console.log(globalVar);
}

// 好的做法
function myFunction() {
  // 使用局部变量
  let localVar = 'Local';
  console.log(localVar);
}

2. 使用 let 和 const

使用 let 和 const 代替 var，以获得块级作用域：

// 好的做法
if (true) {
  let blockVar = 'Block';
  console.log(blockVar);
}

// 不好的做法
if (true) {
  var blockVar = 'Block';
  console.log(blockVar);
}

3. 使用立即执行函数表达式 (IIFE)

使用 IIFE 创建私有作用域：

(function() {
  // 私有变量
  let privateVar = 'Private';
  console.log(privateVar);
})();

// console.log(privateVar); // 错误：无法访问私有变量

4. 使用模块

使用 ES6 模块创建独立的作用域：

// module.js
export let moduleVar = 'Module';

export function moduleFunction() {
  console.log(moduleVar);
}

// main.js
import { moduleVar, moduleFunction } from './module.js';
console.log(moduleVar); // 输出: Module
moduleFunction(); // 输出: Module

作用域相关的常见问题

1. 循环中的闭包问题

在循环中创建函数时，可能会遇到闭包问题：

// 问题代码
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出: 5 5 5 5 5
  }, 1000);
}

// 解决方案 1: 使用 let
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出: 0 1 2 3 4
  }, 1000);
}

// 解决方案 2: 使用 IIFE
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 输出: 0 1 2 3 4
    }, 1000);
  })(i);
}

2. 变量遮蔽

当内部作用域中的变量与外部作用域中的变量同名时，内部变量会遮蔽外部变量：

let name = 'Global';

function myFunction() {
  let name = 'Local'; // 遮蔽全局变量
  console.log(name); // 输出: Local
}

myFunction();
console.log(name); // 输出: Global

3. 函数声明提升

函数声明会被提升到作用域的顶部：

myFunction(); // 可以在声明之前调用

function myFunction() {
  console.log('Hello, World!');
}

// 函数表达式不会被提升
// myFunction2(); // 错误：Cannot access 'myFunction2' before initialization

const myFunction2 = function() {
  console.log('Hello, World!');
};

小结

作用域是 JavaScript 中的重要概念，它决定了变量的可见性和生命周期。JavaScript 有三种作用域：全局作用域、函数作用域和块级作用域。理解作用域链、变量提升和闭包等概念，对于编写正确、高效的 JavaScript 代码非常重要。在实际开发中，应该遵循最佳实践，避免使用全局变量，使用 let 和 const 代替 var，并合理使用闭包和模块。