|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
3個示例說明JavaScript閉包為什么有用
作者:admin 時間:2022-6-7 16:22:18 瀏覽:在前一文中，我們從基本術(shù)語開始，4步完成了對JavaScript閉包的理解，但是我們更應(yīng)該要明白為什么要用閉包，這正是本文要說的內(nèi)容，我們將從3個示例中讓你了解到閉包的功能作用。
1、事件處理程序
讓我們顯示一個按鈕被點擊了多少次：
let countClicked = 0;
myButton.addEventListener('click', function handleClick() {
countClicked++;
myText.innerText = `You clicked ${countClicked} times`;
});
打開演示并點擊按鈕，文本顯示點擊次數(shù)。
單擊按鈕時，handleClick()將在 DOM 代碼內(nèi)部的某處執(zhí)行。執(zhí)行發(fā)生在遠離定義的地方。
但是作為一個閉包，handleClick()從詞法范圍中捕獲countClicked并在點擊發(fā)生時更新它。還有，myText也被捕獲了。
2、回調(diào)
從詞法范圍捕獲變量在回調(diào)中很有用。
setTimeout()回調(diào)：
const message = 'Hello, World!';
setTimeout(function callback() {
console.log(message); // logs "Hello, World!"
}, 1000);
callback()是一個閉包，因為它捕獲了變量message。
forEach()的迭代器函數(shù)：
let countEven = 0;
const items = [1, 5, 100, 10];
items.forEach(function iterator(number) {
if (number % 2 === 0) {
countEven++;
}
});
countEven; // => 2
這iterator是一個閉包，因為它捕獲countEven變量。
3、函數(shù)式編程
當一個函數(shù)返回另一個函數(shù)直到參數(shù)被完全提供時，就會發(fā)生局部套用。
例如：
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是一個返回另一個函數(shù)的函數(shù)。
局部套用是函數(shù)式編程的一個重要概念，也可以通過閉包實現(xiàn)。
executeMultiply(b)是一個閉包，它從其詞法范圍捕獲a。當調(diào)用閉包時，捕獲的變量a和參數(shù)b用于計算a * b。
4，總結(jié)
閉包是一個從其詞法范圍捕獲變量的函數(shù)。簡單來說，閉包會從定義它的地方記住變量，無論它在哪里執(zhí)行。
閉包允許事件處理程序、回調(diào)捕獲變量。它們用于函數(shù)式編程。
在前端工作面試期間，你可能會被問到閉包是如何工作的。每個 JavaScript 開發(fā)人員都必須知道閉包是如何工作的。
相關(guān)文章
標簽: 閉包
- 站長推薦
