CoffeeScript入门实践

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

在这一期的节目中，我们将介绍下CoffeeScript, 那么什么是CoffeeScript呢？CoffeeScript是一门小语言，也是一个编译器。用CoffeeScript编写的代码，可以编译成JavaScript代码。

CoffeeScript简化了JavaScript的编写，同时运用了JavaScript最佳实践模式。

本期节目将分为3个部分

1. 1. 第一部分中我们讲述安装的过程
2. 2. 第二部分我们将看如何使用它
3. 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>