Self Executed
文章目录

函数自执行

自执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
blogModule.CommentSubModule = (function() {
var my = {};
// ...

return my;
}());

// 由于括弧()和JS的&&,异或,逗号等操作符是在函数表达式和函数声明上消除歧义的
// 所以一旦解析器知道其中一个已经是表达式了,其它的也都默认为表达式了
// 不过,请注意下一章节的内容解释

var i = function() {
return 10;
}();
true && function() {
/* code */ }();
0,
function() {
/* code */ }();

用闭包保存状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 这个代码是错误的,因为变量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); //简单易懂, 这里将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');

}

Module模式和自执行函数的联合使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 创建一个立即调用的匿名函数表达式
// 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只存在于闭包)