JavaScript中的IIFE

IIFE(Immediately Invoked Function Expression)指的是立即执行函数表达式,常见的形式有两种:(function(){ .. })()(function(){ .. }())。IIFE的存在一般是为了减少命名污染的问题。考虑如下代码:

1
2
3
4
5
function foo() {
var a = 3;
console.log(a);
}
foo(); // 3

假如函数foo()只执行一次,我们更加关注的是函数所实现的功能而并不在意函数叫什么(因为并不需要在别的地方被调用),这时候建议使用IIFE来代替:

1
2
3
4
(function() {
var a = 3;
console.log(a); // 3
})();

或者

1
2
3
4
(function(){
var a = 3;
console.log(a); // 3
}());

为了提高函数的可读性,你可能会给这个匿名函数表达式加上一个名称,比如:

1
2
3
4
(function foo(){
var a = 3;
console.log(a); // 3
}());

对IIFE的具名并不会污染其外部的词法作用域,你可以继续在外部声明一个名称为foo的函数,比如:

1
2
3
4
5
6
7
8
9
function foo() {
var a = 4;
console.log(a);
}
(function foo(){
var a = 3;
console.log(a); // 3
}());
foo(); // 4

IIFE还被常用于JS模块化设计,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var modules = (function() {
// 私有变量
var msg = "hello world";
var msgArr = ['h', 'e', 'l', 'l', 'o'];

function helloWorld() {
console.log(msg);
}

function sayHello() {
console.log(msgArr.join(''));
}
// 暴露方法
return {
helloWorld: helloWorld,
sayHello: sayHello
}
})();
modules.helloWorld(); // hello world
modules.sayHello(); // hello
console.log(modules.msg); // undefined

可见在外部无法访问模块化内部参数,这避免了内部参数被私自篡改以及变量污染等问题。

请作者喝瓶肥宅水🥤

0