网络技术问题 | JavaScript 课程测验 1 |问题 47

问题描述

在 JavaScript 中，什么是闭包？请提供一个实际场景的例子并解释它的工作原理。

回答

什么是闭包

闭包是指能够访问自由变量的函数。简单来说，闭包就是一个函数，能够记住并访问该函数创建时的作用域中的变量，即便该函数在其原始作用域外被调用。在 JavaScript 语言的响应式编程中非常常见，闭包可以保存对一个外部变量的引用，以便能够在函数调用之后继续访问。

闭包实例

一个实际场景的例子是：当用户点击按钮时，记录按钮点击了几次。

function countClicks() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  }
}

const handleClick = countClicks();

document.querySelector('#button').addEventListener('click', handleClick);

上面的函数 countClicks 返回了一个内部函数，该函数可以访问其外部函数中的变量 count。我们将此返回的函数赋值给 handleClick，并在 HTML 中的按钮上添加了一个点击事件监听器来触发此函数。每一次点击事件发生时，该函数都会增加 count 的值，并将其打印到控制台中。因为闭包的原因，count 变量被传递给了内部函数，每次点击事件发生时，它都能够保留其不同的值。

工作原理

当创建一个闭包时，JavaScript 执行环境会将创建该闭包所在的作用域中的变量绑定到该闭包中。这个绑定在闭包执行时一直存在，所以闭包可以访问这些变量，即便变量已经在生成它们的作用域中不再存在。这就是为什么我们可以在上面的例子中访问 count 变量，即使它已经超出了 countClicks 函数的作用域。