共计 4152 个字符,预计需要花费 11 分钟才能阅读完成。
一句话解释
-
立刻执行函数是什么?
立刻执行函数就是申明一个匿名函数,并马上调用这个匿名函数
-
立刻执行函数有什么用处
创立一个独立的作用域,这个作用域外面的变量,里面拜访不到(即防止 ” 变量净化 ”)
咱们先问本人一个问题:立刻执行函数是闭包吗?如果你不能马上答复这个问题,那么无妨往下看看
什么是立刻执行函数
来自 MDN 的答复是
IIFE(立刻调用函数表达式)是一个在定义时就会立刻执行的 JavaScript 函数 )。
这样就能造成一个 块级作用域 成果
(function () {// 块级作用域})();
这在没有块级作用域的 ES3 时代,是相当广泛的做法
以前有个有名的面试题,如下所示:
for (var i = 0; i < 5; i++) {setTimeout(function () {console.log(i);
}, 1000 * i);
}
后果是什么,5,5,5,5,5,而且是在每 1 秒打印一个 5
问,有什么办法让它的后果是 1,2,3,4,5
咱们剖析一下为什么会在一开始的时候打印 5,这是因为 setTimeout 是异步,要塞进异步队列中,所以一开始先循环,循环完了再执行 setTimeout(func, wait)。
所以执行程序是
for (var i = 0; i < 5; i++) {// 赋值 setTimeout(function() {console.log(i) }, 1000 * i)
// i 1,2,3,4,5
}
// setTimeout 提早执行,var i 被对立赋值为 5
setTimeout(function () {console.log(5);
}, 1000 * 1);
setTimeout(function () {console.log(5);
}, 1000 * 2);
setTimeout(function () {console.log(5);
}, 1000 * 3);
setTimeout(function () {console.log(5);
}, 1000 * 4);
setTimeout(function () {console.log(5);
}, 1000 * 5);
又因为,for() {} 不会造成块级作用域,所以会拿最初的值也就是 5 来给每一个 func 中的 console.log(i) 赋值,最初导致了这样的打印后果
剖析完后,咱们要思考一下,怎么保住 setTimeout 中的变量 i,通常的方法是通过作用域来爱护,例如用块级作用域来爱护 i,办法是用 let 代替 var。
for (let i = 0; i < 5; i++) {
// 将 var 改成 let 即可
setTimeout(function () {console.log(i);
}, 1000 * i);
}
或者用函数作用域来爱护,因为函数作用域内的变量,函数外不能拜访
for (var i = 0; i < 5; i++) {(function (j) {setTimeout(function () {console.log(j);
}, 1000 * j);
})(i);
}
用 let 的办法的伪代码相似于立刻执行函数。代码了解为:
每传入一个变量 i,并立刻执行 setTimeout,执行结束一次后,for 循环中的 i 变为 1,再执行 setTimeout,这样就达到了成果
其原面试题为什么会呈现这种后果,实质是 JavaScript 中的 for 循环不能爱护 i 被扭转,即 for 循环不能造成块级作用域。
通过这题咱们能清晰的认知到立刻执行函数的用途: 定义时就会立刻执行的函数
IIFE 的延展状态
咱们常见的 IIFE 是这样的:
;(function() {...})()
然而不乏看到这样的代码
(function (window) {console.log(window);
})(window);
刚开始咱们会很懵逼,这是能够传值?
先看看一般函数怎么运行的
var foo = function (name) {console.log(name);
};
foo('johan');
咱们能够在任何中央调用 foo 函数,
之所以要发明“IIFE”,是因为它们是立刻调用的函数表达式,这意味着它们会在运行时立刻被调用,且咱们不会再去调用它,它只运行一次,如下所示:
var foo = (function (name) {console.log(name);
})('johan');
甚至,咱们能够不必赋值给 foo,因为咱们并不会应用 foo
(function (name) {console.log(name);
})('johan');
以上例子很好了解吧,本人定义一个匿名函数并且本人传入参数调用
为什么要有 IIFE
起因很简略,为了让一块代码执行且不被其余库影响。在 ES6 的模块呈现之前,咱们写 JavaScript 不是在 HTML 的 script 标签中书写,就是在 javascript 文件中写代码再通过 script 标签引入。当你写的(全局)办法和他人(第三方库也好,共事的代码也好)雷同时,就会有办法笼罩的 bug 存在
所以用 IIFE,保障了每一个 IIFE 中的代码变量不会在全局作用域下被拜访,也就起到了变量爱护的作用
实用场景
UMD 打包
(function (root, factory) {if (typeof define === 'function' && define.amd) {define(factory);
} else if (typeof exports === 'object') {module.exports = factory;} else {root.MYMODULE = factory();
}
})(this, function () {//...});
实质就是把 AMD 和 CommonJS 联合在一起
源码中的立刻执行函数
jQuery 中的:
(function(window, undefined) {...})(window);
underscore 中的:
(function(global, factory) {...}(this, (function () {...})));
这些大佬库中都用到了立刻执行函数来爱护库中变量
立刻执行函数是闭包吗
回到一开始的问题,IIFE 是闭包吗?
必定不是,IIFE 是立刻执行函数,执行完就被垃圾回收了,怎么会是闭包呢?
什么是闭包?闭包是要利用作用域机制把控公有变量
两者为什么会被人搞混?
因为 IIFE 能起到隔离变量的作用,为模块化没进去前而做的 hack 变量爱护机制。而闭包恰好也能起到隔离变量的成果。所以这两者会被人搞混
那有立刻执行函数实现闭包的场景吗?
var Module = (function () {
var private = '公有变量';
var foo = function () {console.log(private);
};
return {foo: foo,};
})();
Module.foo(); // 公有变量
Module.private; // undefined
立刻执行函数不是闭包,然而它能够做出闭包成果
三题见真章
第一题
(function () {if (typeof name === 'undefined') {console.log('Goodbye' + name);
} else {
var name = 'Jack';
console.log('Hello' + name);
}
})();
<details>
<summary>
答案
</summary>
Goodbye undefined
<p>
解题思路:</p>
<p>
咱们都晓得一个函数定义并立刻执行就是立刻执行函数,既然是函数,就造成了作用域,在这个题目中,函数内有变量晋升,即 var name 被提到函数顶部,且默认为 undefined,所以 typeof name === 'undefined' 时,console.log('Goodbye undefined')
</p>
</details>
第二题
var _fn = function () {console.log(1);
};
(function () {var _fn = function () {console.log(2);
};
var fn1 = function () {this._fn.apply(this);
};
var obj = {_fn: function () {console.log(3);
},
fn2: fn1.bind({_fn: function () {console.log(4);
},
}),
fn3: fn1,
};
var fn4 = obj.fn3;
var fn5 = obj.fn2;
fn1();
obj.fn2();
obj.fn3();
fn4();
this.fn5();})();
<details>
<summary>
答案
</summary>
<p>1</p>
<p>4</p>
<p>3</p>
<p>1</p>
<p> 报错 this.fn5 not function</p>
</details>
第三题
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < 6; i++) {liList[i].onClick = function () {alert(i); // 为什么 alert 进去的总是 6,而不是 0,1,2,3,4,5
};
}
<details>
<summary>
答案
</summary>
<p> 为什么 alert 的值总是 6,因为 i 是贯通整个作用域的,而不是给每个 li 调配一个 i
解决方案有很多,例如用 let 代替 var。或者是用 IIFES</p>
</details>
参考资料
- 揭秘 IIFE 语法
系列文章
- 深刻了解 JavaScript——开篇
- 深刻了解 JavaScript——JavaScript 是什么
- 深刻了解 JavaScript——JavaScript 由什么组成
- 深刻了解 JavaScript——所有皆对象
- 深刻了解 JavaScript——Object(对象)
- 深刻了解 JavaScript——new 做了什么
- 深刻了解 JavaScript——Object.create
- 深刻了解 JavaScript——拷贝的机密
- 深刻了解 JavaScript——原型
- 深刻了解 JavaScript——继承
- 深刻了解 JavaScript——JavaScript 中的始皇
- 深刻了解 JavaScript——instanceof——找祖籍
- 深刻了解 JavaScript——Function
- 深刻了解 JavaScript——作用域
- 深刻了解 JavaScript——this 关键字
- 深刻了解 JavaScript——call、apply、bind 三大将