发现一篇诗情画意的JS文章，深入浅出，形象生动。从JS联系到佛教世界观，进而揭示了JS的本质。想必作者一定是位深谙佛学的编程诗人。如果阅读过程中能和作者产生共鸣，恭喜你，你已经离大师不远了。
http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html

最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。

一、什么是闭包？

“官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话，因为他描述的太学术。其实这句话通俗的来说就是：JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。看下面这段代码：

function a() {
    var i = 0;
    function b() {
        alert(++i);
    }
    return b;
}
var c = a();
c();

这段代码有两个特点：

1. 函数b嵌套在函数a内部；
2. 函数a返回函数b。

引用关系如图：

这样在执行完var c=a()后，变量c实际上是指向了函数b，b中用到了变量i，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：

当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个我们通常所谓的“闭包”。

让我们说的更透彻一些。所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标 对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目 标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新 的值，和上次那次调用的是各自独立的。

为了更深刻的理解闭包，下面让我们继续探索闭包的作用和效果。

(转载请注明出处:http://www.felixwoo.com/archives/247)

二、闭包有什么作用和效果？

简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但你一定能看懂。理解闭包需要循序渐进的过程。
在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。

那么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引用，因此函数a和b互相引用但又不被外界打扰(被外界引用)，函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

(转载请注明出处:http://www.felixwoo.com/archives/247)

三、闭包的微观世界

如果要更加深入的了解闭包以及函数a和嵌套函数b的关系，我们需要引入另外几个概念：函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

1. 当定义函数a的时候，js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”，如果a是一个全局函数，则scope chain中只有window对象。
2. 当执行函数a的时候，a会进入相应的执行环境(excution context)。
3. 在创建执行环境的过程中，首先会为a添加一个scope属性，即a的作用域，其值就为第1步中的scope chain。即a.scope=a的作用域链。
4. 然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象，但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后，把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象：a的活动对象和window对象。
5. 下一步是在活动对象上添加一个arguments属性，它保存着调用函数a时所传递的参数。
6. 最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中，完成了函数b的的定义，因此如同第3步，函数b的作用域链被设置为b所被定义的环境，即a的作用域。

到此，整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c，又函数b的作用域链包含了对函数a的活动对象的引用，也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用，函数b又依赖函数a，因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象，如下图所示：

如图所示，当在函数b中访问一个变量的时候，搜索顺序是：

1. 先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依次查找，直到找到为止。
2. 如果函数b存在prototype原型对象，则在查找完自身的活动对象后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。
3. 如果整个作用域链上都无法找到，则返回undefined。

小结，本段中提到了两个重要的词语：函数的定义与执行。文中提到函数的作用域是在定义函数时候就已经确定，而不是在执行的时候确定（参看步骤1和3）。用一段代码来说明这个问题：

function f(x) {
    var g = function () { return x; }
    return g;
}
var h = f(1);
alert(h());

这段代码中变量h指向了f中的那个匿名函数(由g返回)。

• 假设函数h的作用域是在执行alert(h())确定的，那么此时h的作用域链是：h的活动对象->alert的活动对象->window对象。
• 假设函数h的作用域是在定义时确定的，就是说h指向的那个匿名函数在定义的时候就已经确定了作用域。那么在执行的时候，h的作用域链为：h的活动对象->f的活动对象->window对象。

如果第一种假设成立，那输出值就是undefined；如果第二种假设成立，输出值则为1。

运行结果证明了第2个假设是正确的，说明函数的作用域确实是在定义这个函数的时候就已经确定了。

(转载请注明出处:http://www.felixwoo.com/archives/247)

四、闭包的应用场景

1. 保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2. 在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。
3. 通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）推荐阅读：http://javascript.crockford.com/private.html
   私有属性和方法在Constructor外是无法被访问的

   function Constructor(...) {
       var that = this;
       var membername = value;
       function membername(...) {...}
   }

以上3点是闭包最基本的应用场景，很多经典案例都源于此。

(转载请注明出处:http://www.felixwoo.com/archives/247)

五、Javascript的垃圾回收机制

在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

(转载请注明出处:http://www.felixwoo.com/archives/247)

六、结语

理解JavaScript的闭包是迈向高级JS程序员的必经之路，理解了其解释和运行机制才能写出更为安全和优雅的代码。如果您对本文有任何的建议和疑问，欢迎留言。(转载请注明出处:http://www.felixwoo.com/archives/247)

Javascript中会经常用到setTimeout来推迟一个函数的执行，如：

setTimeout(function(){alert("Hello World");},1000)

会在执行到这句话后延迟1秒钟来弹出alert窗口。那么再看这一段：

function a() {
    setTimeout(function() {alert(1)}, 0);
    alert(2);
}
a();

注意这段代码中的setTimeout延迟设为了0，就是延迟0毫秒，貌似是不做任何延迟立刻执行，即1,2。但实际的执行结果确是2,1。为什么？这得从Javascript调用堆栈(call stack)和setTimeout的功能说起。

首先，JavaScript是单线程的，即同一时间只执行一条代码，所以每一个JavaScript代码执行块会“阻塞”其它异步事件的执行。其次，和其他的编程语言一样，Javascript中的函数调用也是通过堆栈实现的。在执行函数a的时候，a先入栈，如果不给alert(1)加setTimeout，那么alert(1)第2个入栈，最后是alert(2)。但现在给alert(1)加上setTimeout后，alert(1)就被加入到了一个新的堆栈中等待，并“尽可能快”的执行。这个尽可能快就是指在a的堆栈完成后就立刻执行，因此实际的执行结果就是先alert(2)，再alert(1)。在这里setTimeout实际上是让alert(1)脱离了当前函数调用堆栈。看下面一个例子：

<input name="input" onkeydown="alert(this.value)" type="text" value="a" />

这样一段函数意图是每输入一个字符就把当前input里的所有字符都alert出来，但实际效果确是alert出按键之前的内容。这里，我们就可以利用setTimeout(0)来实现。

<input onkeydown="var me=this; setTimeout(function(){alert(me.value)}, 0)" name="input" type="text" value="a" />

这样当onkeydown事件触发的时候，alert就被放入了下一个调用堆栈，一旦onkeydown事件触发的堆栈关闭后就开始执行。当然浏览器还有个onkeyup事件也可以实现我们的需求。

这样的setTimeout用法在实际项目中还是会时常遇到。比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM，如果再这个函数堆栈中把页面背景先从白色设为红色，再设回白色，那么浏览器会认为DOM没有发生任何改变而忽略这两句话，因此我们可以通过setTimeout把“设回白色”函数加入下一个堆栈，那么就可以确保背景颜色发生过改变了（虽然速度很快可能无法被察觉）。

总之，setTimeout增加了Javascript函数调用的灵活性，为函数执行顺序的调度提供极大便利。

推荐阅读jQuery作者John的一篇文章：How JavaScript Timers Work，你会对JavaScript单线程本质和setTimeout以及setInterval有更加深刻的理解。

在网上看了一篇不错的JavaScript基础知识文章，感谢Realazy的辛苦翻译，后来才得知原来Realazy就是我同事的朋友，晕，世界真小。（PS：CSDN上的名人孟子e章竟然也是我同事的哥们，ft。。。）

看了这篇文章才发现越是基础的东西越能展示水平，这也就是为什么很多朋友向我索取原代码我都没有回复，并非不想分享，而是觉得自己的作品还不足以达到供别人学习的程度，还需努力。

引用：http://realazy.org/blog/2007/07/18/scope-in-javascript/

作用域（scope）是JavaScript语言的基石之一，在构建复杂程序时也可能是最令我头痛的东西。记不清多少次在函数之间传递控制后忘记 this关键字引用的究竟是哪个对象，甚至，我经常以各种不同的混乱方式来曲线救国，试图伪装成正常的代码，以我自己的理解方式来找到所需要访问的变量。

这篇文章将正面解决这个问题：简述上下文（context）和作用域的定义，分析可以让我们掌控上下文的两种方法，最后深入一种高效的方案，它能有效解决我所碰到的90%的问题。

我在哪儿？你又是谁
JavaScript 程序的每一个字节都是在这个或那个运行上下文（execution context）中执行的。你可以把这些上下文想象为代码的邻居，它们可以给每一行代码指明：从何处来，朋友和邻居又是谁。没错，这是很重要的信息，因为 JavaScript社会有相当严格的规则，规定谁可以跟谁交往。运行上下文则是有大门把守的社区而非其内开放的小门。

我们通常可以把这些社会边界称为作用域，并且有充足的重要性在每一位邻居的宪章里立法，而这个宪章就是我们要说的上下文的作用域链（scope chain）。在特定的邻里关系内，代码只能访问它的作用域链内的变量。与超出它邻里的变量比起来，代码更喜欢跟本地（local，即局部）的打交道。

具体地说，执行一个函数会创建一个不同的运行上下文，它会将局部作用域增加到它所定义的作用域链内。JavaScript通过作用域链的局部向全局攀升方式，在特定的上下文中解析标识符。这表示，本级变量会优先于作用域链内上一级拥有相同名字的变量。显而易见，当我的好友们一起谈论”Mike West”（本文原作者）时，他们说的就是我，而非bluegrass singer 或是Duke professor, 尽管（按理说）后两者著名多了。

让我们看些例子来探索这些含义：

<script type="text/javascript">
var ima_celebrity = "Everyone can see me! I'm famous!",
the_president = "I'm the decider!";

function pleasantville() {
var the_mayor = "I rule Pleasantville with an iron fist!",
ima_celebrity = "All my neighbors know who I am!";

function lonely_house() {
var agoraphobic = "I fear the day star!",
a_cat = "Meow.";
}
}
</script>

我们的全明星，ima_celebrity, 家喻户晓（所有人都认识她）。她在政治上积极活跃，敢于在一个相当频繁的基层上叫嚣总统（即the_president）。她会为碰到的每一个人签名和回答问题。就是说，她不会跟她的粉丝有私下的联系。她相当清楚粉丝们的存在 并有他们自己某种程度上的个人生活，但也可以肯定的是，她并不知道粉丝们在干嘛，甚至连粉丝的名字都不知道。

而在欢乐市（pleasantville）内，市长（the_mayor）是众所周知的。她经常在她的城镇内散步，跟她的选民聊天、握手并亲吻小孩。因为欢乐市（pleasantville）还算比较大且重要的邻居，市长在她办公室内放置一台红色电话，它是一条可以直通总统的7×24热线。她还可以看到市郊外山上的孤屋（lonely_house），但从不在意里面住着的是谁。

而孤屋（lonely_house）是一个自我的世界。旷恐患者时常在里面囔囔自语，玩纸牌和喂养一个小猫（a_cat）。他偶尔会给市长（the_mayor）打电话咨询一些本地的噪音管制，甚至在本地新闻看到ima_celebrity后会写些粉丝言语给她（当然，这是pleasantville内的ima_celebrity）。

this? 那是虾米？
每一个运行上下文除了建立一个作用域链外，还提供一个名为this的关键字。它的普遍用法是，this作为一个独特的功能，为邻里们提供一个可访问到它的途径。但总是依赖于这个行为并不可靠：取决于我们如何进入一个特定邻居的具体情况，this表示的完全可能是其他东西。事实上，我们如何进去邻居家本身，通常恰恰就是this所指。有四种情形值得特别注意：

呼叫对象的方法
在经典的面向对象编程中，我们需要识别和引用当前对象。this极好地扮演了这个角色，为我们的对象提供了自我查找的能力，并指向它们本身的属性。

<script type="text/javascript">
var deep_thought = {
the_answer: 42,
ask_question: function () {
return this.the_answer;
}
};

var the_meaning = deep_thought.ask_question();
</script>

这个例子建立了一个名为deep_thought的对象，设置其属性 the_answer为42，并创建了一个名为ask_question 的方法（method）。当deep_thought.ask_question()执行时， JavaScript为函数的呼叫建立了一个运行上下文，通过”.“运算符把this指向被引用的对象，在此是deep_thought这个对象。之后这个方法就可以通过this在镜子中找到它自身的属性，返回保存在 this.the_answer中的值：42。

构造函数
类似地，当定义一个作为构造器的使用new关键字的函数时，this可以用来引用刚创建的对象。让我们重写一个能反映这个情形的例子：

<script type="text/javascript">
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
return this.the_answer;
}
}

var deep_thought = new BigComputer(42);
var the_meaning = deep_thought.ask_question();
</script>

我们编写一个函数来创建BigComputer对象，而不是直白地创建 deep_thought对象，并通过new关键字实例化deep_thought为一个实例变量。当new BigComputer()被执行，后台透明地创建了一个崭新的对象。呼叫BigComputer后，它的this关键字被设置为指向新对象的引用。这个函数可以在this上设置属性和方法，最终它会在BigComputer执行后透明地返回。

尽管如此，需要注意的是，那个deep_thought.the_question()依然可以像从前一样执行。那这里发生了什么事？为何this在the_question内与BigComputer内会有所不同？简单地说，我们是通过new进入BigComputer的，所以this表示“新（new）的对象”。在另一方面，我们通过 deep_thought进入the_question，所以当我们执行该方法时，this表示 “deep_thought所引用的对象”。this并不像其他的变量一样从作用域链中读取，而是在上下文的基础上，在上下文中重置。

函数呼叫
假如没有任何相关对象的奇幻东西，我们只是呼叫一个普通的、常见的函数，在这种情形下this表示的又是什么呢？

<script type="text/javascript">
function test_this() {
return this;
}
var i_w
onder_what_this_is = test_this();
</script>

在这样的场合，我们并不通过new来提供上下文，也不会以某种对象形式在背后偷偷提供上下文。在此， this默认下尽可能引用最全局的东西：对于网页来说，这就是 window对象。

事件处理函数
比普通函数的呼叫更复杂的状况，先假设我们使用函数去处理的是一个onclick事件。当事件触发我们的函数运行，此处的this表示的是什么呢？不凑巧，这个问题不会有简单的答案。

如果我们写的是行内（inline）事件处理函数，this引用的是全局window对象：

<script type="text/javascript">
function click_handler() {
alert(this); // 弹出 window 对象
}
</script>
...
<button id='thebutton' onclick='click_handler()'>Click me!</button>

但是，如果我们通过JavaScript来添加事件处理函数，this引用的是生成该事件的DOM元素。（注意：此处的事件处理非常简洁和易于阅读，但其他的就别有洞天了。请使用真正的addEvent函数取而代之）：

<script type="text/javascript">
function click_handler() {
alert(this); // 弹出按钮的DOM节点
}

function addhandler() {
document.getElementById('thebutton').onclick = click_handler;
}

window.onload = addhandler;
</script>
...
<button id='thebutton'>Click me!</button>

复杂情况
让我们来短暂地运行一下这个最后的例子。我们需要询问deep_thought一个问题，如果不是直接运行click_handler而是通过点击按钮的话，那会发生什么事情？解决此问题的代码貌似十分直接，我们可能会这样做：

<script type="text/javascript">
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
alert(this.the_answer);
}
}

function addhandler() {
var deep_thought = new BigComputer(42),
the_button = document.getElementById('thebutton');

the_button.onclick = deep_thought.ask_question;
}

window.onload = addhandler;
</script>

很完美吧？想象一下，我们点击按钮，deep_thought.ask_question被执行，我们也得到了“42”。但是为什么浏览器却给我们一个undefined? 我们错在何处？

其实问题显而易见：我们给ask_question传递一个引用，它作为一个事件处理函数来执行，与作为对象方法来运行的上下文并不一样。简而言之，ask_question中的 this关键字指向了产生事件的DOM元素，而不是在BigComputer的对象中。DOM元素并不存在一个the_answer属性，所以我们得到的是 undefined而不是”42″. setTimeout也有类似的行为，它在延迟函数执行的同时跑到了一个全局的上下文中去了。

这个问题会在程序的所有角落时不时突然冒出，如果不细致地追踪程序的每一个角落的话，还是一个非常难以排错的问题，尤其在你的对象有跟DOM元素或者window对象同名属性的时候。

使用.apply()和.call()掌控上下文
在点击按钮的时候，我们真正需要的是能够咨询deep_thought一个问题，更进一步说，我们真正需要的是，在应答事件和setTimeout的呼叫时，能够在自身的本原上下文中呼叫对象的方法。有两个鲜为人知的JavaScript方法，apply和call，在我们执行函数呼叫时，可以曲线救国帮我们达到目的，允许我们手工覆盖this的默认值。我们先来看call：

<script type="text/javascript">
var first_object = {
num: 42
};
var second_object = {
num: 24
};

function multiply(mult) {
return this.num * mult;
}

multiply.call(first_object, 5); // 返回 42 * 5
multiply.call(second_object, 5); // 返回 24 * 5
</script>

在这个例子中，我们首先定义了两个对象，first_object和second_object，它们分别有自己的num属性。然后定义了一个multiply函数，它只接受一个参数，并返回该参数与this所指对象的num属性的乘积。如果我们呼叫函数自身，返回的答案极大可能是undefined，因为全局window对象并没有一个num属性除非有明确的指定。我们需要一些途径来告诉multiply里面的this关键字应该引用什么。而multiply的call方法正是我们所需要的。

call的第一个参数定义了在业已执行的函数内this的所指对象。其余的参数则传入业已执行的函数内，如同函数的自身呼叫一般。所以，当执行multiply.call(first_object, 5)时，multiply被呼叫，5传入作为第一个参数，而this关键字被设置为first_object的引用。同样，当执行multiply.call(second_object, 5)时，5传入作为第一个参数，而this关键字被设置为second_object的引用。

apply以call一样的方式工作，但可以让你把参数包裹进一个数组再传递给呼叫函数，在程序性生成函数呼叫时尤为有用。使用apply重现上一段代码，其实区别并不大：

<script type="text/javascript">
...

multiply.apply(first_object, [5]); // 返回 42 * 5
multiply.apply(second_object, [5]); // 返回 24 * 5
</script>

apply和call本身都非常有用，并值得贮藏于你的工具箱内，但对于事件处理函数所改变的上下文问题，也只是送佛到西天的中途而已，剩下的还是得我们来解决。在搭建处理函数时，我们自然而然地认为，只需简单地通过使用call来改变this的含义即可：

function addhandler() {
var deep_thought = new BigComputer(42),
the_button = document.getElementById('thebutton');

the_button.onclick = deep_thought.ask_question.call(deep_thought);
}

代码之所以有问题的理由很简单：call立即执行了函数（译注：其实可以用一个匿名函数封装，例如the_button.onclick = function(){deep_thought.ask_question.call(deep_thought);}，但比起即将讨论的bind来，依然不够优雅）。我们给onclcik处理函数一个函数执行后的结果而非函数的引用。所以我们需要利用另一个JavaScript特色，以解决这个问题。

.bind()之美
我并不是 Prototype JavaScript framework的忠实粉丝，但我对它的总体代码质量印象深刻。具体而言，它为Function对象增加一个简洁的补充，对我管理函数呼叫执行后的上下文产生了极大的正面影响：bind跟call一样执行相同的常见任务，改变函数执行的上下文。不同之处在于bind返回的是函数引用可以备用，而不是call的立即执行而产生的最终结果。

如果需要简化一下bind函数以抓住概念的重点，我们可以先把它插进前面讨论的乘积例子中去，看它究竟是如何工作的。这是一个相当优雅的解决方案：

<script type="text/javascript">
var first_object = {
num: 42
};
var second_object = {
num: 24
};

function multiply(mult) {
return this.num * mult;
}

Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply(obj, arguments);
};

return temp;
}

var first_multiply = multiply.bind(first_object);
first_multiply(5); // 返回 42 * 5

var second_multiply = multiply.bind(second_object);
second_multiply(5); // 返回 24 * 5
</script>

首先，我们定义了first_object, second_object和multiply函数，一如既往。细心处理这些后，我们继续为Function对象的prototype定义一个bind方法，这样的话，我们程序里的函数都有一个bind方法可用。当执行multiply.bind(first_object)时，JavaScript为bind方法创建一个运行上下文，把this置为multiply函数的引用，并把第一个参数obj置为first_object的引用。目前为止，一切皆顺。

这个解决方案的真正天才之处在于method的创建，置为this的引用所指（即multiply函数自身）。当下一行的匿名函数被创建，method通过它的作用域链访问，obj亦然（不要在此使用this, 因为新创建的函数执行后，this会被新的、局部的上下文覆盖）。这个this的别名让apply执行multiply函数成为可能，而传递obj则确保上下文的正确。用计算机科学的话说，temp是一个闭包（closure），它可以保证，需要在first_object的上下文中执行multiply，bind呼叫的最终返回可以用在任何的上下文中。

这才是前面说到的事件处理函数和setTimeout情形所真正需要的。以下代码完全解决了这些问题，绑定deep_thought.ask_question方法到deep_thought的上下文中，因此能在任何事件触发时都能正确运行：

function addhandler() {
var deep_thought = new BigComputer(42),
the_button = document.getElementById('thebutton');

the_button.onclick = deep_thought.ask_question.bind(deep_thought);
}

漂亮。

转自：http://benchwang.spaces.live.com/blog/cns!1621B5CAD6EB680B!149.entry

Adam McCrea 写了篇使用 JavaScript 进行元编程的文章: Metaprogamming JavaScript。
该文用一个例子来说明元编程。例子很简单，一个 Form 包中两个下拉列表 country 和 state，业务需求是 country 下拉列表中选中“United States”则要显示 state 列表，否则隐藏该下拉列表。处理该逻辑的代码如下：

Event.observe(window, "load", function() {
Event.observe($("country"), "change", function() {
if ($F("country") == "United States")
$("state-field").show();
else
$("state-field").hide();
});
});

这里用到的对象和方法是 Prototype 对 JavaScript 的扩展。Prototype 是旨在简化动态 Web 程序开发的 JavaScript Framework. 详见 http://www.prototypejs.org/。在上面代码中：Event.observe 在IE下相当于 attachEvent，用于注册事件处理函数。这是注册了 window.onload 和 country.onchange 事件处理程序。$() 是 document.getElementById() 的别名。$F() 会取出 form 中元素当前值。show() 和 hide() 是在 html 元素上增加的方法。通过 prototype 在 html 元素基础上扩展了很多方法。如果想运行上面代码，需要下载 prototype.js 并放置在 html 页面相同目录。完整代码如下：

<html>
<head>
<title>Metaprogramming JavaScript - Example 1</title>
<script src="prototype.js"></script>
<script type="text/javascript" charset="utf-8">
Event.observe(window, "load", function() {
Event.observe($("country"), "change", function() {
if ($F("country") == "United States")
$("state-field").show();
else
$("state-field").hide();
});

});
</script>
</head>

<body>
<form>
<p id="country-field">
<label for="country">Country</label>
<select id="country">
<option>United States</option>
<option>Canada</option>
<option>Somewhere Else</option>
</select>
</p>

<p id="state-field">
<label for="state">State</label>
<select id="state">
<option>Ohio</option>
<option>Michigan</option>
<option>Kentucky</option>
</select>
</p>
</form>
</body>
</html>

这些代码满足这样简单的需要没有什么问题。然而随着需求变化，代码会变得繁琐。假如增加如下需求：
增加 province 字段
当 country 为 “Canada” ，显示 province
当 country 为 “United States”，显示 state
当 state 是 “Ohio” 或 “Michigen”，显示 Brutus（很可爱的logo）
根据以上需求，代码修改为：

Event.observe(window, "load", function() {
Event.observe($("country"), "change", function() {
var country = $F("country");
if (country == "United States") {
$("us-state-field").show();
$("province-field").hide();
} else if (country == "Canada") {
$("province-field").show();
$("us-state-field").hide();
} else {
$("us-state-field").hide();
$("province-field").hide();
}
});

Event.observe($("us-state"), "change", function() {
var state = $F("us-state");
if (state == "Ohio" || state == "Michigan")
$("brutus").show();
else
$("brutus").hide();
});

});

新程序使用先前的事件处理和字段检查方式，尝试扩展程序以满足新的需求。然而这样有几个问题，第一个问题这个代码有两个 bug：1)页面初始载入时所有字段都显示出来了，2)隐藏 state 字段不会，不会自动隐藏 Brutus。后者可称为多米诺（domino）bug，因为如果有其他元素依赖于动态显示和隐藏的字段会导致级联影响。

第二个问题是代码的可读性。不容易立即看出这段代码想达到的目的，因而需要很仔细的检查是否遗漏或者不严格符合需求。当需求发生变化，很希望准确地知道代码什么地方需要修改，当作了修改后，需要有信心确信不会影响其它功能。元编程概念就是用于解决这个问题。

Pragmatic Programmer（实用主义程序员？） 把元编程描述为江代码中的细节抽出来放到元数据中。元数据通常为配置文件或者其他的数据源，当然元数据也可以是可执行代码，只要把“what”（是什么）和“how”（如何做）清晰分离开。该方法的思路是使用易于描述问题论域的词汇来编写代码。问题论域即要描述的“what”。这种类型语言称为领域专用语言（domain specific language），缩写为 DSL。在上面例子中，“what”是显示和隐藏 form 中字段的规则。目前的实现是把规则和规则的实现耦合在一起。随着需求变化和特性增加，代码会变得越来越不清晰。如果能够将这些规则抽出来，规则修改不再依赖于实现，会减少应对需求变化的苦恼。如果使用一种比 JavaScript 更接近问题论域的语言来描述规则，会将问题大幅简化。

编写 DSL 可以从考虑描述业务领域使用的词汇入手。这些词汇有时会因为描述人角色不同而不同。例如程序员、用户、业务分析员就会各不相同。在作出上述假设前，可以考虑一个问题：为什么这些不同角色要使用不同词汇呢？不同词汇在沟通中导致信息失真。通过找到在各组人之间通用的词汇，可以消除信息传递，也就可避免信息失真。这种公共的词汇通常可以在需求说明书中找到：

show us-state when country is “United States”
show province when country is “Canada”
show Brutus when state is “Ohio” or “Michian”
DSL 应该尽可能与上述描述一致。

有可能直接使用上述描述。上述描述并不是可执行的 JavaScript 代码，但可以放在文本文件中，使用 JavaScript 读出来进行解析。这种方法虽然可行，但可能过于复杂。如果使用纯文本作为 DSL，它需要和英语同样的灵活性。但我们希望把它作为数据，它需要遵循一些严格的规则。如果 DSL 本身就是可执行代码，可以将问题简化。不足的一面是非程序开发人员可能不会使用这种 DSL。实际上让非开发人员写DSL也是不现实的目标。如果程序元写好了，业务人员能够看懂或者能够修改，就很不错了。怎样处理例子中的需求，把它转成可执行代码？这可能是最难的一步了，具有很强的主管性。在 JavaScript 中，有两个建议：把方法串起来组成类似于句子的结构，灵活的使用方法名。沿着这个思路，可将上面的业务规则描述如下：

show("us-state-field").when("country").is("United States");

/>show("province-field").when("country").is("Canada");
show("brutus").when("us-state").is("Ohio,Michigan");

方法名“when”和“is”本身表意不完整，但在 DSL 上下文中，这些方法串起来，能够表意很好。可以看出 show() 返回一个对象，该对象具有方法 when()；when() 返回一个对象，该对象具有方法 is()。下面给出能够描述第一条规则的简单实现：

function show(fieldToDisplay){
return {
when : function(field){
return {
is: function(value){
if($F(field) == value){
$(fieldToDisplay).show();
}
else{
$(fieldToDisplay).hide();
}
}
}
}
};
};

完整代码如下：

<html>
<head>
<title>Metaprogramming JavaScript - Example 1</title>
<script src="prototype.js"></script>
<script type="text/javascript" charset="utf-8">
function show(fieldToDisplay){
return {
when : function(field){
return {
is: function(value){
if($F(field) == value){
$(fieldToDisplay).show();
}
else{
$(fieldToDisplay).hide();
}
}
}
}
};
};

Event.observe(window, "load", function() {

Event.observe($("country"), "change", function() {
show("us-state-field").when("country").is("United States");
});

});

</script>
</head>

<body>
<form>
<p id="country-field">
<label for="country">Country</label>
<select id="country">
<option>United States</option>
<option>Canada</option>
<option>Somewhere Else</option>
</select>
</p>

<p id="us-state-field">
<label for="state">State</label>
<select id="us-state">
<option>Ohio</option>
<option>Michigan</option>
<option>Kentucky</option>
</select>
</p>
</form>
</body>
</html>

以上只是一个简单示意，在后续文章中会给出完整的实现。

Yahoo! UI Library
http://developer.yahoo.net/yui/index.html
The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX. The UI Library Utilities facilitate the implementation of rich client-side features by enhancing and normalizing the developer's interface to important elements of the browser infrastructure (such as events, in-page HTTP requests and the DOM). The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.

script.aculo.us
http://script.aculo.us/
The Web is changing. The 30-year-old terminal-like technology it was originally is gradually giving way to new ways of doing things. The power of AJAX allows for rich user interaction without the trouble that has bugged traditional web applications. Building upon the wonderful Prototype JavaScript library, script.aculo.us provides you with some great additional ingredients to mix in.

Prototype JavaScript Framework
http://prototype.conio.net/
Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

http://openrico.org/
http://www.rubyonrails.com/
http://www.mochikit.com/