|
匿名函数，是指没有名称的函数。匿名函数可以传递参数，也可以赋值给一个变量。
在JavaScript中，有两种传值方式，按值传递和引用传递：
按值传递：赋值时是将数据本身传递给变量。
引用传递：将数据（代码块）的地址传递给变量，而不是数据（代码块）本身。
基本数据类型一般是按值传递，复杂数据类型一般是引用传递。
另一种定义函数的方式
来分析一个函数的定义：
| 代码如下 |
复制代码 |
|
function demo(){
// 函数主体部分
}
|
它的实质，是将函数主体赋值给了demo变量，这个函数主体是：
| 代码如下 |
复制代码 |
|
function(){
// 函数主体部分
}
|
所以，demo() 函数也可以这样定义：
| 代码如下 |
复制代码 |
|
var demo=function(){
// 函数主体部分
}
|
可以这样来调用函数：
小括号的作用是将demo变量所指向的函数主体（代码块）作为函数执行。
如果不加小括号，函数主体仅仅是一段文本，一段字符串，不会执行。
来看一段代码：
| 代码如下 |
复制代码 |
|
var total=1;
var demo=function(){
total=10;
}
alert(demo);
alert(total);
|
保存并执行代码，第一个警告框将函数主体显示出来，如下图所示：
第二个警告框显示 1 。
实例演示：
点击这里调用函数
可以发现，函数并没有执行，仅仅是一段文本。
匿名函数的定义
匿名函数，可以理解为定了一个函数，但是没有将它赋值给变量。定义方式如下：
| 代码如下 |
复制代码 |
function([parameters]){
statements;
[return表达式;]
}
|
各个部分的含义与“ 具名函数 ”（有函数名的函数）相同。
匿名函数的调用
匿名函数没有函数名，也没有指向它的变量，不能像具名函数一样可以在任何地方调用，匿名函数必需在定义后立即执行。
上面已经提到，小括号的作用是将代码块作为函数执行，在小括号内一样可以传递参数，所以，匿名函数可以使用小括号来调用和执行：
| 代码如下 |
复制代码 |
(function([parameters]){
// 函数主体部分
})([parameters]);
|
第一个小括号将函数体包围起来，第二个小括号执行函数体，[parameters]是要传递的参数列表。
例子1：
| 代码如下 |
复制代码 |
|
(function(){
alert("匿名函数");
})();
|
例子2：
| 代码如下 |
复制代码 |
|
(function(x,y){
alert(x+100);
})(10,100);
|
注意：最后要加上分号“ ; ”，这不是一个代码块，而是调用函数。
【例4-2】用匿名函数计算1+2+3+...+99+100的值。
| 代码如下 |
复制代码 |
|
<script language="JavaScript" type="text/javascript">
(function(m,n){
var total=0;
if(m>=n){
alert(" 数值范围不正确！ ");
return false;
}
for(var i=m;i<=n;i++){
total+=i;
}
alert(total);
})(1,100);
</script>
|
保存并执行代码，弹出警告框，显示 5050 ，匿名函数成功执行了。
再来看一个有返回值的匿名函数。
【例4-3】对【例4-2】稍作修改，同样用匿名函数计算1+2+3+...+99+100的值。
| 代码如下 |
复制代码 |
|
<html>
<head>
<title>计算1+2+3 ... +98+99+100的值</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
alert(
(function(m,n){
var total=0;
if(m>=n){
alert(" 数值范围不正确！ ");
return false;
}
for(var i=m;i<=n;i++){
total+=i;
}
return total;
})(1,100) // 这里不要加分号
);
</script>
</body>
</html>
|
保存并执行代码，结果与【例4-2】相同。
匿名函数闭包
闭包的英文单词是closure，这是JavaScript中非常重要的一部分知识，因为使用闭包可以大大减少我们的代码量，使我们的代码看上去更加清晰等等，总之功能十分强大。
闭包的含义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕（这点涉及JavaScript作用域链）。
示例一
| 代码如下 |
复制代码 |
|
function checkClosure(){
var str = 'rain-man';
setTimeout(
function(){ alert(str); } //这是一个匿名函数
, 2000);
}
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);
* }
*/
|
3、举例
匿名函数最大的用途是创建闭包（这是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会弹出递增的结果。
JavaScript匿名函数封装
在一些Javascript库中可以看见这种写法：
| 代码如下 |
复制代码 |
function(){
//所有库代码代码
}(); |
这样写的一个目的是——封装。
JavaScript并不是面向对象的，所以它不支持封装。但是在不支持封装的语言里同样可以实现封装。而实现的方法就是匿名函数。
| 代码如下 |
复制代码 |
|
//定义
function F(x)
{
this.x = x;
function double(x){return x*x;}
this.getDoubleX = function(){
return double(this.x);
}
}
//使用
f = new F(12);
alert(f.getDoubleX());
|
上面的代码很简单，我没有去运行它。懂点js的都知道这是JS的类定义方式。函数F相当于一个构造函数，而函数里面的其他定义都是函数私有的外部无法访问，例如double函数。这样就变相实现了私有方法。其他打上“this.”前缀的成员相当于公开成员，外部可以访问。
而这些库之所以要用一个大函数包裹整个库代码，就是为了不向使用者暴露内部方法和变量，强制用户只能访问开放的API。从这一点可以开出这些开发者的良苦用心。
简单形式的封装调用：
| 代码如下 |
复制代码 |
|
var userName = function() { return "jeff wong" } ();
alert(userName);
|
上面的代码确实简单，我们可以逐步分解成下面的写法：
| 代码如下 |
复制代码 |
var anonymousFunc = function() { return "jeff wong" }; //匿名函数
var name = anonymousFunc(); //执行该函数 返回人名
alert(name); |
new一下Function的形式（大写Function）
| 代码如下 |
复制代码 |
|
var a = new Object();
var b = new Function();
//alert(typeof (a)); //object
//alert(typeof (b)); //function
alert(a); //[object Object]
alert(b); //匿名函数
//alert(a == b); //false
//alert(a === b); //false
|
正如你所看到的那样，我们new一个Object，变量a弹出的是[object Object],而new一个Function（注意，是大写Function），b在弹出的时候，生成了匿名函数。 既然b是匿名函数，函数当然可以执行，我们可以继续试试下面的代码验证自己的猜测：
| 代码如下 |
复制代码 |
|
alert(b()); //undefined
alert(a()); //脚本错误 提示“缺少函数”
new 一下function也大有乾坤（小写function）
|
简单的空函数：
| 代码如下 |
复制代码 |
|
var func = new function() { };
alert(typeof (func)); //object
alert(func); //[object Object]
//alert(func()); //脚本错误 func不是函数
|
其实上面的代码也就等价于下面的写法：
| 代码如下 |
复制代码 |
|
function anonymousClass() { } //匿名类
var instance = new anonymousClass();
alert(typeof (instance));//object
alert(instance); //[object Object]
|
函数带个返回值的，也不是很难理解
| 代码如下 |
复制代码 |
|
var func = new function() { return "jeff wong" };
alert(typeof (func));
alert(func);
//alert(func()); //脚本错误 缺少函数
|
其实上面的代码也就等价于下面的写法：
| 代码如下 |
复制代码 |
function anonymousClass() { return "jeff wong"; } //匿名类
var instance = new anonymousClass();
alert(typeof (instance));//object
alert(instance); //[object Object] |
还是函数带个返回值的，写法稍微有点不同
下面的代码请注意和（2）中的区分一下，因为接下来要重点讨论的就是那一点点的不同书写形式：
| 代码如下 |
复制代码 |
|
var func = new function() { return new String("jeff wong"); };
alert(typeof (func)); //object 意料之中
alert(func); //这里?!
//alert(func()); //脚本错误 缺少函数
|
上面代码的等价形式依然简单：
| 代码如下 |
复制代码 |
function anonymousClass() { return new String("jeff wong"); }
var instance = new anonymousClass();
alert(typeof (instance));
alert(instance); |
已经运行看到结果了吗？没错，第三种写法我们在弹出func或者instance的时候，都出人意料地得到了一段字符串"jeff wong"。细心比较（2）和（3）中的代码，除了return处的写法稍有不同之外，两处代码几乎完全一致，所以我们推断，毫无疑问，是new String的形式让我们的函数产生了意想不到的效果。 为什么会这样呢？
原来，在javascript中，只要在new表达式之后的constructor返回（return）一个原始类型（无return时其实是return原始类型undefined，如（1）），比如第（2）种写法，那么就返回new创建的匿名对象；而如果new表达式之后的constructor返回一个引用对象，比如对象（Object），函数（function）及数组（Array）等等，那么返回的该引用对象就将覆盖new创建的匿名对象。现在再来分析（3）中的写法，由于new String会构造一个字符串引用对象，它就覆盖了new所创建的匿名对象，而new String的所指向引用值是“jeff wong”，所以弹出的必然是当前new String所分配的值。
最后，留个思考题，大家看看下面的代码返回什么结果：
| 代码如下 |
复制代码 |
|
var func = new function() { var str = new String("jeff wong"); return str; };//再换种写法
//alert(typeof (func)); //object 意料之中
alert(func); //猜一下这里应该是什么结果？
|
|
