js自执行函数表达式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js自执行函数表达式相关的知识,希望对你有一定的参考价值。

// 下面2个括弧()都会立即执行

(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的


和普通function执行的时候传参数一样,自执行的函数表达式也可以这么传参,因为闭包直接可以引用传入的这些参数,利用这些被lock住的传入参数,自执行函数表达式可以有效地保存状态。

// 这个代码是错误的,因为变量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‘);

}

以上是关于js自执行函数表达式的主要内容,如果未能解决你的问题,请参考以下文章

JS自调用函数问题(立即执行函数)

js中自执行函数(function(){})()和(function(){}())区别

自执行函数表达式

闭包函数自执行的原理

js中创建函数的三种方式及区别

立即执行函数表达式(自执行函数)