技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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`;
});

demodownload

打开演示并点击按钮,文本显示点击次数。

单击按钮时,handleClick()将在 DOM 代码内部的某处执行。执行发生在远离定义的地方。

但是作为一个闭包,handleClick()从词法范围中捕获countClicked并在点击发生时更新它。还有,myText也被捕获了。

2、回调

从词法范围捕获变量在回调中很有用。

setTimeout()回调:

const message = 'Hello, World!';
setTimeout(function callback() {
  console.log(message); // logs "Hello, World!"
}, 1000);

demodownload

callback()是一个闭包,因为它捕获了变量message

forEach()的迭代器函数:

let countEven = 0;
const items = [1, 5, 100, 10];
items.forEach(function iterator(number) {
  if (number % 2 === 0) {
    countEven++;
  }
});
countEven; // => 2

demodownload

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

demodownload

multiply是一个返回另一个函数的函数。

局部套用是函数式编程的一个重要概念,也可以通过闭包实现。

executeMultiply(b)是一个闭包,它从其词法范围捕获a。当调用闭包时,捕获的变量a和参数b用于计算a * b

4,总结

闭包是一个从其词法范围捕获变量的函数。简单来说,闭包会从定义它的地方记住变量,无论它在哪里执行。

闭包允许事件处理程序、回调捕获变量。它们用于函数式编程。

在前端工作面试期间,你可能会被问到闭包是如何工作的。每个 JavaScript 开发人员都必须知道闭包是如何工作的。

相关文章

标签: 闭包  
x
x
  • 站长推荐