blob: 10c20fbf9152e05dd1b97473f9c95550a68ea0f9 (
plain)
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
|
---
title: IIFE
slug: Glossary/IIFE
translation_of: Glossary/IIFE
---
<p><strong>IIFE </strong>(Immediately Invoked Function Expression) 是一個定義完馬上就執行的 {{glossary("JavaScript")}} {{glossary("function")}}。</p>
<p>他又稱為 {{glossary("Self-Executing Anonymous Function")}}，也是一種常見的設計模式，包含兩個主要部分：第一個部分是使用{{jsxref("Operators/Grouping", "Grouping Operator")}} <code> ()</code> 包起來的 anonymous function。這樣的寫法可以避免裡面的變數污染到 global scope。</p>
<p>第二個部分是馬上執行 function 的 expression <code>()</code>，JavaScript 引擎看到它就會立刻轉譯該 function。</p>
<h2 id="Examples">Examples</h2>
<p>Function 轉換為 expression 形式，並且馬上執行，function scope 內的變數在外面是無法存取的。</p>
<pre class="brush: js"><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
var aName = "Barry";
<span class="p">})();
// Variable name is not accessible from the outside scope
aName </span>// throws "Uncaught ReferenceError: aName is not defined"
</pre>
<p>把 IIFE 只配給變數會儲存它的結果，而非 function 本身</p>
<pre class="brush: js"><span class="p">var result = (</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
var name = "Barry";
return name;
<span class="p">})();
// Immediately creates the output:
result; // "Barry"</span></pre>
<h3 id="其它形式">其它形式</h3>
<p>符合 JSLint 的版本，行為一樣，只有語意略有差異：</p>
<pre class="brush: js">(function () {
var aName = "Barry";
}());
</pre>
<p>Arrow function 版本，程式碼更為精簡，行為一致：</p>
<pre class="brush: js">(() => {
var aName = "Barry";
})();</pre>
<p>Async function 版本，目前主要為了 top level await 而使用：</p>
<pre class="brush: js">(async function () {
var aName = "Barry";
})();
(async () => {
var aName = "Barry";
})();</pre>
<h2 id="更多資訊">更多資訊</h2>
<h3 id="學習它">學習它</h3>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Functions">Quick example</a> (在 "Functions" 部分的最後面, "Custom objects" 的正前面)</li>
</ul>
<h3 id="基本知識">基本知識</h3>
<ul>
<li>{{interwiki("wikipedia", "Immediately-invoked function expression", "IIFE")}} 維基百科</li>
</ul>
|
