CoffeeScript入門實踐

瓜瓜東西發表於2014-12-16

原文來自 http://www.w3ctech.com/p/1065

在這一期的節目中，我們將介紹下CoffeeScript, 那麼什麼是CoffeeScript呢？CoffeeScript是一門小語言，也是一個編譯器。用CoffeeScript編寫的程式碼，可以編譯成JavaScript程式碼。

CoffeeScript簡化了JavaScript的編寫，同時運用了JavaScript最佳實踐模式。

本期節目將分為3個部分

1. 第一部分中我們講述安裝的過程
2. 第二部分我們將看如何使用它
3. 第三部分中我們將看它如何簡化了JavaScript的編寫，同時怎麼保證了最佳實踐模式。

一、安裝的過程

要安裝CoffeeScript，需要先安裝node.js和npm。在mac 和 linux 的環境下，CoffeeScript的安裝是相當容易的。比較複雜的呢是在Windows的環境下安裝。所以我們著重講一下在Windows環境下的安裝方式。

首先我們先到node.js的網站下載在Windows版本的node.js。下載地址：http://nodejs.org/#download

下載後只要雙擊msi檔案便可安裝，整個過程是自動的。最近，npm也被加入到Node的Windows版本中，所以就不用額外再安裝了。

安裝完Node（包括npm）後，我們到Programm Files下，可以看到nodejs資料夾，在資料夾裡，有node.exe, 為了方便，我在桌面上放了個快捷方式。

之後，我們到CoffeeScript的github頁面下載CoffeeScript：https://github.com/jashkenas/coffee-script/downloads

下載並解壓，我下載的到版本解壓縮後的目錄是jashkenas-coffee-script-127653b。我們可以把它放到另一個目錄中，在這裡我們把它放在C盤的dev目錄中。

此時，Node和CoffeeScript在硬碟中的目錄分別是：

 Node：C:\Program Files\nodejs\

 CoffeeScript：C:\dev\jashkenas-coffee-script-127653b

接下來，在桌面上建一個檔案，命名為coffee.cmd。在任何一種編輯器下開啟它。在裡面打入下面的一段命令：

<span class="lit" style="color: rgb(201, 120, 62);">@echo</span><span class="pln" style="color: rgb(223, 196, 132);"> off</span>
<span class="pln" style="color: rgb(223, 196, 132);">
node</span><span class="pun" style="color: rgb(238, 238, 238);">.</span><span class="pln" style="color: rgb(223, 196, 132);">exe C</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);">\dev\jashkenas</span><span class="pun" style="color: rgb(238, 238, 238);">-</span><span class="pln" style="color: rgb(223, 196, 132);">coffee</span><span class="pun" style="color: rgb(238, 238, 238);">-</span><span class="pln" style="color: rgb(223, 196, 132);">script</span><span class="pun" style="color: rgb(238, 238, 238);">-</span><span class="lit" style="color: rgb(201, 120, 62);">127653b</span><span class="pln" style="color: rgb(223, 196, 132);">\b</span><span class="kwd" style="color: rgb(232, 237, 151);">in</span><span class="pln" style="color: rgb(223, 196, 132);">\coffee </span><span class="pun" style="color: rgb(238, 238, 238);">%*</span>

儲存檔案。之後把這個coffee.cmd 放到nodejs目錄內。

二、.使用

在dev或任何其他目錄中，建立一個目錄，比如js。

在這個文件下，我們建立一個檔案，命名為test.coffee。

這時開啟cmd，打入下面的命令:

<span class="pun" style="color: rgb(238, 238, 238);">></span><span class="pln" style="color: rgb(223, 196, 132);"> cd C</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);">\dev\js</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="pun" style="color: rgb(238, 238, 238);">></span><span class="pln" style="color: rgb(223, 196, 132);"> coffee </span><span class="pun" style="color: rgb(238, 238, 238);">-</span><span class="pln" style="color: rgb(223, 196, 132);">w </span><span class="pun" style="color: rgb(238, 238, 238);">-</span><span class="pln" style="color: rgb(223, 196, 132);">c test</span><span class="pun" style="color: rgb(238, 238, 238);">.</span><span class="pln" style="color: rgb(223, 196, 132);">coffee</span><p style="margin-top: 0px; margin-bottom: 8px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8; color: rgb(79, 83, 90);"></p><span class="pln" style="color: rgb(223, 196, 132);">
</span><p style="margin-top: 0px; margin-bottom: 8px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8; color: rgb(79, 83, 90);"><span class="com" style="color: rgb(153, 153, 153);">//-w 的全名是 --watch, 是實時編輯的命令</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="com" style="color: rgb(153, 153, 153);">//-c 的全名是 --compile, 是編譯的命令</span></p>

這時，會看到js目錄中生成了test.js。在編輯器中開啟test.js，可以看到一個匿名函式。這時當我們在test.coffee中打入任何程式碼，儲存後，可以看到test.js被同步更新。

除此之外，我們還可以看到很多其它的命令：

把src目錄中的CoffeeScript檔案目錄樹的js在lib目錄中編譯成平行樹

<span class="pln" style="color: rgb(223, 196, 132);">coffee </span><span class="pun" style="color: rgb(238, 238, 238);">--</span><span class="pln" style="color: rgb(223, 196, 132);">compile </span><span class="pun" style="color: rgb(238, 238, 238);">--</span><span class="pln" style="color: rgb(223, 196, 132);">output lib</span><span class="pun" style="color: rgb(238, 238, 238);">/</span><span class="pln" style="color: rgb(223, 196, 132);"> src</span><span class="pun" style="color: rgb(238, 238, 238);">/</span>

把多個檔案串連成一個檔案

<span class="pln" style="color: rgb(223, 196, 132);">coffee </span><span class="pun" style="color: rgb(238, 238, 238);">--</span><span class="pln" style="color: rgb(223, 196, 132);">join project</span><span class="pun" style="color: rgb(238, 238, 238);">.</span><span class="pln" style="color: rgb(223, 196, 132);">js </span><span class="pun" style="color: rgb(238, 238, 238);">--</span><span class="pln" style="color: rgb(223, 196, 132);">compile src</span><span class="com" style="color: rgb(153, 153, 153);">/*.coffee</span>

三、使用例項

(一) 函式

如果我們輸入下面的程式碼：

<span class="pln" style="color: rgb(223, 196, 132);">square </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">x</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">-></span><span class="pln" style="color: rgb(223, 196, 132);"> x </span><span class="pun" style="color: rgb(238, 238, 238);">*</span><span class="pln" style="color: rgb(223, 196, 132);"> x</span>

在儲存後，看生成的檔案，我們可以看到檔案的最上方有 square 變數的宣告，下面我們把一個匿名函式分配給了這個變數：

<span class="kwd" style="color: rgb(232, 237, 151);">var</span><span class="pln" style="color: rgb(223, 196, 132);"> square</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
square </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="kwd" style="color: rgb(232, 237, 151);">function</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">x</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">{</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    </span><span class="kwd" style="color: rgb(232, 237, 151);">return</span><span class="pln" style="color: rgb(223, 196, 132);"> x </span><span class="pun" style="color: rgb(238, 238, 238);">*</span><span class="pln" style="color: rgb(223, 196, 132);"> x</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="pun" style="color: rgb(238, 238, 238);">};</span>

當我們再輸入下面的程式碼時:

<span class="pln" style="color: rgb(223, 196, 132);">cube </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">x</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">-></span><span class="pln" style="color: rgb(223, 196, 132);"> square</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">x</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">*</span><span class="pln" style="color: rgb(223, 196, 132);"> x</span>

會顯示為：

<span class="kwd" style="color: rgb(232, 237, 151);">var</span><span class="pln" style="color: rgb(223, 196, 132);"> cube</span><span class="pun" style="color: rgb(238, 238, 238);">,</span><span class="pln" style="color: rgb(223, 196, 132);"> square</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
square </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="kwd" style="color: rgb(232, 237, 151);">function</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">x</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">{</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    </span><span class="kwd" style="color: rgb(232, 237, 151);">return</span><span class="pln" style="color: rgb(223, 196, 132);"> x </span><span class="pun" style="color: rgb(238, 238, 238);">*</span><span class="pln" style="color: rgb(223, 196, 132);"> x</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="pun" style="color: rgb(238, 238, 238);">};</span><p style="margin-top: 0px; margin-bottom: 8px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8; color: rgb(79, 83, 90);"></p><span class="pln" style="color: rgb(223, 196, 132);">
</span><p style="margin-top: 0px; margin-bottom: 8px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8; color: rgb(79, 83, 90);"><span class="pln" style="color: rgb(223, 196, 132);">cube </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="kwd" style="color: rgb(232, 237, 151);">function</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">x</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">{</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    </span><span class="kwd" style="color: rgb(232, 237, 151);">return</span><span class="pln" style="color: rgb(223, 196, 132);"> square</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">x</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">*</span><span class="pln" style="color: rgb(223, 196, 132);"> x</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="pun" style="color: rgb(238, 238, 238);">};</span></p>

函式也可能有引數的預設值。用一個非空的引數覆蓋預設值。

<span class="pln" style="color: rgb(223, 196, 132);">fill </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">container</span><span class="pun" style="color: rgb(238, 238, 238);">,</span><span class="pln" style="color: rgb(223, 196, 132);"> liquid </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">"coffee"</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">-></span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="str" style="color: rgb(255, 132, 0);">"Filling the #{container} with #{liquid}..."</span>

會變為：

<span class="kwd" style="color: rgb(232, 237, 151);">var</span><span class="pln" style="color: rgb(223, 196, 132);"> fill</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
fill </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="kwd" style="color: rgb(232, 237, 151);">function</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">container</span><span class="pun" style="color: rgb(238, 238, 238);">,</span><span class="pln" style="color: rgb(223, 196, 132);"> liquid</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">{</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="kwd" style="color: rgb(232, 237, 151);">if</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="pln" style="color: rgb(223, 196, 132);">liquid </span><span class="pun" style="color: rgb(238, 238, 238);">==</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="kwd" style="color: rgb(232, 237, 151);">null</span><span class="pun" style="color: rgb(238, 238, 238);">)</span><span class="pln" style="color: rgb(223, 196, 132);"> liquid </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">"coffee"</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="kwd" style="color: rgb(232, 237, 151);">return</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">"Filling the "</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">+</span><span class="pln" style="color: rgb(223, 196, 132);"> container </span><span class="pun" style="color: rgb(238, 238, 238);">+</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">" with "</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">+</span><span class="pln" style="color: rgb(223, 196, 132);"> liquid </span><span class="pun" style="color: rgb(238, 238, 238);">+</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">"..."</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="pun" style="color: rgb(238, 238, 238);">};</span>

(二) 物件

下面的CoffeeScript:

<span class="pln" style="color: rgb(223, 196, 132);">kids </span><span class="pun" style="color: rgb(238, 238, 238);">=</span>
<span class="pln" style="color: rgb(223, 196, 132);">
brother</span><span class="pun" style="color: rgb(238, 238, 238);">:</span>
<span class="pln" style="color: rgb(223, 196, 132);">
name</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">"Max"</span>
<span class="pln" style="color: rgb(223, 196, 132);">
age</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="lit" style="color: rgb(201, 120, 62);">11</span>
<span class="pln" style="color: rgb(223, 196, 132);">
sister</span><span class="pun" style="color: rgb(238, 238, 238);">:</span>
<span class="pln" style="color: rgb(223, 196, 132);">
name</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">"Ida"</span>
<span class="pln" style="color: rgb(223, 196, 132);">
age</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="lit" style="color: rgb(201, 120, 62);">9</span>

會顯示為：

<span class="pln" style="color: rgb(223, 196, 132);">kids </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">{</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    brother</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">{</span>
<span class="pln" style="color: rgb(223, 196, 132);">
        name</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">"Max"</span><span class="pun" style="color: rgb(238, 238, 238);">,</span>
<span class="pln" style="color: rgb(223, 196, 132);">
        age</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="lit" style="color: rgb(201, 120, 62);">11</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    </span><span class="pun" style="color: rgb(238, 238, 238);">},</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    sister</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">{</span>
<span class="pln" style="color: rgb(223, 196, 132);">
        name</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">"Ida"</span><span class="pun" style="color: rgb(238, 238, 238);">,</span>
<span class="pln" style="color: rgb(223, 196, 132);">
        age</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="lit" style="color: rgb(201, 120, 62);">9</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    </span><span class="pun" style="color: rgb(238, 238, 238);">}</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="pun" style="color: rgb(238, 238, 238);">};</span>

在JavaScript中，你不能使用保留字(???reserved words)。比如在沒有用字串引用它們的情況下，把class作為物件的屬性。

CoffeeScript注意到用作鍵的物件和他們的報價為您的保留字，所以你不必擔心它（例如，當使用jQuery）。下面這段：

<span class="pln" style="color: rgb(223, 196, 132);">$</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="str" style="color: rgb(255, 132, 0);">'.account'</span><span class="pun" style="color: rgb(238, 238, 238);">).</span><span class="pln" style="color: rgb(223, 196, 132);">attr </span><span class="kwd" style="color: rgb(232, 237, 151);">class</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">'active'</span>
<span class="pln" style="color: rgb(223, 196, 132);">
log </span><span class="kwd" style="color: rgb(232, 237, 151);">object</span><span class="pun" style="color: rgb(238, 238, 238);">.</span><span class="kwd" style="color: rgb(232, 237, 151);">class</span>

會顯示為：

<span class="pln" style="color: rgb(223, 196, 132);">$</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="str" style="color: rgb(255, 132, 0);">'.account'</span><span class="pun" style="color: rgb(238, 238, 238);">).</span><span class="pln" style="color: rgb(223, 196, 132);">attr</span><span class="pun" style="color: rgb(238, 238, 238);">({</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="str" style="color: rgb(255, 132, 0);">"class"</span><span class="pun" style="color: rgb(238, 238, 238);">:</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="str" style="color: rgb(255, 132, 0);">'active'</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="pun" style="color: rgb(238, 238, 238);">});</span>
<span class="pln" style="color: rgb(223, 196, 132);">
log</span><span class="pun" style="color: rgb(238, 238, 238);">(</span><span class="kwd" style="color: rgb(232, 237, 151);">object</span><span class="pun" style="color: rgb(238, 238, 238);">[</span><span class="str" style="color: rgb(255, 132, 0);">"class"</span><span class="pun" style="color: rgb(238, 238, 238);">]);</span>

（三）詞法作用域和變數安全

這種行為實際上是相同於Ruby的區域性變數作用域。

outer是不能重新宣告在內部函式，因為它是已經在作用域內;

另一方面，inner在函式內部，不應該能夠改變同名的外部變數的值，因此有自身的宣告。

所以下面一段：

<span class="pln" style="color: rgb(223, 196, 132);">outer </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="lit" style="color: rgb(201, 120, 62);">1</span>
<span class="pln" style="color: rgb(223, 196, 132);">
changeNumbers </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">-></span>
<span class="pln" style="color: rgb(223, 196, 132);">
inner </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">-</span><span class="lit" style="color: rgb(201, 120, 62);">1</span>
<span class="pln" style="color: rgb(223, 196, 132);">
outer </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="lit" style="color: rgb(201, 120, 62);">10</span>
<span class="pln" style="color: rgb(223, 196, 132);">
inner </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> changeNumbers</span><span class="pun" style="color: rgb(238, 238, 238);">()</span>

會變成：

<span class="kwd" style="color: rgb(232, 237, 151);">var</span><span class="pln" style="color: rgb(223, 196, 132);"> changeNumbers</span><span class="pun" style="color: rgb(238, 238, 238);">,</span><span class="pln" style="color: rgb(223, 196, 132);"> inner</span><span class="pun" style="color: rgb(238, 238, 238);">,</span><span class="pln" style="color: rgb(223, 196, 132);"> outer</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
outer </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="lit" style="color: rgb(201, 120, 62);">1</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
changeNumbers </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="kwd" style="color: rgb(232, 237, 151);">function</span><span class="pun" style="color: rgb(238, 238, 238);">()</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">{</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    </span><span class="kwd" style="color: rgb(232, 237, 151);">var</span><span class="pln" style="color: rgb(223, 196, 132);"> inner</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    inner </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="pun" style="color: rgb(238, 238, 238);">-</span><span class="lit" style="color: rgb(201, 120, 62);">1</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
    </span><span class="kwd" style="color: rgb(232, 237, 151);">return</span><span class="pln" style="color: rgb(223, 196, 132);"> outer </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> </span><span class="lit" style="color: rgb(201, 120, 62);">10</span><span class="pun" style="color: rgb(238, 238, 238);">;</span>
<span class="pln" style="color: rgb(223, 196, 132);">
</span><span class="pun" style="color: rgb(238, 238, 238);">};</span>
<span class="pln" style="color: rgb(223, 196, 132);">
inner </span><span class="pun" style="color: rgb(238, 238, 238);">=</span><span class="pln" style="color: rgb(223, 196, 132);"> changeNumbers</span><span class="pun" style="color: rgb(238, 238, 238);">();</span>

BoltDB 入門實踐
2019-10-02
MQ 入門實踐
2021-04-19
MQ
Docker入門實踐
2018-08-07
Docker
TypeScript入門與實踐
2018-08-25
TypeScript
redux 入門到實踐
2018-12-10
Redux
GitHub Actions 入門實踐
2020-11-11
Github
locsut 入門與實踐
2021-01-05
Kafka 入門與實踐
2018-04-12
Kafka
Docker 入門與實踐
2018-04-18
Docker
SASS入門與實踐
2017-12-14
Docker實踐(1)—入門
2014-07-24
Docker
GraphQL 從入門到實踐
2019-03-12
Mybatis-Plus入門實踐
2022-05-10
MyBatis
Nacos入門學習&實踐
2021-07-18
Redis從入門到實踐
2018-02-24
Redis
nginx從入門到實踐
2017-12-05
Nginx
GitOps快速入門與實踐
2020-04-07
Git
Dubbo入門(2) – 簡單實踐
2019-03-04
系統思維實踐入門
2021-07-27
Android入門（五）：實踐技巧
2018-09-21
Android
Mobx入門和較佳實踐
2018-12-19
Git與Github入門實踐（上）
2020-12-25
Github
RPC協議實踐入門
2020-11-17
RPC協議
Open Policy Agent(OPA) 入門實踐
2021-12-07
PM2入門實踐指南
2018-06-26
微信小程式入門與實踐
2018-04-26
微信小程式
Puppeteer的入門教程和實踐
2017-10-26
Dubbo入門(2) - 簡單實踐
2018-05-18
GraphQL 搭配 Koa 最佳入門實踐
2018-01-08
【docker】Docker入門到實踐筆記
2019-03-17
Docker筆記
Docker從入門到動手實踐
2019-05-12
Docker
GDB除錯-從入門到實踐
2022-01-05
除錯
Jenkins持續整合入門實踐
2018-08-09
Jenkins
CSS Modules 入門及 React 中實踐
2017-03-25
CSSReact
Python入門到實踐-變數
2017-10-31
Python變數
Elm入門實踐（三）——進階篇
2016-06-27
Kubeflow實戰: 入門介紹與部署實踐
2020-08-07
【機器學習入門與實踐】合集入門必看系列，含資料探勘專案實戰，適合新人入門
2023-04-17
機器學習

CoffeeScript入門實踐

原文來自 http://www.w3ctech.com/p/1065

本期節目將分為3個部分

一、安裝的過程

二、.使用

三、使用例項

(一) 函式

(二) 物件

（三） 詞法作用域和變數安全

相關文章

（三）詞法作用域和變數安全