什么是立即执行函数?
简单来说:立即执行函数就是声明一个匿名函数,然后马上执行这个匿名函数.
并不等于这样:
function(){ /* code */ }(); //SyntaxError
在一个表达式后面加上括号(),该表达式会立即执行,但是在一个语句后面加上括号(),是完全不一样的意思,他的只是分组操作符。
// 下面这个function在语法上是没问题的,但是依然只是一个语句 // 加上括号()以后依然会报错,因为分组操作符需要包含表达式 function foo(){ /* code */ }(); // SyntaxError: Unexpected token ) // 但是如果你在括弧()里传入一个表达式,将不会有异常抛出 // 但是foo函数依然不会执行 function foo(){ /* code */ }( 1 ); // 因为它完全等价于下面这个代码,一个function声明后面,又声明了一个毫无关系的表达式: function foo(){ /* code */ } ( 1 );
匿名函数常见的形式
// 下面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 */ } () // 如果需要传递参数,只需要加上括弧()
2、那么立即执行函数有什么作用呢?
创建一个独立的作用域,这个作用域里面的变量,外面访问不到,
eg
var List = document.getElementsByTagName('li'); for (var i = 0; i < List.length; i++) { List[i].onclick=function(){ alert(i); }; } //alert出来的总是6,而不是0、1、2、3、4、5,这是因为i的作用域是全局而不是给每个li分配一个i // 解决的办法就是利用立即执行函数给每个li创立一个独立的作用域,在立即执行函数执行的时候把i的值赋值给a,a的值一直不变。i的值从0变化到5,对应6个立即执行函数 var List = document.getElementsByTagName('li'); for (var i = 0; i < List.length; i++) { !function(a){ List[a].onclick=function(){ alert(a); //alert0、1、2、3、4、5 } }(i); }
真正的稳定,不是你在一家单位有饭吃,而是你足够牛逼,不论走到哪里都有饭吃