深入研究JavaScript的匿名函数.doc

深入研究JavaScript的匿名函数

jQuery片段：

(function(){
//这里忽略jQuery所有实现
})();
(function(){ //这里忽略jQuery所有实现 })();
　　半年前初次接触jQuery的时候，我也像其他人一样很兴奋地想看看源码是什么样的。然而，在看到源码的第一眼，我就迷糊了。为什么只有一个匿 名函数又没看到运行（当然是运行了……），就能有jQuery这么个函数库了？于是，我抱着疑问来到CSDN。结果相信现在很多人都很清楚了（因为在我之 后也不乏来者，呵呵~）。当一个匿名函数被括起来，然后再在后面加一个括号，这个匿名函数就能立即运行起来！真神奇哦！

　　嘿嘿！胡闹到此为止。在这一节，我们碰到的jQuery片段是一组立即运行的匿名函数。而这种用法在论坛上也曾引起过激辩——这段代码究竟属不 属于闭包呢？带着这个疑问，我们从基础开始，分析每个关键要素，寻找属于自己的答案。（没错，自己的答案！在我看来，所有理论只是形式，只要它有利于我们 的应用实现，就是可取的——黑猫白猫，抓到老鼠的就是好猫！）

　　要说匿名函数，我们首先要由函数本身说起。函数的定义如下：

函数是将唯一的输出值赋予给每一输入的“法则”。

　　当然，这只是数学上的定义。但是，在计算机编程语言中，函数的定义也八九不离十。因为，我们都知道，计算机中的函数，也类似数学定义中的描述，它是将输入的若干数据，经过代码设定的逻辑操作处理后，返回唯一的输出的一组代码组合块。——当然，特例是，输入的数据为空或输出的数据为空，或者两者都为空。

　　下面，我们先初步了解一下和匿名函数相关的概念。

函数声明（function 语句）
　　要使用一个函数，我们就得首先声明它的存在。而我们最常用的方式就是使用function语句来定义一个函数，如：

function abc(){
// code to process
}
function abc(){ // code to process }
　　当然，你的函数也可以是带参数的，甚至是带返回值的。

function abc(x,y){
return x+y;
}
function abc(x,y){ return x+y; }
　　但是，无论你怎么去定义你的函数，JS解释器都会把它翻译成一个Function对象。例如，你在定义上面的其中一个例子的函数号，再输入如下代码：

alert(typeof(abc));// "function"
　　你的浏览器就会弹出提示框，提示你abc是一个Function对象。那么Function对象究竟是什么呢？

Function 对象
　　Function对象是JavaScript里面的固有对象，所有的函数实际上都是一个Function对象。关于这个方面的讨论，我们留到下一个专题节。我们先看看，Function对象能不能直接运用构造函数创建一个新的函数呢？答案是肯定的。例如：

var abc = new Function("x","y","return x*y;");
alert(abc(2,3)); // "6"
var abc = new Function("x","y","return x*y;"); alert(abc(2,3)); // "6"
　　相信大家现在对如何声明一个函数应该是有所了解了。那么什么才是匿名函数呢？

声明匿名函数
　　顾名思义，匿名函数就是没有实际名字的函数。例如，我们把上面的例子中，函数的名字去掉，再判断一下他是不是一个函数：

alert(typeof function(){});// "function"
alert(typeof function(x,y){return x+y;});// "function"
alert(typeof new Function("x","y","return x*y;"))// "function"
alert(typeof function(){});// "function" alert(typeof function(x,y){return x+y;});// "function" alert(typeof new Function("x","y","return x*y;"))// "function"

　　我们可以很容易地看到，它们全都是Function对象，换言之，他们都是函数，但是他们都有一个特点——没有名字。所以我们把他们称作“匿名函数”。然而，正因为他们没有“名字”，我们也没有办法找到他们。这就引申了如何去调用一个匿名函数的问题了。

匿名函数的调用
　　要调用一个函数，我们必须要有方法定位它，引用它。所以，我们会需要帮它找一个名字。例如：

var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"

　　上面的操作其实就等于换个方式去定义函数，这种用法是我们比较频繁遇到的。例如我们在设定一个DOM元素事件处理函数的时候，我们通常都不会为他们定名字，而是赋予它的对应事件引用一个匿名函数。

　　对匿名函数的调用其实还有一种做法，也就是我们看到的jQuery片段——使用()将匿名函数括起来，然后后面再加一对小括号（包含参数列表）。我们再看一下以下例子：

alert((function(x,y){return x+y;})(2,3));// "5"
alert((new Function("x","y","return x*y;"))(2,3));// "6"
alert((function(x,y){return x+y;})(2,3));// "5" alert((new Function("x","y","return x*y;"))(2,3));// "6"
　　很多人或许会奇怪，为什么这种方法能成功调用呢？觉得这个应用奇怪的人就看一下我以下这段解释吧。

　　大家知道小括号的作用吗？小括号能把我们的表达式组合分块，并且每一块，也就是每一对小括号，都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以，当我们用一对小括号把匿名函数括起来的时候，实际上小括号对返回的，就是一个匿名函数的Function对象。因此，小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表，就会实现普通函数的调用形式。

　　不知道以上的文字表述大家能不能看明白，如果还是理解不了的话，再看一下以下的代码试试吧。

var abc=function(x,y){return x+y;};// 把匿名函数对象赋给abc
// abc的constructor就和匿名函数的constructor一样了。也就是说，两个函数的实现是一样的。
alert((abc).constructor==(function(x,y){return x+y;}).constructor);
var abc=function(x,y){return x+y;};// 把匿名函数对象赋给abc // abc的constructor就和匿名函数的constructor一样了。也就是说，两个函数的实现是一样的。 alert((abc).constructor==(function(x,y){return x+y;}).constructor);
　　提示：constructor是指创建对象的函数。也就是函数对象所代表的函数体。

　　总之，将其（被小括号包含的匿名函数）理解为括号表达式返回的函数对象，然后就可以对这个函数对象作正常的参数列表调用了。（前面这里犯了个错 误，只有函数表达式还是不能直接调用函数的，去掉匿名函数括号必须要伴随将表达式赋值。也就是(function(){alert(1)})()应该是与 a=function(){alert(1)}()等价，不能连a=都去掉。）

闭包
　　闭包是什么？闭包是指某种程序语言中的代码块允许一级函数存在并且在一级函数中所定义的自由变量能不被释放，直到一级函数被释放前，一级函数外也能应用这些未释放的自由变量。

　　怎样？看得一头冒汗吧……没事，我也是（虽然是我是了解的，只是表达能力的问题）。让我们换个更加简单的方法说明：闭包，其实是一种语言特性，它是指的是程序设计语言中，允许将函数看作对象，然后能像在对象中的操作搬在函数中定义实例（局部）变量，而这些变量能在函数中保存到函数的实例对象销毁为止，其它代码块能通过某种方式获取这些实例（局部）变量的值并进行应用扩展。

　　不知道这么再解释后会否更加清晰，如果还是不明白，那么我们再简化一下：闭包，其实就是指程序语言中能让代码调用已运行的函数中所定义的局部变量。

　　现在我们看一个例子：

var abc=function(y){
var x=y;// 这个是局部变量
return function(){
alert(x++);// 就是这里调用了闭包特性中的一级函数局部变量的x，并对它进行操作
alert(y--);// 引用的参数变量也是自由变量
}}(5);// 初始化
abc();// "5" "5"
abc();// "6" "4"
abc();// "7" "3"
alert(x);// 报错！“x”未定义！
var abc=function(y){ var x=y;// 这个是局部变量 return function(){ alert(x++);// 就是这里调用了闭包特性中的一级函数局部变量的x，并对它进行操作 alert(y--);// 引用的参数变量也是自由变量 }}(5);// 初始化 abc();// "5" "5" abc();// "6" "4" abc();// "7" "3" alert(x);// 报错！“x”未定义！
　　看到这里，你能判断究竟jQuery的那个代码片段是否闭包了吗？

以我的理解来说吧。是否应用了闭包特性，必须确定该段代码有没有 最重要的要素：未销毁的局部变量。那么很显然，没有任何实现的匿名函数不可能应用了闭包特性。但如果匿名函数里面有实现呢？那也还得确定它的实现中有没有 用到那些未销毁的局部变量。所以如果问你那个开篇中的jQuery代码片段是应用了JS里的什么特性？那么它只是匿名函数与匿名函数的调用而已。但是，它 隐含了闭包的特性，并且随时可以实现闭包应用。因为JS天生就是有这个特性的！（这只是我的理解，我也想知道你的理解，欢迎交流！关于闭包，有机会还是独立再开一个专题吧！）

匿名函数

函数是JavaScript中最灵活的一种对象，这里只是讲解其匿名函数的用途。匿名函数：就是没有函数名的函数。

1、函数的定义，首先简单介绍一下函数的定义，大致可分为三种方式

第一种：这也是最常规的一种

function double( x ){

return 2 * x;

}

第二种：这种方法使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。

var double = new Function( 'x' , ' return 2 * x;');

第三种：

var double = function( x ) { return 2* x; }

注意 '='右边的函数就是一个匿名函数，创造完毕函数后，又将该函数赋给了变量double。

2、匿名函数的创建

第一种方式：就是上面所讲的定义square函数，这也是最常用的方式之一。

第二种方式：

(function( x , y){

alert( x + y);

})(2 ,3 );//函数的自调用的形式，直接可以得出结果。

这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。

闭包

闭包的英文单词是closure，这是JavaScript中非常重要的一部分知识，因为使用闭包可以大大减少我们的代码量，使我们的代码看上去更加清晰等等，总之功能十分强大。

闭包的含义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕（这点涉及JavaScript作用域链）。

示例一：

function checkClosure(){

var str = 'rain-man';

setTimeout(

function(){ alert( str ); } //这是一个匿名函数

, 2000);

}//这个函数要求延迟2秒执行。

checkClosure();

这个例子看上去十分的简单，仔细分析下它的执行过程还是有许多知识点的：checkClosure函数的执行是瞬间的（也许用时只是0.00001毫秒），在checkClosure的函数体内创建了一个变量str，在checkClosure执行完毕之后str并没有被释放，这是因为setTimeout内的匿名函数存在这对str的引用。待到2秒后函数体内的匿名函数被执行完毕,str才被释放。

示例二：优化代码

function forTimeout( x, y){

alert( x + y );

}

function delay( x , y , time ){

setTimeout( 'forTimeout(' + x + ',' + y + ')' , time );

}

/**

*上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰

function delay( x , y , time ){

setTimeout(

function(){

forTimeout( x , y )

}

, time );

}

*/

举例

匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。

示例三：

var oEvent = {};

(function(){

var addEvent = function(){ /*代码的实现省略了*/ };

function removeEvent(){}

oEvent.addEvent = addEvent;

oEvent.removeEvent = removeEvent;

})();

在这段代码中函数addEvent和removeEvent都是局部变量，但我们可以通过全局变量oEvent使用它，这就大大减少了全局变量的使用，增强了网页的安全性。

我们要想使用此段代码：oEvent.addEvent( document.getElementById('box') , 'click' , function(){} );

示例四：

var rainman = (function( x , y ){

return x + y;

})( 2 , 3 );

/**

*也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。

var rainman = function( x , y ){

return x + y;

}( 2 , 3 );

*/

在这里我们创建了一个变量rainman，并通过直接调用匿名函数初始化为5，这种小技巧有时十分实用。

示例五：

var outer = null;

(function(){

var one = 1;

function inner (){

one += 1;

alert( one );

}

outer = inner;

})();

outer(); //2

outer(); //3

outer(); //4

这段代码中的变量one是一个局部变量（因为它被定义在一个函数之内），因此外部是不可以访问的。但是这里我们创建了inner函数，inner函数是可以访问变量one的；又将全局变量outer引用了inner，所以三次调用outer会弹出递增的结果。

注意

一：闭包允许内层函数引用父函数中的变量，但是该变量是最终值。

示例六：

/**

<body>

<ul>

<li>one</li>

<li>two</li>

<li>three</li>

<li>one</li>

</ul>

*/

var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i++ ){

lists[ i ].onmouseover = function(){

alert( i );

};

}

你会发现当鼠标移过每一个<li>元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

我个人比较推荐第一中解决方法，因为第一种解决方法完全利用了闭包的优点，运用匿名函数的自调用技术。

解决方法一：

var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i++ ){

(function( index ){

lists[ index ].onmouseover = function(){

alert( index );

};

})( i );//利用闭包的函数自调用的特性，当i的值传到匿名函数之后，匿名函数就可以自己调用，然后得出结果。

}

解决方法二：

var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i++ ){

lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标

lists[ i ].onmouseover = function(){

alert( this.$$index );

};

}

解决方法三：

function eventListener( list , index ){

list.onmouseover = function(){

alert(index);

};

}

var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i++ ){

eventListener( lists[ i ] , i );

}