什么是立即执行函数?

简单来说:立即执行函数就是声明一个匿名函数,然后马上执行这个匿名函数.

并不等于这样:

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);
   
}
            

 

posted @ 2017-06-13 17:11  Lu_Lu陌鹿  阅读(367)  评论(0编辑  收藏  举报