JavaScript中的闭包-猿码集

1. 什么是闭包

在JavaScript中，闭包是一种特殊的函数，可以访问其父级作用域中的变量，即使该函数已经返回。简单来说，闭包就是指函数内部有另一个函数，并且内部函数可以访问外部函数的变量，即使外部函数执行完毕。

闭包的特点：

函数嵌套函数，并且内部函数可以访问外部函数的变量

外部函数返回内部函数

内部函数可以在外部函数执行完毕后继续访问外部函数的变量

2. 闭包的用途

2.1 封装变量

闭包可以帮助我们实现类似于面向对象编程中的封装，即将一些私有变量封装到函数内部，外部无法访问，只能通过函数内部的公共方法访问。


function createCounter() {
  let count = 0;
  function counter() {
    return ++count;
  }
  return counter;
}
const counter1 = createCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
const counter2 = createCounter();
console.log(counter2()); // 1
console.log(counter2()); // 2

在上面的例子中，我们使用闭包创建了一个计数器，通过函数内部的count变量实现了私有化的效果，外部无法直接访问到count变量，只能通过返回的函数进行访问。

2.2 延迟执行

闭包还可以用于实现在指定的时间间隔后执行函数的功能，例如debounce和throttle函数。

2.2.1 debounce函数

debounce函数可以用于防止重复提交，例如在表单提交时，我们可能需要等待一段时间后再提交，以防止用户频繁提交。debounce函数会在指定时间内，每次触发事件都会清空上一次的计时器，直到指定时间内没有再次触发事件，才会执行函数。


function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}
function onSubmit() {
  console.log('表单提交成功');
}
const handleSubmit = debounce(onSubmit, 1000);
form.onsubmit = handleSubmit;

在上面的例子中，我们通过闭包将一个定时器变量保存在函数内部，通过clearTimeout和setTimeout实现了debounce函数的功能。

2.2.2 throttle函数

throttle函数可以用于实现滚动事件等需要频繁触发的事件的优化，它会在指定的时间内只执行一次函数，以减少函数的执行次数。


function throttle(fn, wait) {
  let timer = null;
  return function (...args) {
    if (timer === null) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, wait);
    }
  }
}
function onScroll() {
  console.log('正在滚动');
}
const handleScroll = throttle(onScroll, 1000);
window.onscroll = handleScroll;

在上面的例子中，我们通过闭包将一个定时器变量保存在函数内部，实现了throttle函数的功能。

3. 闭包的注意点

3.1 内存泄露

闭包可以访问外部函数的变量，因为内部函数保存了外部作用域的引用，如果这个引用保存的是一个DOM节点，那么就可能会造成内存泄露。因为DOM节点是不会被垃圾回收器回收的。


function handleClick() {
  const button = document.getElementById('button');
  button.addEventListener('click', function () {
    console.log('你点击了按钮');
  });
}
handleClick();

在上面的例子中，虽然button元素已经离开了作用域，但是由于闭包的存在，click事件对button元素的引用仍然被保存在内存中，直到页面关闭才会被清除，容易造成内存泄露问题。

3.2 变量共享

由于闭包保留了外部函数的引用，因此如果内部函数的变量引用了外部函数的变量，在外部函数对外部变量进行修改时，内部函数访问到的变量会受到影响。这种变量共享的现象可能会导致难以调试的问题。


function createArray() {
  const array = [];
  for (let i = 0; i < 3; i++) {
    array.push(function () {
      console.log(i);
    });
  }
  return array;
}
const functions = createArray();
for (let i = 0; i < functions.length; i++) {
  functions[i]();
}

在上面的例子中，我们通过闭包保存了一个函数数组，函数内部都访问了外部循环的计数器i，由于函数内部引用的是外部变量的引用，因此输出的结果都是3，而不是我们期望的012。

4. 总结

闭包是一种有用的编程技巧，可以用于封装变量、延迟执行等场景。但是在使用闭包时需要注意内存泄露和变量共享等问题，合理使用闭包能够提高代码的可维护性和可读性。

JavaScript中的闭包