Web/04-JavaScript基础/22-立即执行函数.md
2022-10-14 11:56:31 +08:00

2.1 KiB
Raw Blame History

title
22-立即执行函数

立即执行函数 IIFE

概念

函数定义完,就立即被调用,这种函数叫做立即执行函数。英文是 IIFEImmediately-invoked function expression立即调用函数表达式。

语法格式

语法1

(function() {
  // 函数体
})();

语法2立即执行函数也可以传参

(function() {
  // 函数体
})(a, b);

语法解释:

  • function(){}这种写法,需要再加一对圆括号,变成``

举例

现有匿名函数如下:

	function(a, b) {
		console.log("a = " + a);
		console.log("b = " + b);
	};

立即执行函数如下:

	(function(a, b) {
		console.log("a = " + a);
		console.log("b = " + b);
	})(123, 456);

立即执行函数往往只会执行一次。为什么呢?因为没有变量保存它,执行完了之后,就找不到它了。

IIFE的作用

为变量赋值

当给变量赋值需要一些较复杂的计算时使用IIFE显得语法更紧凑。

const sex = 'male';
const nickName = (function () {
  if (sex == 'male') {
    return '帅哥';
  } else {
    return '美女';
  }
})();

console.log(nickName);

将全局变量变为局部变量

现有如下代码:

var arr = [];
for (var i = 0; i < 5; i++) {
  arr.push(function () {
    console.log(i);
  });
}
arr[2](); // 打印5

我们知道上方代码中i 是全局变量所有函数共享内存中的同一个变量i。

现在,我们通过立即执行函数进行改造:

var arr = [];
for (var i = 0; i < 5; i++) {
  (function (i) {
    arr.push(function () {
      console.log(i);
    });
  })(i);
}
arr[2](); // 打印2

上方代码中i作为传递给了IIFE的形参让 i 得以成为 IIFE 的局部变量;并让 IIFE 并形成了闭包(arr[2]()打印出了IIFE内部变量 i 的值,说明形成了闭包)。

赞赏作者

创作不易,你的赞赏和认可,是我更新的最大动力: