当前位置：首页 > article >正文

js进阶——作用域闭包

article 2024/11/20 7:26:22

1. 作用域与闭包的基础概念

1.1 作用域 (Scope)

在 JavaScript 中，作用域定义了变量、函数的可访问性。根据变量声明的位置不同，作用域有三种主要类型：

全局作用域：在代码的任何地方都可以访问。
函数作用域：只在声明的函数内部访问。
块作用域：由 {} 包围的代码块内部可访问，使用 let 和 const 声明的变量具备块作用域。

1.2 闭包 (Closure)

闭包是指一个函数与其外部（函数定义时）环境的结合，使得即使函数在外部作用域被调用，它依然能够访问其创建时的变量。这是 JavaScript 中的一个关键特性，用于实现封装、私有变量、回调函数等。

简单地说，闭包就是内部函数可以“记住”它的外部函数的变量，即使外部函数已经执行完毕。

2. 作用域链与闭包的关系

每个 JavaScript 函数在执行时都会创建一个作用域链（scope chain）。作用域链用来确保函数执行时能访问所有变量。这个作用域链由多个作用域逐层嵌套形成，最里层的作用域是函数自己的局部作用域，往外是外部函数的作用域，直到全局作用域。

闭包的关键在于，函数的作用域链不会因为外部函数执行完毕而丢失。当内部函数被执行时，它依然能够通过作用域链访问外部函数的变量，这就是闭包的核心机制。

3. 闭包的使用场景

3.1 封装与私有变量

闭包常用来创建私有变量，外部函数不能直接访问这些变量，只有通过闭包暴露的接口才能操作它们。

function createCounter() {
  let count = 0; // 私有变量
  return function() {
    count++; // 通过闭包访问和修改
    return count;
  };
}

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

在这个例子中，count 变量虽然在 createCounter 函数中定义，但由于返回的函数形成了闭包，它依然能访问 count。

3.2 模拟块级作用域

在 let 和 const 出现之前，JavaScript 没有块级作用域，闭包可以用来模拟这种效果。

for (var i = 0; i < 3; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i); // 0, 1, 2
    }, 100);
  })(i);
}

3.3 回调函数与异步操作

在 JavaScript 中，异步操作和事件处理器广泛使用闭包。常见场景包括定时器、事件监听器、Ajax 回调等。

function asyncTask(message) {
  setTimeout(function() {
    console.log(message); // 通过闭包保留 `message`
  }, 1000);
}

asyncTask('Hello, Closure!');

4. 闭包的优缺点

4.1 优点

数据封装：通过闭包实现私有变量，防止数据污染。
状态保持：闭包能够“记住”外部函数的变量状态，适合场景如计数器、缓存等。

4.2 缺点

内存泄漏：由于闭包保留了对外部变量的引用，可能导致垃圾回收无法及时清除变量，造成内存泄漏。如果闭包中存在大量无用变量，可能占用较多内存。
调试困难：闭包使得变量的作用域更加复杂，调试代码时需要仔细追踪变量的作用域链。

5. 高级闭包技巧

5.1 自执行函数表达式 (IIFE)

自执行函数表达式（Immediately Invoked Function Expression, IIFE）是通过闭包来实现的，将函数定义后立即执行。

(function() {
  let privateVar = 'This is private';
  console.log(privateVar);
})();

通过这种方式，privateVar 是局部变量，不会污染全局命名空间。

5.2 函数工厂

闭包还可以用于创建函数工厂，根据不同的输入生成不同的行为。

function multiplier(factor) {
  return function(num) {
    return num * factor; // 闭包保存 `factor`
  };
}

let double = multiplier(2);
console.log(double(5)); // 10

let triple = multiplier(3);
console.log(triple(5)); // 15

5.3 函数记忆化

闭包可以实现函数的记忆化（memoization），用于缓存计算结果，优化性能。

function memoize(fn) {
  let cache = {};
  return function(...args) {
    let key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args); // 缓存计算结果
    }
    return cache[key];
  };
}

function slowFunction(num) {
  let result = num * 2; // 假设这是个耗时计算
  return result;
}

let memoizedSlowFunction = memoize(slowFunction);
console.log(memoizedSlowFunction(5)); // 10
console.log(memoizedSlowFunction(5)); // 10 (缓存结果)