3个示例说明JavaScript闭包为什么有用
作者:admin 时间:2022-6-7 16:22:18 浏览:在前一文中，我们从基本术语开始，4步完成了对JavaScript闭包的理解，但是我们更应该要明白为什么要用闭包，这正是本文要说的内容，我们将从3个示例中让你了解到闭包的功能作用。
1、事件处理程序
让我们显示一个按钮被点击了多少次：
let countClicked = 0;
myButton.addEventListener('click', function handleClick() {
countClicked++;
myText.innerText = `You clicked ${countClicked} times`;
});
打开演示并点击按钮，文本显示点击次数。
单击按钮时，handleClick()将在 DOM 代码内部的某处执行。执行发生在远离定义的地方。
但是作为一个闭包，handleClick()从词法范围中捕获countClicked并在点击发生时更新它。还有，myText也被捕获了。
2、回调
从词法范围捕获变量在回调中很有用。
setTimeout()回调：
const message = 'Hello, World!';
setTimeout(function callback() {
console.log(message); // logs "Hello, World!"
}, 1000);
callback()是一个闭包，因为它捕获了变量message。
forEach()的迭代器函数：
let countEven = 0;
const items = [1, 5, 100, 10];
items.forEach(function iterator(number) {
if (number % 2 === 0) {
countEven++;
}
});
countEven; // => 2
这iterator是一个闭包，因为它捕获countEven变量。
3、函数式编程
当一个函数返回另一个函数直到参数被完全提供时，就会发生局部套用。
例如：
function multiply(a) {
return function executeMultiply(b) {
return a * b;
}
}
const double = multiply(2);
double(3); // => 6
double(5); // => 10
const triple = multiply(3);
triple(4); // => 12
multiply是一个返回另一个函数的函数。
局部套用是函数式编程的一个重要概念，也可以通过闭包实现。
executeMultiply(b)是一个闭包，它从其词法范围捕获a。当调用闭包时，捕获的变量a和参数b用于计算a * b。
4，总结
闭包是一个从其词法范围捕获变量的函数。简单来说，闭包会从定义它的地方记住变量，无论它在哪里执行。
闭包允许事件处理程序、回调捕获变量。它们用于函数式编程。
在前端工作面试期间，你可能会被问到闭包是如何工作的。每个 JavaScript 开发人员都必须知道闭包是如何工作的。
相关文章
标签: 闭包
相关文章
x
- 站长推荐
