谈谈Javascript的匿名函数

JQuery 里面有这么一种代码：

(function(){

	// code here

})();

当一个匿名函数被括起来，然后再在后面加一个括号，这个匿名函数就能立即运行起来，神奇吧！

要说匿名函数，我们首先要由函数本身说起。函数的定义如下：函数是将唯一的输出值赋予给每一输入的“法则”。

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

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

函数声明（function 语句）

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

function abc(){

	// code to process

}

当然，函数也可以是带参数的，甚至是带返回值的。

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"

相信大家现在对如何声明一个函数应该是有所了解了。那么什么才是匿名函数呢？

什么是匿名函数？

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

alert(typeof function(){});// "function"

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

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

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

在Javascript定义一个函数一般有如下三种方式：

函数关键字(function)语句：

function fnMethodName(x){

	alert(x);

}

函数字面量(Function Literals)：

var fnMethodName = function(x){

	alert(x);

}

Function()构造函数：

var fnMethodName = new Function('x','alert(x);')

匿名函数的调用

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

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"

很多人或许会奇怪,为什么这种方法能成功调用呢？觉得这个应用奇怪的人就看一下我以下这段解释吧。

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

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

// 把匿名函数对象赋给abc

var abc=function(x,y){return x+y;};

// abc的constructor就和匿名函数的constructor一样了。也就是说，两个函数的实现是一样的。

alert((abc).constructor==(function(x,y){return x+y;}).constructor);

PS：constructor是指创建对象的函数。也就是函数对象所代表的函数体。

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

关于闭包

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

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

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

现在我们看一个例子：

var abc=function(y){

	var x=y;	// 这个是局部变量

	return function(){

		// 就是这里调用了闭包特性中的一级函数局部变量的x,并对它进行操作

		alert(x++);

		alert(y--);	// 引用的参数变量也是*变量

	}

}(5);

// 初始化

abc();// "5" "5"

abc();// "6" "4"

abc();// "7" "3"

alert(x);

// 报错！“x”未定义！

看到这里，你能判断究竟jQuery的那个代码片段是否闭包了吗？

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

函数字面量和Function()构造函数的区别

虽然函数字面量是一个匿名函数，但语法允许为其指定任意一个函数名，当写递归函数时可以调用它自己，使用Function()构造函数则不行。

var f = function fact(x) {

	if (x < = 1)

		return 1;

	else

		return x*fact(x-1);

};

Function()构造函数允许运行时Javascript代码动态的创建和编译。在这个方式上它类似全局函数eval()。

Function()构造函数每次执行时都解析函数主体，并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反，函数字面量却不是每次遇到都重新编译的。

用Function()构造函数创建一个函数时并不遵循典型的作用域，它一直把它当作是*函数来执行。

var y = "global";

function constructFunction() {

	var y = "local";

	return new Function("return y");

	//  无法获取局部变量

}

alert(constructFunction()()); // 输出 "global"

和函数关键字定义相比Function()构造器有自己的特点且要难以使用的多，所以这项技术通常很少使用。而函数字面量表达式和函数关键字定义非常接近。考虑前面的区别，虽然有消息说字面量的匿名函数在OS X 10.4.3下的某些webkit的引擎下有bug，但我们平常所说的匿名函数均指采用函数字面量形式的匿名函数。更多详细内容可以阅读《JavaScript: The Definitive Guide, 5th Edition》的Functions那章。

匿名函数的代码模式

匿名函数这么写会报错：

//其无法工作，浏览器会报语法错。

function(){

	alert(1);

}();

但是前面加个=号就没错了：

var sum = function() {

	return 1;

}();

首先，用括号包围起来的 function(){...} 被js 引擎认为是一个function表达式，后面的 () 就调用了这个匿名函数。

如果你写成 function(){...}() 那就是语法错误，因为js 引擎会期待这里是一个有名字的function声明（func声明与func表达式是不同的）；

但是可以写成 void function(){...}() 也是可以的，因为void关键字会告诉js 引擎后面要跟一个表达式，所以后面就被认出来是一个function表达式所产生的匿名函数对象，并进行调用的结果，void会把调用结果抛弃。

函数字面量：首先声明一个函数对象，然后执行它。

(function(){

	alert(1);

}) ();

优先表达式：由于JavaScript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。

( function(){

	alert(2);

} () );

void操作符：用void操作符去执行一个没有用圆括号包围的一个单独操作数。

void function(){

	alert(3);

}()

这三种方式是等同的，个人原因比较喜欢第3种，而在实际应用中我看到的和使用的都是第1种。

匿名函数的应用

《Javascript的一种模块模式》中的第一句话就是“全局变量是魔鬼”。配合var关键字，匿名函数可以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。这在给一个不是很熟悉的页面增加Javascript时非常有效，也很优美。实际上，YUI以及其相应的范例中大量使用匿名函数，其他的Javascript库中也不乏大量使用。

Javascript的函数式编程(functional programming)的基石。具体请看《用函数式编程技术编写优美的 JavaScript》和《函数式JavaScript编程指南》。

秒客网