JavaScript IIFE

一、什么是IIFE？

IIFE 是 Immediately Invoked Function Expression 的缩写，中文翻译为 立即执行函数表达式。它是一种 JavaScript 中的函数表达形式，定义后立即执行。

二、IIFE有什么特点？

1. 定义后立即执行：IIFE 不需要显式调用，定义后立即运行。
2. 独立作用域：IIFE 创建了一个独立的作用域，避免变量污染全局作用域。
3. 常用于初始化或隔离代码：适合一次性运行的代码片段，比如配置初始化或模块化封装。

三、基本语法

IIFE 的语法形式如下：

(function () {
  // 在这里编写代码
  console.log('IIFE executed!');
})();

或者使用箭头函数：

(() => {
    console.log('IIFE executed with arrow function!');
})();

四、基础用法

4.1 不带参IIFE

函数被包含在一对括号内，转化为表达式 。 紧随的 () 立即调用函数。

(function () {
    const message = 'Hello, IIFE!';
    console.log(message); // 输出: Hello, IIFE!
})();

4.2 带参IIFE

IFE 支持参数传递。函数立即运行时可以接收外部值。

(function (name) {
    console.log(`Hello, ${name}!`);
})('World');

4.3 独立作用域

IIFE 中的变量 x 与全局变量 x 不冲突，IIFE 创建了一个独立的作用域。

const x = 10;

(function () {
    const x = 20;
    console.log(x); // 输出: 20 (IIFE 内部变量)
})();

console.log(x); // 输出: 10 (全局变量未受影响)

4.4 初始化逻辑

IIFE 常用于初始化应用的配置或模块。IIFE 内部的 apiKey 是私有的，外部无法直接访问，通过返回的对象暴露了访问接口。

const config = (function () {
    const apiKey = '123456'; // 私有变量
    return {
        getApiKey: () => apiKey,
    };
})();

console.log(config.getApiKey()); // 输出: 123456

五、IIFE和普通函数的区别

IIFE（立即执行函数表达式）和普通函数的主要区别在于 执行时机 和 使用场景。

5.1 执行方式

IIFE定义后立即执行，不需要显式调用，定义时就会运行一次。

(function () {
    console.log('IIFE executed'); // 立即运行
})();

普通函数定义后，需要显式调用才会执行。

function normalFunction() {
    console.log('Normal function executed');
}

normalFunction(); // 必须显式调用

5.2 作用域

IIFE创建一个独立的局部作用域。 函数内定义的变量不会污染全局或外部作用域。

(function () {
    const privateVar = 'This is private';
    console.log(privateVar); // 输出: This is private
})();

console.log(privateVar); // 报错: privateVar 未定义

普通函数不执行时，其内部逻辑和变量不会影响作用域。 定义但未调用的函数，不会产生任何执行效果。

function normalFunction() {
    const privateVar = 'This is private';
}

normalFunction(); // 执行后，privateVar 是局部变量，仍然不可访问

console.log(typeof privateVar); // 报错: privateVar 未定义

5.3 使用场景

1. IIFE

• 一次性逻辑：用于只需要执行一次的逻辑，比如初始化数据、计算值等。
• 避免变量污染：在局部范围内定义变量，防止与外部变量冲突。

const config = (function () {
    const secretKey = '12345';
    return {
        getSecretKey: () => secretKey,
    };
})();

console.log(config.getSecretKey()); // 输出: 12345
console.log(typeof secretKey); // 报错: secretKey 未定义

1. 普通函数

• 复用逻辑：适合定义需要多次调用的函数。
• 模块化：适合将逻辑封装为可以重复调用的模块。

//可重复调用
function multiply(a, b) {
    return a * b;
}

console.log(multiply(2, 3)); // 输出: 6
console.log(multiply(4, 5)); // 输出: 20

5.4 性能和可读性

1. IIFE

• 性能：开销很小，但每次渲染时都会重新创建并执行。
• 可读性：逻辑较复杂时，嵌套的 IIFE 会降低代码的可读性。

示例（复杂逻辑）：

function Greeting({ user }) {
    return (
        <div>
            {(() => {
                const role = user.isAdmin ? 'Admin' : 'User';
                return user.isLoggedIn
                    ? `Welcome back, ${user.name}! Role: ${role}`
                    : 'Please sign in.';
            })()}
        </div>
    );
}

1. 普通函数

• 性能：对于重复逻辑，普通函数更高效，因为它不会每次都重新创建。
• 可读性：分离逻辑到独立函数中，代码更清晰、易维护。

5.5 总结

选择 IIFE 或 普通函数，应根据使用场景的需求：

• 如果逻辑是 临时的、一次性的，选择 IIFE。
• 如果逻辑需要 复用，选择普通函数。