立即执行函数（IIFE）&&闭包

最新推荐文章于 2022-05-22 18:30:21 发布

转载最新推荐文章于 2022-05-22 18:30:21 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5acda5595188255580029719

本文详细介绍了JavaScript中立即执行函数表达式(IIFE)的概念及其应用，包括如何使用IIFE来保存状态并避免全局变量污染，同时展示了如何结合闭包实现特定功能。

1. function invoke () {
    return function () { //return返回0到invoke(),invoke()在进行调用
        alert(0)
    }
}
invoke()();//或者!invoke()();

2. (function () {
    return alert(1)
})();

3. (function () {
    alert(3);
}());

// 括号和JS的一些操作符（如 = && || ,等）可以在函数表达式和函数声明上消除歧义
// 如下代码中，解析器已经知道一个是表达式了，于是也会把另一个默认为表达式
4. var iife = function () {
    alert('IIFE')
}();

5. true && function(){
alert(2)
}();

6. !function(){ /* code */ }();
 ~function(){ /* code */ }();
 -function(){ /* code */ }();
 +function(){ /* code */ }();
 
 7. new function () {}
    new function () {} () //带参数
    
    写法五花八门，不胜枚举...
复制代码

再来瞧瞧IIFE与闭包的暖味关系：立即执行函数能配合闭包保存状态。

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
var p = document.getElementsByTagName('p');
for (var i = 0; i < p.length; i++) {    
    p[i].onclick = function () {
   alert('我是第' + i + '个')//输出4
    }
}
复制代码

为什么输出4，因为：代码预先解析，点击任意一个p执行onclick，已经达到了最后一个p,没有将点击每个p的过程值保存住，所以输出4

要想点击每个p出现对应的索引值，就得将i保存到函数内存中如下：利用IIFE存状态

for (var i = 0; i < p.length; i++) {
    p[i].onclick = new function (oldi) {
    return function () {
     alert('我是第' + oldi + '个');    
    }
    }(i)
}
//更直观，可读性的美化下...
for (var i = 0; i < p.length; i++) {
    new function (oldi) {
    p[i].onclick = function () {
   alert('我是第' + oldi + '个');
    }
    }(i) //即时调用存贮i
}
复制代码

9.IIFE在js模块化中的作用: 用立即执行函数处理模块化可以减少全局变量造成的空间污染，构造更多的私有变量。

var mo = (function (m) {
var moa = 0;
return {
    set:function () {return alert(moa);},
    get:function (i) {return alert(2 * i)},
    sgt:function (n) {return alert(n * m);}
}
})(22);
mo.set();//0
mo.get(1);//2
mo.sgt(33);//726
复制代码