Powered by GitBook

前端工程师手册

立即执行函数

了解完函数之后，我们介绍一下立刻调用函数，也就是我们常说的自执行函数。

什么是自执行

在JavaScript中，每个函数被调用时都会创建一个全新的上下文环境。因此，在函数内部定义的变量和函数就只能在函数内部访问，在外部无法访问，那么在该上下文环境中，调用的函数就提供了一个非常方便的方式来创建私有成员。也就是解释了JavaScript的作用域是function-level。

function makeCounter() {
    // 只能在makeCounter内部访问i
    var i = 0;

    return function () {
        console.log(++i);
    };
}

原理

在一个表达式后面加上括号()，该表达式会立即执行, 但是在一个语句后面加上括号()，是完全不一样的意思，他的只是分组操作符。

/*
 * 下面两种声明函数的方式，使用函数引用加上括号，可以立即调用函数
 */
var foo = function() {};
function foo() {};

/*
 * 解析器解析全局的function或者function内部function关键字的时候，默认是认为function声明，而不是function表达式，如果你不显示告诉编译器，它默认会声明成一个缺少名字的function
 * 所以在函数声明后面直接加上括号，会出现语法错误。
 */
function (){ /* code */ }(); //期望是立即调用一个匿名函数表达式，结果是进行了函数声明，函数声明必须要有标识符做为函数名称。

/*
 * 即使是函数声明，直接在后面使用括号，也不会立即执行。后面的括号相当于在函数声明后面加上分号，并且断行。后面的括号是分组运算符
 */

function foo(){}(); // 分组运算符需要表达式

理解了这些，我们只需要用大括弧将代码的代码全部括住就行了，因为JavaScript里括弧()里面不能包含语句，所以在这一点上，解析器在解析function关键字的时候，会将相应的代码解析成function表达式，而不是function声明。

所以那些匿名函数附近使用括号或一些一元运算符的惯用法，就是来引导解析器，指明运算符附近是一个表达式。

实现方式

// 下面2个括弧()都会立即执行

(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的

// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的
// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了
// 不过，请注意下一章节的内容解释

var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();

// 如果你不在意返回值，或者不怕难以阅读
// 你甚至可以在function前面加一元操作符号

!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率
// http://twitter.com/kuvos/status/18209252090847232

new function () { /* code */ }
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()

自执行匿名函数和立即执行的函数表达式区别

自执行，顾名思义，自己执行自己的操作:

// 这是一个自执行的函数，函数内部执行自身，递归
function foo() { foo(); }

// 这是一个自执行的匿名函数，因为没有标示名称
// 必须使用arguments.callee属性来执行自己
var foo = function () { arguments.callee(); };

// 这可能也是一个自执行的匿名函数，仅仅是foo标示名称引用它自身
// 如果你将foo改变成其它的，你将得到一个used-to-self-execute匿名函数
var foo = function () { foo(); };

我们倡导的说法是立即执行函数，所以自执行其实也是一个立即执行函数。

// 有些人叫这个是自执行的匿名函数（即便它不是），因为它没有调用自身，它只是立即执行而已。
(function () { /* code */ } ());

// 为函数表达式添加一个标示名称，可以方便Debug
// 但一定命名了，这个函数就不再是匿名的了
(function foo() { /* code */ } ());

// 立即调用的函数表达式（IIFE）也可以自执行，不过可能不常用罢了
(function () { arguments.callee(); } ());
(function foo() { foo(); } ());

参考资料