JS之立即执行函数讲解

(function foo(){/* code */}()); //正确，推荐这样使用
(function foo(){/* code */})(); //正确，这样可以
var foo = function foo(){/* code */}(); //正确
function foo(){/* code */}(); //SyntaxError: Unexpected token (
// 但是如果你在括弧()里传入一个表达式，将不会有异常抛出
// 但是foo函数依然不会执行
function foo(){ /* code */ }( 1 );
 
// 因为它完全等价于下面这个代码，一个function声明后面，又声明了一个毫无关系的表达式： 
function foo(){ /* code */ }
( 1 );
// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的
// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了
// 不过，请注意下一章节的内容解释
var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();

// 如果你不在意返回值，或者不怕难以阅读
// 你甚至可以在function前面加一元操作符号
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率
// http://.com/kuvos/status/18209252090847232
new function () { /* code */ }
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()

const uniqueId1 = function() {
 let count1 = 0;
 return function() {
 ++count1;
 return count1;
 };
};
uniqueId1(); //? () {++count1;return count1;}

const uniqueId2 = function() {
 let count = 0;
 return count;
};
uniqueId2(); //0
uniqueId2(); //0
uniqueId2(); //0

const uniqueId3 = (function() {
 let count3 = 0;
 return function() {
 ++count3;
 return count3;
 };
})();
uniqueId3(); //1
uniqueId3(); //2
uniqueId3(); //3
uniqueId3(); //4

const uniqueId4 = function() {
 let count4 = 0;
 return (function() {
 ++count4;
 return count4;
 })();
};
uniqueId4(); //1
uniqueId4(); //1
uniqueId4(); //1
uniqueId4(); //1

// 创建一个立即调用的匿名函数表达式
// return一个变量，其中这个变量里包含你要暴露的东西
// 返回的这个变量将赋值给counter，而不是外面声明的function自身

var counter = (function () {
 var i = 0;

 return {
 get: function () {
 return i;
 },
 set: function (val) {
 i = val;
 },
 increment: function () {
 return ++i;
 }
 };
} ());

// counter是一个带有多个属性的对象，上面的代码对于属性的体现其实是方法

counter.get(); // 0
counter.set(3);
counter.increment(); // 4
counter.increment(); // 5

counter.i; // undefined 因为i不是返回对象的属性
i; // 引用错误: i 没有定义（因为i只存在于闭包）

// 这个代码是错误的，因为变量i从来就没背locked住
// 相反，当循环执行以后，我们在点击的时候i才获得数值
// 因为这个时候i操真正获得值
// 所以说无论点击那个连接，最终显示的都是I am link #10（如果有10个a元素的话）

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

}

// 这个是可以用的，因为他在自执行函数表达式闭包内部
// i的值作为locked的索引存在，在循环执行结束以后，尽管最后i的值变成了a元素总数（例如10）
// 但闭包内部的lockedInIndex值是没有改变，因为他已经执行完毕了
// 所以当点击连接的时候，结果是正确的

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

}

// 你也可以像下面这样应用，在处理函数那里使用自执行函数表达式
// 而不是在addEventListener外部
// 但是相对来说，上面的代码更具可读性

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

}

for (var i = 0; i < 5; i++) {
 setTimeout(function(i) {
 console.log(i);
 }, i * 1000);
}

for (var i = 0; i < 5; i++) {
 setTimeout((function(i) {
 console.log(i);
 })(i), i * 1000);
}

for (var i = 0; i < 5; i++) {
 setTimeout((function(i) {
 return function() {
 console.log(i);
 }
 })(i), i * 1000);
}

for (var i = 0; i < 5; i++) {
 setTimeout((function(i) {
 console.log(i);
 }).bind(this,i), i * 1000);
}

var j = 0;
for (i = 0; i < 5; i++) {
 setTimeout(function() {
 console.log(j);
 j++;
 }, i * 1000);
}

window.$ = function somethingElse() {
 // ...
};
 
(function($) {
 // ...
})(jQuery);

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

(function(w, d, u) {
 // ...
})(window, document);

// 下面2个括弧()都会立即执行
(function () { /* code */ } ());
(function () { /* code */ })();

var a="bbb"
(function(){
	alert(1);
})();

//var a = function(){}
var a="bbb"
(function(){
	alert(1);
}());