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

news2024/12/26 22:26:36

当前子专栏基础入门三大核心篇是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益，文末名片加V！
说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划加入私域社区。

作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能共赢”推动共建技术人成长共同体。

🏆 白宝书系列
🏅 Python全栈白宝书
🏅 产品思维训练白宝书
🏅 全域运营实战白宝书
🏅 大前端全栈架构白宝书

文章目录

⭐ 立即执行函数IIFE

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