几种方式立即执行函数

在javascript中定义一个函数，并且立即去执行它。（这个情况虽然看上去很疯狂，但是实际上一定会用到，因为函数一旦执行完，内部的局部变量会被释放，内存也释放出来。）我们可能第一种想到的方法是：

// 第一种
function a() {}
a();

没错，这个太简单不过了。

当然，还有另外一种相对高深的办法：

window.onload = function() {}

这段代码表示在网页加载完之后立即执行function中的代码，但这里面隐含了另外一层意思，也就是可以把函数赋值给变量，使变量成为一个其他语言意义上的类。

// 第二种
var a = function(){}a();

不过这也给了我们另外一个思路：

function fun() {}
var a = fun();
a();

给我们留下一个思考：

function(){}; // javascript语句中以function开始没有实际的效果

一旦某条语句以function开始，这条语句没办法赋值给某个变量去执行它（说到这里，函数名可以可以理解为一个被赋值为某个函数的变量而已）。

下面是真相的时候：

function a() {}
a();

如果函数名是一个被赋值的变量（也就是a），那么为何不将其实际的值替换掉变量名呢（也就是把a()替换为function()()）？于是，上面这段代码变为：

function(){}(); // 前面加粗部分代表a

但是在前面已经提到了，function开始的语句没有实际的效果，因此，上面这个语句不会有实际效果。不仅如此，这句代码还会抛出错误提示：SyntaxError: Unexpected token。

此处括号的正确理解

造成上述这个异常的原因是，javascript对语句的结束并不是以;作为标识，在这种普通情况下，}被作为语句结束的标识，因此，上述语句被解释为：

function(){};();

因此在执行()时，会抛出表达式错误。而如果我们执行：

function(){};(1);

则不会出错。原因在于：语法正确。

我理解的()，在javascript中有两种：一种是确定优先级，另一种是分组。当然，在声明函数和函数使用的时候也会用到()，但这是一种语法，而不是运算。确定优先级就是括号内的表达式先于括号外的表达式运算，例如：

1+(2*5)和(1+2)*5或(1+2)*(2+3)

而分组一般是在正则表达式中使用的概念，例如：

/<(.*)ok(this) is myhouse(.*)>/

在进行匹配的时候，上面的小括号将匹配结果分为三组进行返回，在替换的时候，可以对每个组分别进行替换。因此，分组的概念，应该和本文没有关系。因此，本文中的()，只有两种理解，一种是运算符，一种是语法。

在上面的代码中(1);中的();很明显是一个运算符，括号内必须有表达式，否则就是语法错误。

我们在回到上面的代码，如果我们给function加上()会怎样？

(function(){});

恭喜你，你的函数初始化，虽然从结果上并没有什么卵用，而且和直接function(){}也没有什么不同，只不过是把function(){}提高了运算的优先级而已。

可是，当我们执行下面的代码的时候，情况就大不相同了：

(function(){})();

代码是从左往右执行的，就像a() || b();一样如果a()为真，就不执行b()了。同样的道理，上面的代码中，红色部分作为一个表达式，执行完毕，代表着一个函数已经初始化完毕，如果我们回到：function(){}();，也就是前文抛出错误的那个语句你就会发现，神奇的事情发生了，红色部分俨然就是我们要的a，所以整个语句合起来也就是：a();，就这样，函数被执行了。

在这条代码中，第二个()不再是运算符，而是函数的括号。而第一个()，则是一个运算符，提高了内部function的运算优先级，内部被优先执行，得到结果后，与第二个()构成函数语法，执行了函数。

我们再回头来看()运算符的作用，来看一下下面这个代码：

()();

这是一个神奇的代码，世界上不会有任何程序员这样去用，当然，它也会报错。但是我们如何正确去理解这种情况呢？世界上是否存在下面这种javascript代码：

(a+b)(c+d);

从来没有见过。如果世界上存在一种运算，就是没有任何运算，那么上面是成立的，但是，如果这种假设不成立的话，上面的代码就是错误的。我们从来没有见过(1+2)(3+4)，虽然我们小学的时候写过这样的算式，但是在代码中是不存在的。

因此，我们换一个思维，不要只把它当做运算，而是运算和函数的结合呢？在你的浏览器中运行下面这段代码试试：

(1+2)(3+4);// TypeError: (1 + 2) is not a function

提示的不是语法错误，而是数据类型错误，第二个括号 前面的不是一个函数。也就是说，第二个括号前面的，如果是函数类型，就正确了！那么世界上有没有一种算法，使运算后返回值为函数呢？比如 fun1+fun2=fun3？好像我还从来没有遇到过，因此，想在第一个括号中构建一种运算使该代码成立，还需要高高手来实现。唯一的解决办法，就是在 第一个括号中委以函数，也就是(function(){})(3+4)，而3+4不过仅仅是作为前面这个函数的参数予以运行。

匿名函数的立即执行

当你以为挖到宝藏的时候，下面的解释或许让你再一次开了脑洞。我们提到function开头的语句虽然初始化函数，但是函数并不被执行，其运行效果相当于什么也没发生。

为了提交它的优先级，我们再用一次()吧：

(function(){}());

这次，我们直接把函数表达式和后面的()放在一个()里面，这下子奇迹也发生了，空号内部是一个表达式，表达式的意思就是}不代表结束，所以我们前文提到的}表示语句结束的论断不起作用了。()内部必须运算完成，才能结束这次表达式运算，所以上面代码中的红色部分又再次先运算了，运算完又和()组成了a()，于是，函数又执行了。

OK，我们现在终于get到了终点：表达式必须运行完成，才会结束表达式。这简直就是天一样的玄机，牢牢记住表达式这个概念之后，我们再来看下面的几个代码：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
……

没错，上面的!+-~，全部代表表达式，!表示非，~表示按位非。你可以想出全部的表达式符号（当然必须得考虑运行是否合法，比如/0就不合法，分母不能为0），从而实现上面的这个效果。

于是，我们看到几乎所有的插件，都会用上面的其中一种方式来定义整个代码。

正是因为这个原因，上面的所有代码，都可以让function(){}内部的代码立即执行。

遗留问题：第二个括号内的参数

在多数插件中，我们可以看到如下的代码：

!function(){}(jQuery);

基本上我们都看懂了，但是第二个括号内有个jQuery代表什么意思呢？

你想一下下面这个用法：

function a(var) {}
a(1);

然后把第二行的a替换为function(var){}，结果就变成了function(var){}(1);

没错，第二个括号内的值，是原本函数的特定参数。所以，上面那个jQuery的，我们可以将它还原为：

var fun = function(a) {}
fun(jQuery);

就是这样了。但是，jQuery是什么呢？是一个对象啊！所以下面的代码就来了：

!function($){
  // 在function中，$实际上就是jQuery，所以用$尽情玩耍吧。
}(jQuery);

难道你以为到此就结束了吗？不，看看下面的代码：

!function(fun){}(function($){});

什么鬼？你以为我想表达什么？其实，这是很多插件中的一种写法，用以兼容不同的加载模式（CommonJS、CMD、CMD），具体是这样的：

!function(fun){
  "use strict";
  if(typeof define === 'function' && define.amd) {   
    define(['jquery'], fun)
  } else {
    fun((typeof(jQuery) != 'undefined') ? jQuery : window.Zepto) 
  }
}(function($){
  "use strict";
  // 真正的插件代码都在这里
});

这是一个双重传值的过程。第一重，第一个function(fun)中的fun是第二个function($)，因此，在第一个function中的代码中fun($)和第二个function($)是等效的。第二重，第二个function($)中的$参数，是在第一个函数中进行传递过来的，第一个函数中，define(['jquery'],fun)和fun(jQeury)实际上在执行第二个函数，既然如此，真正的插件代码就应该在第二个函数中去写，第一个函数仅仅是通过多个判断，返回正确的调用模式而已。

实际上，了解了上述之后，本文的题目是为了立即执行某个函数，在实践中，还有很多做法可以在申请一个函数后立即执行它，比如：

(function(){}).call();

好了，这个问题就阐述到这里，可能也有一些不足的地方，欢迎大家指正。

2016-01-20 16478