〖大前端 - 基础入门三大核心之JS篇㉞〗- JavaScript 的「立即执行函数IIFE」

• 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
• 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
• 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。

---

• 🏆 白宝书系列
  • 🏅 启示录 - 攻城狮的自我修养
  • 🏅 Python全栈白宝书
  • 🏅 ChatGPT实践指南白宝书
  • 🏅 产品思维训练白宝书
  • 🏅 全域运营实战白宝书
  • 🏅 大前端全栈架构白宝书

IIFE（Immediately Invoked Function Expression）是 JavaScript 中一种常见的函数表达式，它的特点是定义完毕后立即执行。IIFE 可以用来创建一个独立的作用域，避免变量污染和命名冲突的问题。

⭐ 立即执行函数IIFE

IIFE（Immediately Invoked Function Expression，立即调用函数表达式）是一种特殊的JavaScript函数写法，一但被定义，就立即被调用。

基本语法：

(function () {
    console.log('你好');
})();

IIFE的原理：

IIFE的原理：在JavaScript中规定，语句体式不可以立即执行的，加上圆括号对之后，这个语句体就变成了一个表达式，而表达式是可以立即执行的。

除了加圆括号的方式，也可以通过在函数前面添加一个加号、减号、波浪线等方式将函数变成表达式，达到能够立即执行的目的。只不过圆括号使用的最为广泛。

IIFE的作用：

• 为变量赋值

• 当给变量赋值需要一些较为复杂的计算时（如if语句），使用IIFE可以显得语法更加”紧凑“

比如下面的例子：

var age = 19;
var sex = '女';
var title = (function () {
    if (age < 18) {
        return '小朋友';
    } else {
        if (sex == '男') {
            return '先生';
        } else {
            return '女士';
        }
    }
})();
console.log(title);  //

• IIFE可以在一些场合（如for循环中）将全局变量变为局部变量，语法显得紧凑

先来看一个全局变量导致的问题：

下面的代码中，for循环将函数推入数组中，但由于i是全局变量，导致后面输出的结果都是5

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

利用IIFE，我们每次循环时，都立即执行一个函数，通过这个函数，将参数i转换成局部参数。就可以解决这个问题了。

var arr = [];
for (var i = 0; i < 5; i++) {
    (function (i) {   //此时，i就变成了一个局部变量，形成了一个闭包
        arr.push(function () {
            console.log(i);
        })
    })(i);//传入实际参数i
}
arr[0]();  //0
arr[1]();  //1
arr[2]();  //2
arr[3]();  //3