JavaScript 闭包：赋能和陷阱

2024-02-15 10:13:54

闭包是一个 JavaScript 函数与它被创建时的词法环境的引用（即该函数作用域中的变量和常量）的结合。这种特性赋予了闭包独特的能力和潜在的陷阱。

理解闭包

想象一个函数 innerFunc 被定义在另一个函数 outerFunc 中：

function outerFunc() {
  const x = 10;
  
  function innerFunc() {
    console.log(x);
  }
  
  return innerFunc;
}

当 outerFunc 被调用时，它创建了一个词法环境并分配了变量 x。然后，innerFunc 函数作为闭包返回。即使 outerFunc 执行完毕，innerFunc 仍然保留对变量 x 的引用。

闭包的使用场景

1. 封装私有变量

闭包可以通过其词法环境来封装变量，从而保护它们不被外部作用域访问。例如：

function createCounter() {
  let count = 0;
  
  return function() {
    return count++;
  };
}

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

2. 事件处理程序

闭包常用于事件处理程序中，以便在事件发生后仍能访问事件数据。例如：

document.addEventListener('click', function(e) {
  console.log(e.target.id); // 访问点击元素的 ID
});

3. 延迟函数执行

闭包可以用于创建延迟函数，在指定的时间间隔后执行。例如：

function delay(fn, ms) {
  return function() {
    setTimeout(fn, ms);
  };
}

const delayedFunction = delay(() => { console.log('延迟执行') }, 1000);
delayedFunction(); // 1 秒后打印 "延迟执行"