JavaScript 中返回另一個函式的函式
在 JavaScript 中,函式可以賦值給任何變數,可以作為引數傳遞給其他函式,甚至可以從其他函式返回。這種函式的行為允許我們在 JavaScript 中建立高階函式 (HOC),它們是返回其他函式的函式。這些高階函式可用於各種應用程式,例如回撥函式、函式記憶或轉換等。
在本文中,我們將學習返回另一個函式的函式,也就是 JavaScript 中的高階函式,以及如何使用它們來實現某些 JavaScript 功能,例如回撥、陣列/物件過濾和轉換等。
讓我們來看一些示例來更好地理解這個概念:
示例 1 - 回撥函式
在這個例子中,我們將:
建立一個按鈕,併為其附加一個點選事件監聽器,該監聽器將呼叫 handleClick 函式。
handleClick 函式將呼叫 processUserInput 函式,並將 greet 函式作為回撥傳遞。
processUserInput 函式將詢問使用者的姓名並呼叫回撥函式,然後回撥函式將問候語記錄到控制檯。
檔名 - index.html
<html>
<head>
<title>Function returning another function in JavaScript</title>
<script>
function greet(name) {
console.log("Hello, " + name + "!");
}
function processUserInput(callback) {
const name = prompt("Please enter your name:");
callback(name);
}
function handleClick() {
processUserInput(greet);
}
</script>
</head>
<body>
<h1>Callback Example</h1>
<button onclick="handleClick()">Click Me</button>
</body>
</html>
輸出
結果將如下面的圖片所示。

示例 2 - 陣列高階函式
在這個例子中,我們將:
建立“平方和”和“乘積”按鈕,併為其附加點選事件監聽器。
當點選第一個按鈕時,我們將使用平方函式作為引數呼叫 performOperation 函式。
同樣,當點選第二個按鈕時,我們將使用乘積函式作為引數呼叫 performOperation 函式。
檔名 - index.html
<html>
<head>
<title>Function returning another function in JavaScript</title>
</head>
<body>
<h1>Array Higher-Order Functions</h1>
<pre id="array"></pre>
<button onclick="performOperation(square)">Square and Sum</button>
<button onclick="performOperation(product)">Product</button>
<script>
const numbers = [1, 2, 3, 4, 5];
document.getElementById("array").innerHTML = JSON.stringify(numbers);
function square(n) {
return n * n;
}
function sum(a, b) {
return a + b;
}
function product(a, b) {
return a * b;
}
function performOperation(operation) {
const result = numbers.map(operation).reduce(operation);
console.log("Result:", result);
}
</script>
</body>
</html>
輸出
結果將如下面的圖片所示。

結論
JavaScript 中的高階函式允許我們建立各種 JavaScript 功能,例如啟用回撥函式用於事件處理或非同步操作,透過 filter() 和 map() 等函式促進資料過濾和轉換等。我們學習瞭如何使用不同的方法實現返回其他函式的函式,並看到了一些解釋相同的示例。
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP