JavaScript自运行函数(function(){})()的理解

今天打开JQuery源文件(jquery-1.8.3), 看到JQuery的初始化过程是这样的

(function( window, undefined ) {
    // ....
})( window );

一开始看不懂这个写法, 经过几番搜索终于明白它的用法以及为什么这样用了, 我们一步步来分析.

1, 首先我们简化这个写法

除去参数, 经过简化后的写法可以写成

(function(){
    console.log("Hello World");
})();

后面都使用这个写法作为示例.

2, 函数声明与函数表达式

网上有许多介绍创建JavaScript函数的文章告诉我们创建JavaScript函数有两种方式: 函数声明与函数表达式.

//function definition (also called function declaration)
function func1() {
    console.log("Hello World1");
}
func1();
 
// function expression
var func2 = function (){
    console.log("Hello World2");
};
func2();

第一种方式"函数定义"是标准的函数定义方式, 对函数func1的调用可以出现在函数定义之前;

第二种被称为"函数表达式", 与函数定义不同的是对函数func2的调用必须出现在变量func2之后的, 因为变量func2本质上是一个指向函数对象的变量, 这与我们定义普通变量的方式本质上是一样的; 另外一点是通过函数表达式创建的函数名可以不写, 我们称之为匿名函数.比如

var a = 10;
var f = function(){//code...};
f(); // 调用函数f

这里我们将变量f指向赋值运算符右边所创建的匿名函数, 然后就可以通过f()直接去调用这个匿名函数了, 那么, 问题来了, 我们是不是可以直接在创建好匿名函数之后就立即调用而不去多此一举赋值给变量f呢?

我们试试

function(){console.log("Hello World3");}();
// output: Uncaught SyntaxError: Unexpected token (

很遗憾报错, 为什么会这样呢? 这时我们再回过头来看看函数定义与函数表达式的语法区别.

函数定义: function funcName(){//code...} funcName();

函数表达式: function [funcName](){//code...} funcName();

两者的语法差别很小, 因此当JavaScript解释器解释到function关键字是是把这段代码当做函数定义呢还是函数表达式呢? 根据JavaScript语法, 以function开始的语句会被当做函数定义, 而函数定义是必须要有函数名的, 并且通过函数名来执行函数, 但是显然function(){};()是不符合这个语法规范的, 这也就解释了为什么会报错. 所以, 任何可以使得JavaScript解释器把这一语句解释为函数表达式的方法都应该能让这一句代码成功执行. 那么问题又来了: 如何实现这一目的呢?

var a = 1;

这就是一个简单的表达式(expression), 因此我们想到可以在这一语句前面加上一个合适的运算符, 在这里由于运算符右边只能有一个函数对象操作数(JavaScript语句), 所以我们应该用操作数可以为对象的(一元)运算符, 我们来试试各种运算符.

! function(){console.log("Hello World2");}();          //Hello World2
+ function(){console.log("Hello World3");}();        //Hello World3
- function(){console.log("Hello World4");}();        //Hello World4
delete function(){console.log("Hello World5");}();    //Hello World5
void function(){console.log("Hello World6");}();    //Hello World6

这些运算符都能实现我们的目的, 即让JavaScript解释器以创建函数表达式的方式创建这个函数. 至于具体使用哪一个运算符可以自己决定, 不过很明显我们希望用最简洁的方式. 在实践中一些大牛倾向于使用"!", 这一点在stackoverflow中有非常多的讨论. http://stackoverflow.com/questions/3755606/what-does-the-exclamation-mark-do-before-the-function

3, 圆括号Parenthesis

另外一种更常用的写法, 也就是JQuery的用法, 是用圆括号作为分组操作符来让该执行函数语句被强制解释为以函数表达式的方式来创建这个匿名函数.

// 第一种写法 ()分组运算符的内部代码只能是表达式, 这里将以函数表达式的方式创建并返回匿名函数
(function(){/* code... */ };)();
// 第二种写法 直接将最顶层的括号内部当做表达式创建并运行该匿名函数
(function(){...}(););

(function(){console.log("Hello World6");})();    //Hello World6

(function(){console.log("Hello World6");}());    //Hello World6

4, 结论

分析下来, 其实这样写的目的很简单: 就是定义一个匿名函数并执行. 至于为什么这样写, 这是利用闭包closure的特性来初始化全局变量, 将这些全局变量的scope控制在匿名函数内部. 至于闭包, 下次再扯吧, 先下班了.

参考资料

1, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

2, http://www.zhihu.com/question/20292224

3, http://www.zhcexo.com/round-brackets-in-javascript/

4, http://swordair.com/function-and-exclamation-mark/