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

JavaScript 中的闭包的形成及使用场景

article 2024/9/29 10:16:55

JavaScript 中的闭包

闭包（Closure） 是 JavaScript 中一个非常重要且独特的概念，它指的是 函数能够记住并访问其词法作用域内的变量，即使这个函数在其词法作用域之外执行。

通俗地说，闭包是 一个函数可以“记住”它在定义时的环境（包括变量和参数），即使这个函数在它定义时的作用域之外被调用，它仍然可以访问该作用域中的变量。

闭包的形成

当一个函数内部定义并返回了另一个函数时，并且这个内部函数引用了外部函数的变量，这就形成了闭包。闭包使得内部函数能够“记住”它定义时外部函数的变量，即使外部函数已经执行结束了，这些变量仍然可以被访问。

闭包的例子

function outer() {
  let counter = 0;
  return function inner() {
    counter++;
    console.log(counter);
  }
}

const increment = outer();
increment(); // 输出: 1
increment(); // 输出: 2
increment(); // 输出: 3

在这个例子中：

outer 函数返回了 inner 函数，而 inner 函数引用了 outer 函数中的局部变量 counter。
即使 outer 函数已经执行完毕，inner 函数仍然能够访问和修改 counter，因为 inner 函数形成了一个闭包，保存了对 outer 函数作用域中变量的引用。

闭包的特性

函数可以记住它的词法作用域：即使外部函数已经返回，闭包中的函数仍然可以访问外部函数作用域中的变量。
局部变量的持久化：闭包中的局部变量不会在外部函数返回后被销毁，它们会被保留，直到没有任何闭包再引用它们为止。
数据封装：闭包可以模拟私有变量，避免外部直接访问或修改这些变量，只能通过闭包函数来操作它们。

闭包的使用场景

闭包的应用场景非常广泛，以下是一些常见的使用场景：

1. 模拟私有变量

JavaScript 中没有真正的私有变量，但闭包可以帮助实现类似的效果。通过闭包，可以创建只能通过特定函数访问和修改的变量，避免外部直接访问。

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

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

在这个例子中，count 是 createCounter 函数中的局部变量，外部无法直接访问它，只能通过 increment 和 decrement 方法修改它的值。这种方式模拟了私有变量的行为。

2. 函数工厂

闭包可以用于创建返回不同功能的函数，类似于工厂模式。例如，可以创建多个配置不同的计数器：

function createCounter(start) {
  let count = start;
  return function() {
    count++;
    console.log(count);
  }
}

const counter1 = createCounter(0);
const counter2 = createCounter(100);

counter1(); // 输出: 1
counter1(); // 输出: 2
counter2(); // 输出: 101
counter2(); // 输出: 102

每次调用 createCounter 都会生成一个新的计数器实例，且每个计数器都能记住自己的初始值。

3. 回调函数和事件处理

闭包广泛应用于回调函数、事件处理等异步编程场景中。例如，在事件处理函数中，闭包可以保存外部函数的状态，并在事件触发时访问这些状态。

function setupEventListeners() {
  let name = 'Button clicked!';
  document.getElementById('myButton').addEventListener('click', function() {
    console.log(name); // 即使外部函数已执行完毕，仍然能访问 name
  });
}

setupEventListeners();

即使 setupEventListeners 函数执行完毕后，点击按钮时仍然可以访问 name 变量，这是因为 addEventListener 的回调函数形成了闭包。

4. 防抖与节流

闭包常用于防抖和节流函数的实现，以保存计时器状态或限制函数执行频率。例如，防抖函数在用户停止输入一段时间后才执行，可以避免多次频繁的操作。

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}

const handleInput = debounce(function(event) {
  console.log('Input event triggered', event.target.value);
}, 500);

document.getElementById('searchInput').addEventListener('input', handleInput);

在这个例子中，闭包用于保存 timer 变量的状态，使得每次用户输入时，timer 不会被销毁，从而实现防抖效果。

5. 缓存（记忆化）

闭包还可以用于缓存计算结果，提高函数的效率。例如，记忆化函数可以缓存已经计算过的结果，避免重复计算。

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = fn.apply(this, args);
    cache[key] = result;
    return result;
  }
}

function slowFunction(num) {
  console.log('Expensive calculation...');
  return num * 2;
}

const memoizedFunction = memoize(slowFunction);
console.log(memoizedFunction(5)); // 输出: Expensive calculation... 10
console.log(memoizedFunction(5)); // 输出: 10 (缓存结果，没有再计算)