闭包应用场景

闭包是JavaScript中一个强大且常用的特性，它允许函数访问并操作函数外部的变量，即使外部函数已经执行完毕。闭包的应用场景非常广泛，从数据封装到高阶函数，再到异步编程，都能看到它的身影。

数据封装与私有变量

闭包可以用来模拟私有变量，实现数据的封装。在JavaScript中，没有原生的私有变量支持，但通过闭包可以轻松实现这一功能。

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.getCount());  // 2

在这个例子中，count变量被封装在createCounter函数内部，外部无法直接访问它，只能通过返回的对象中的方法来操作。这种方式常用于模块化开发，避免全局变量污染。

函数工厂

闭包可以用来创建函数工厂，即根据不同的参数生成具有特定行为的函数。这在需要动态生成函数的场景中非常有用。

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

这里，createMultiplier函数返回一个新的函数，新函数记住了factor参数的值，并在调用时使用它。这种方式可以避免重复编写类似的函数逻辑。

事件处理与回调函数

闭包在事件处理和回调函数中非常常见，尤其是在需要保留某些状态的场景中。

function setupButtons() {
  const buttons = document.querySelectorAll('button');
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      console.log(`Button ${i + 1} clicked`);
    });
  }
}

setupButtons();

在这个例子中，每个按钮的点击事件处理函数都通过闭包记住了循环中的i值。如果没有闭包，所有按钮都会输出最后一个i的值。

延迟执行与定时器

闭包在setTimeout和setInterval等定时器函数中也非常有用，尤其是在需要访问外部变量的情况下。

function delayedGreeting(name) {
  setTimeout(function() {
    console.log(`Hello, ${name}!`);
  }, 1000);
}

delayedGreeting('Alice'); // 1秒后输出 "Hello, Alice!"

这里的回调函数通过闭包记住了name参数的值，即使delayedGreeting函数已经执行完毕。

模块模式

闭包是实现模块模式的核心技术之一。模块模式允许将相关的功能和数据组织在一起，同时隐藏内部实现细节。

const myModule = (function() {
  let privateVar = 'I am private';

  function privateMethod() {
    console.log(privateVar);
  }

  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();

myModule.publicMethod(); // 输出 "I am private"

在这个例子中，privateVar和privateMethod对外是不可见的，只有通过返回的对象中的publicMethod才能访问它们。这种方式在现代前端开发中仍然被广泛使用。

记忆化（Memoization）

闭包可以用来实现记忆化，即缓存函数的计算结果，避免重复计算。

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

const factorial = memoize(function(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
});

console.log(factorial(5)); // 120
console.log(factorial(5)); // 直接从缓存中读取

这里，memoize函数返回一个新的函数，新函数通过闭包记住了cache对象，从而实现了计算结果缓存。

高阶函数

闭包是实现高阶函数的基础。高阶函数是指接受函数作为参数或返回函数的函数。

function withLogging(fn) {
  return function(...args) {
    console.log(`Calling function with arguments: ${args}`);
    const result = fn(...args);
    console.log(`Function returned: ${result}`);
    return result;
  };
}

const add = withLogging(function(a, b) {
  return a + b;
});

console.log(add(2, 3));
// 输出:
// Calling function with arguments: 2,3
// Function returned: 5
// 5

在这个例子中，withLogging函数返回一个新的函数，新函数通过闭包记住了原始的fn函数，并在调用时添加了日志功能。

异步编程

闭包在异步编程中也非常重要，尤其是在处理回调函数和Promise时。

function fetchData(url) {
  return new Promise(function(resolve, reject) {
    fetch(url)
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

fetchData('https://api.example.com/data')
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

这里的Promise构造函数中的回调函数通过闭包记住了resolve和reject函数，使得它们可以在异步操作完成后被调用。

防抖与节流

闭包在实现防抖（debounce）和节流（throttle）函数时也起到了关键作用。

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

const debouncedSearch = debounce(function(query) {
  console.log(`Searching for: ${query}`);
}, 300);

// 在输入框的input事件中使用
inputElement.addEventListener('input', function(e) {
  debouncedSearch(e.target.value);
});

在这个例子中，debounce函数返回的新函数通过闭包记住了timerId，从而实现了防抖功能。

函数柯里化

闭包是实现函数柯里化的关键技术。柯里化是将多参数函数转换为一系列单参数函数的过程。

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

const add = curry(function(a, b, c) {
  return a + b + c;
});

console.log(add(1)(2)(3)); // 6
console.log(add(1, 2)(3)); // 6
console.log(add(1, 2, 3)); // 6

这里的curry函数通过闭包记住了原始函数fn和已经收集的参数args，实现了函数的柯里化。

状态管理

闭包可以用来管理状态，特别是在需要保持某些状态但又不想使用全局变量的情况下。

function createState(initialState) {
  let state = initialState;
  return {
    getState: () => state,
    setState: (newState) => {
      state = newState;
    }
  };
}

const counterState = createState(0);
console.log(counterState.getState()); // 0
counterState.setState(5);
console.log(counterState.getState()); // 5

这个例子展示了一个简单的状态管理实现，通过闭包来保护state变量不被外部直接修改。

迭代器与生成器

闭包可以用来实现自定义的迭代器，这在处理复杂数据结构时非常有用。

function createRangeIterator(start, end, step = 1) {
  let current = start;
  return {
    next: function() {
      if (current <= end) {
        const value = current;
        current += step;
        return { value, done: false };
      }
      return { done: true };
    }
  };
}

const iterator = createRangeIterator(1, 5);
let result = iterator.next();
while (!result.done) {
  console.log(result.value); // 1, 2, 3, 4, 5
  result = iterator.next();
}

这里的next方法通过闭包记住了current变量的状态，实现了迭代器的功能。

延迟初始化

闭包可以用来实现延迟初始化，即只有在第一次访问时才进行初始化。

function createLazyInitializer(initializer) {
  let value;
  let initialized = false;
  return function() {
    if (!initialized) {
      value = initializer();
      initialized = true;
    }
    return value;
  };
}

const getHeavyObject = createLazyInitializer(() => {
  console.log('Initializing heavy object...');
  return { data: 'Heavy object data' };
});

console.log(getHeavyObject()); // 初始化并返回对象
console.log(getHeavyObject()); // 直接返回已初始化的对象

这个模式在需要延迟计算或加载资源时非常有用，可以显著提高性能。

函数组合

闭包可以用来实现函数组合，即将多个函数组合成一个新的函数。

function compose(...fns) {
  return function(x) {
    return fns.reduceRight((acc, fn) => fn(acc), x);
  };
}

const add5 = x => x + 5;
const multiply3 = x => x * 3;
const square = x => x * x;

const transform = compose(square, multiply3, add5);
console.log(transform(2)); // ((2 + 5) * 3)^2 = 441

这里的compose函数通过闭包记住了所有要组合的函数，并返回一个新的组合函数。