深入解析JavaScript中的立即执行函数

function makeCounter() {  var i = 0;  return function(){    console.log(++i);  };  }//记住：`counter`和`counter2`都有他们自己的变量 `i`var counter = makeCounter();counter();//1counter();//2var counter2 = makeCounter();counter2();//1counter2();//2i;//ReferenceError: i is not defined(它只存在于makeCounter里)

//向下面这样定义的函数可以通过在函数名后加一对括号进行调用，像这样`foo()`，//因为foo相对于函数表达式`function(){/* code */}`只是一个引用变量var foo = function(){/* code */}//那这可以说明函数表达式可以通过在其后加上一对括号自己调用自己吗？function(){ /* code */}(); //SyntaxError: Unexpected token (

//然而函数声明语法上是无效的，它仍然是一个声明，紧跟着的圆括号是无效的，因为圆括号里需要包含表达式function foo(){ /* code */ }();//SyntaxError: Unexpected token//现在，你把一个表达式放在圆括号里，没有抛出错误...,但是函数也并没有执行，因为：function foo(){/* code */}(1)//它等同于如下，一个函数声明跟着一个完全没有关系的表达式:function foo(){/* code */}(1);

//这两种模式都可以被用来立即调用一个函数表达式，利用函数的执行来创造私有变量(function(){/* code */}());//Crockford recommends this one，括号内的表达式代表函数立即调用表达式(function(){/* code */})();//But this one works just as well，括号内的表达式代表函数表达式// Because the point of the parens or coercing operators is to disambiguate// between function expressions and function declarations, they can be// omitted when the parser already expects an expression (but please see the// "important note" below).var i = function(){return 10;}();true && function(){/*code*/}();0,function(){}();//如果你并不关心返回值，或者让你的代码尽可能的易读，你可以通过在你的函数前面带上一个一元操作符来存储字节!function(){/* code */}();~function(){/* code */}();-function(){/* code */}();+function(){/* code */}();// Here's another variation, from @kuvos - I'm not sure of the performance// implications, if any, of using the `new` keyword, but it works.// http://twitter.com/kuvos/status/18209252090847232new function(){ /* code */ }new function(){ /* code */ }() // Only need parens if passing arguments

// 它的运行原理可能并不像你想的那样，因为`i`的值从来没有被锁定。// 相反的，每个链接，当被点击时（循环已经被很好的执行完毕），因此会弹出所有元素的总数，// 因为这是 `i` 此时的真实值。var elems = document.getElementsByTagName('a');for(var i = 0;i < elems.length; i++ ) {  elems[i].addEventListener('click',function(e){    e.preventDefault();    alert('I am link #' + i)    },false);}// 而像下面这样改写，便可以了，因为在IIFE里，`i`值被锁定在了`lockedInIndex`里。// 在循环结束执行时，尽管`i`值的数值是所有元素的总和，但每一次函数表达式被调用时，// IIFE 里的 `lockedInIndex` 值都是`i`传给它的值,所以当链接被点击时，正确的值被弹出。var elems = document.getElementsByTagName('a');for(var i = 0;i < elems.length;i++) {  (function(lockedInIndex){    elems[i].addEventListener('click',function(e){      e.preventDefault();      alert('I am link #' + lockedInIndex);      },false)  })(i);}//你同样可以像下面这样使用IIFE，仅仅只用括号包括点击处理函数，并不包含整个`addEventListener`。//无论用哪种方式，这两个例子都可以用IIFE将值锁定，不过我发现前面一个例子更可读var elems = document.getElementsByTagName( 'a' );for ( var i = 0; i < elems.length; i++ ) {  elems[ i ].addEventListener( 'click', (function( lockedInIndex ){    return function(e){      e.preventDefault();      alert( 'I am link #' + lockedInIndex );    };    })( i ),false);  }

//下面是个自执行函数，递归的调用自己本身function foo(){foo();};//这是一个自执行匿名函数。因为它没有标识符，它必须是使用`arguments.callee`属性来调用它自己var foo = function(){arguments.callee();};//这也许算是一个自执行匿名函数，但是仅仅当`foo`标识符作为它的引用时，如果你将它换成用`foo`来调用同样可行var foo = function(){foo();};//有些人像这样叫'self-executing anonymous function'下面的函数,即使它不是自执行的，因为它并没有调用它自己。然后，它只是被立即调用了而已。(function(){ /*code*/ }());//为函数表达式增加标识符(也就是说创造一个命名函数)对我们的调试会有很大帮助。一旦命名，函数将不再匿名。(function foo(){/* code */}());//IIFEs同样也可以自执行，尽管，也许他不是最有用的模式(function(){arguments.callee();}())(function foo(){foo();}())// One last thing to note: this will cause an error in BlackBerry 5, because// inside a named function expression, that name is undefined. Awesome, huh?(function foo(){ foo(); }());

var counter = (function(){  var i = 0;  return {    get: function(){      return i;    },    set: function(val){      i = val;    },    increment: function(){      return ++i;    }  }  }());  counter.get();//0  counter.set(3);  counter.increment();//4  counter.increment();//5  conuter.i;//undefined (`i` is not a property of the returned object)  i;//ReferenceError: i is not defined (it only exists inside the closure)