diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/glossary/iife | |
parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip |
initial commit
Diffstat (limited to 'files/zh-tw/glossary/iife')
-rw-r--r-- | files/zh-tw/glossary/iife/index.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/files/zh-tw/glossary/iife/index.html b/files/zh-tw/glossary/iife/index.html new file mode 100644 index 0000000000..10c20fbf91 --- /dev/null +++ b/files/zh-tw/glossary/iife/index.html @@ -0,0 +1,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> |