1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
---
title: 一級函式（First-class Function）
slug: Glossary/First-class_Function
translation_of: Glossary/First-class_Function
---
<p>當函式在那個語言中可以被視為跟其他的變數一樣時，我們稱那樣的程式語言擁有<strong>一級函式</strong>。例如，函式可以作為參數傳遞到另一個函式，可以被另一個函式作為回傳值且可以被當作值一樣指派到另一個變數。</p>
<h2 id="範例_指定函式到一個變數">範例 | 指定函式到一個變數</h2>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">const foo = function() {
console.log("foobar");
}
// Invoke it using the variable
foo();
</pre>
<p>我們指派一個 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">匿名函式</span></font> 到 <code>變數</code> 中，然後在這個變數後面加上括弧 <code>()</code> 的方式來調用那個函式。</p>
<div class="note">
<p><strong>即使你已經為函式命名了</strong>，你仍然可以透過這個變數的名稱來調用它。有命名的函數在你除錯時是有幫助的。<em>但是這並不會影響我們調用它的方式</em>。</p>
</div>
<h2 id="範例_將函式作為參數來傳遞">範例 | 將函式作為參數來傳遞</h2>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return "Hello, ";
}
function greeting(helloMessage, name) {
console.log(helloMessage() + name);
}
// Pass `sayHello` as an argument to `greeting` function
greeting(sayHello, "JavaScript!");
</pre>
<p>我們將 <code>sayHello()</code> 函式當成是變數傳遞到 <code>greeting()</code> 函式，這說明了我們將函式視為是一個 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">值</span></font> 來使用它。</p>
<div class="note">
<p>將函式作為參數傳遞到另一個函式時，被當作參數傳遞的那個函式我們稱之為回調函式 <strong><a href="/en-US/docs/Glossary/Callback_function">Callback function</a>。</strong> <em><code>sayHello</code> 就是一個回調函式。</em></p>
</div>
<h2 id="範例_回傳一個函式">範例 | 回傳一個函式</h2>
<h3 id="JavaScript_3">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
</pre>
<p>在這個例子中，我們需要從另一個函式中回傳函式回來 - <em>在 JavaScript 中，我們可以回傳函式是因為我們將函式當成是一個 <code>值</code> 。</em></p>
<div class="note">
<p>當一個函式可以回傳一個函式時，稱之為高階函式 ( <strong>Higher-Order Function </strong>)。</p>
</div>
<p>回到剛才的例子，現在我們需要調用 <code>sayHello</code> 函式與它所回傳的匿名函式 (<code>Anonymous Function</code>)。 為了達成這個目標，我們有兩種方式：</p>
<h3 id="1-_使用變數">1- 使用變數</h3>
<pre class="brush: js">const sayHello = function() {
return function() {
console.log("Hello!");
}
}
const myFunc = sayHello();
myFunc();
</pre>
<p>這樣做的話，它會回傳 <code>Hello!</code> 這個訊息。</p>
<div class="note">
<p>如果你直接調用 <code>sayHello</code> 的話，你必須再使用另一個變數來儲存之後再調用它，調用 <code>sayHello</code> 只會回傳函式回來而<strong>非調用它所回傳的函式</strong>。</p>
</div>
<h3 id="2-_使用雙括號">2- 使用雙括號</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
sayHello()();</pre>
<p>我們也可使用雙括號 <code>()()</code> 來調用所回傳的函數。</p>
<h2 id="Learn_more">Learn more</h2>
<h3 id="General_knowledge">General knowledge</h3>
<ul>
<li>{{Interwiki("wikipedia", "First-class_function", "First-class functions")}} on Wikipedia</li>
</ul>
|
