function makeCounter() {
// i只是makeCounter函数内的局部变量
var i = 0;
return function () {
console.log(++i);
};
}
// counter和counter2是不同的实例，它们分别拥有自己范围里的i变量
var counter = makeCounter();
counter(); // i:1
counter(); // i:2
counter(); // i:3
var counter2 = makeCounter();
counter2(); // i:1
counter2(); // i:2
console.log(i); // i is not defined
一种私有变量创建方式，也是闭包的应用之一。
但是，很多时候，我们不需要函数声明，不需要后续的在调用。
var makeCounter = (function() {
var i = 0;
return {
sum: function() {
i++;
},
sayI: function() {
console.log(i);
}
}
})();
makeCounter.sum();
makeCounter.sum();
makeCounter.sum();
makeCounter.sayI(); // 3
看这两个例子：
var fn = function() {console.log(1)};
function() {console.log(2)}; // SyntaxError: Unexpected token (
第二个函数报错了，这是为何？
原文解释：在javascript代码解释时，当遇到
function关键字时，会默认把它当做是一个函数声明，而不是函数表达式，如果没有把它显视地表达成函数表达式，就报错了，因为函数声明需要一个函数名，而上面的代码中函数没有函数名。以上代码，也正是在执行到第一个左括号(时报错，因为(前理论上是应该有个函数名的。
简单直接，解析到function关键字，是一个函数声明，而函数声明需要函数名。JS引擎认为它“不完整”，所以报错了。
那么我们加上函数名，并他们都立即执行。
var fn = function() {console.log(1)}(); // 1
function fn2() {console.log(2)}(); // SyntaxError: Unexpected token )
还是报错了，不过这次报错的不是左括号，而是右括号。why？
在表达式后面加上()表示该表达式立即执行，在JS引擎逐行解释代码时，匿名函数就已声明好，当到function() {console.log(1)}()，解释器就会默认()前的内容为表达式，而不是语句。
实际情况是，第一个函数被识别为了表达式，第二个函数依旧是语句。
而对于第二个函数，后面加括号等价于：
function fn2() {console.log(2)}
()
原文解释：相当于先声明了一个叫
foo的函数，之后进行()内的表达式运算，但是()（分组操作符）内的表达式不能为空，所以报错。（也就是执行到右括号时，发现表达式为空，所以报错）
因为()和语句搭配时，()只有一个意义：运算中的优先级（小括号里的先运算）
那么对于第一个函数，根据上面的结论，我们可知，var fn =这一部分，神奇的将后面的函数语句转化为了表达式，使得后面的括号有意义（作为表达式执行）。
所以，如若想使第二个函数后面的括号有意义，那么我们必须将函数语句转化为函数表达式。
( function fn2() {console.log(2)} )(); // 2
并且只要不加;号（表示语句或表达式结束），还可以空行执行。
(
function fn2() {console.log(2)}
)
(
)
当然没什么用。
我们也知道了，立即执行函数表达式为什么有这么多种写法：
// 最常用的两种写法
(function(){ /* code */ }()); // 推荐写法
(function(){ /* code */ })(); // 当然这种也可以
// 括号和JS的一些操作符（如 = && || ,等）可以在函数表达式和函数声明上消除歧义
// 如下代码中，解析器已经知道一个是表达式了，于是也会把另一个默认为表达式
// 但是两者交换则会报错
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();
// 如果你不怕代码晦涩难读，也可以选择一元运算符
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();
// 你也可以这样
new function(){ /* code */ }
new function(){ /* code */ }() // 带参数
- 无论何时，给立即执行函数加上括号是个好习惯
通过以上的介绍，我们大概了解通过()可以使得一个函数表达式立即执行。
有的时候，我们实际上不需要使用()使之变成一个函数表达式，啥意思？比如下面这行代码，其实不加上()也不会保错：
// 可以不加括号
var i = function(){ console.log(10) }();
// 但是推荐还是加上
var i = ( function(){console.log(10)}() );
匿名函数表达式+闭包
这个用一个经典例子说明吧：
var nodes = document.querySelectorAll("a");
// alert出的都是3
for (var i=0;i<nodes.length;i++) {
nodes[i].addEventListener("click",function(e) {
e.preventDefault();
alert("i'am link #" + i);
})
}
// 正常
for (var i=0;i<nodes.length;i++) {
(function(num) {
nodes[i].addEventListener("click",function(e) {
e.preventDefault();
alert("i'am link #" + num);
})
})(i)
}
// 另一种改写：
var fn = function(num) {
return function(e) {
e.preventDefault();
alert("i'am link #" + num);
}
};
for (var i = 0; i < nodes.length; i++) {
nodes[i].addEventListener("click",fn(i),false)
}
// 但是无疑问，立即执行的函数表达式可读性更佳。
匿名函数表达式+递归
对于有函数名的函数表达式可以：
var count = 0;
function foo() {
console.log(count);
count++;
if (count === 10) {
return;
}
foo();
}
foo();
对于没有函数名的函数表达式递归，需要借用arguments.callee。
var count = 0;
(function () {
console.log(count);
count++;
if (count === 10) {
return;
}
arguments.callee();
})()
当然ES5后禁止使用callee()方法。
警告：在严格模式下，第5版 ECMAScript (ES5) 禁止使用
arguments.callee()。当一个函数必须调用自身的时候, 避免使用arguments.callee()。 通过要么给函数表达式一个名字,要么使用一个函数声明。
————MDN
匿名函数表达式 or 模块化
原文代码：
// 创建一个立即执行的匿名函数
// 该函数返回一个对象，包含你要暴露的属性
// 如下代码如果不使用立即执行函数，就会多一个属性i
// 如果有了属性i，我们就能调用counter.i改变i的值
// 对我们来说这种不确定的因素越少越好
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并不是counter的属性
i; // ReferenceError: i is not defined (函数内部的是局部变量)
网友评论