JavaScript-立即执行函数（Immediately Invoked Function Expression，IIFE）

 立即执行函数（Immediately Invoked Function Expression，IIFE）是 JavaScript 里一种很独特的函数，它在定义后会马上执行。下面会详细介绍它的语法、用途、优点以及注意事项。

一、语法

立即执行函数一般有两种常见的语法形式：

形式一：使用括号将函数定义包裹起来，后面再紧跟一对括号用于调用

(function() {
    // 函数体
    console.log('这是一个立即执行函数');
})();

形式二：使用括号将整个函数定义和调用包裹起来

(function() {
    // 函数体
    console.log('这也是一个立即执行函数');
}());

二、用途

1.创建独立的作用域：

在 JavaScript 里，函数会创建自己的作用域。借助立即执行函数，可以创建一个独立的作用域，避免全局变量污染

注意：if、for没有独立作用域

(function() {
    let privateVariable = 10;
    console.log(privateVariable); // 可以在函数内部访问
})();



console.log(privateVariable); // 报错，在函数外部无法访问

2.模拟块级作用域（ES6 之前）

在 ES6 引入 let 和 const 之前，JavaScript 没有块级作用域。使用立即执行函数可以模拟块级作用域。

(function() {
    if (true) {
        var blockVariable = 20;
        console.log(blockVariable); // 可以在块内部访问
    }


    // 这里仍然可以访问 blockVariable

})();

3.初始化代码：

当你需要在页面加载时执行一些初始化代码，同时又不想让这些代码污染全局作用域，就可以使用立即执行函数。

(function() {
    // 初始化代码
    const initialData = { key: 'value' };
    // 进行一些操作
    console.log('初始化完成');
})();

三、优点

避免全局变量污染：由于立即执行函数创建了一个独立的作用域，函数内部定义的变量和函数不会影响全局作用域。

封装性：可以将一些实现细节封装在立即执行函数内部，只暴露需要的接口给外部使用。

const module = (function() {
    let privateValue = 0;
    function increment() {
        privateValue++;
    }
    function getValue() {
        return privateValue;
    }
    return {
        increment: increment,
        getValue: getValue
    };
})();
module.increment();
console.log(module.getValue()); // 输出 1

---

---

---

代码解释

---

---

---

1.代码结构总览

这段代码使用了一个 立即执行函数表达式（IIFE），创建了一个模块（Module）。模块通过闭包保护私有数据，只暴露必要的方法。

const module = (function() { 
    // 私有变量和函数
    // ...
    return {
        increment: increment,
        getValue: getValue
    };
})();

IIFE 的作用：立即执行函数，创建一个独立的作用域，避免污染全局变量。

返回的对象：将模块的公共方法暴露给外部。

2.私有变量和函数

在函数内部，定义了一个私有变量 privateValue 和两个私有函数 increment 和 getValue：

let privateValue = 0; // 私有变量，外部无法直接访问
function increment() {
    privateValue++;
}
function getValue() {
    return privateValue;
}

私有变量：privateValue 仅在函数内部可见，外部无法直接修改。

私有函数：increment 和 getValue 仅在函数内部定义，但可以通过返回的对象暴露给外部。

3. 返回的对象：暴露方法

关键部分是 return { increment: increment, getValue: getValue };。这里通过对象字面量返回两个方法：

return {
    increment: increment,
    getValue: getValue
};

对象字面量语法： increment: increment 表示对象的属性名是 increment，属性值是函数 increment。

同理，getValue: getValue 将函数 getValue 暴露为属性 getValue。

简化写法（ES6+）： 如果属性名和变量名相同，可以简写为 { increment, getValue }。

4. 闭包的作用

返回的 increment 和 getValue 函数会形成 闭包，保留对私有变量 privateValue 的引用：

闭包：函数可以访问其词法作用域（即函数定义时的环境）中的变量，即使该函数在外部被调用。

效果：

module.increment() 调用内部的 increment 函数，修改私有变量 privateValue。

module.getValue() 调用内部的 getValue 函数，返回当前的 privateValue。

5. 调用示例

module.increment(); // 调用暴露的 increment 方法，privateValue 变为 1
console.log(module.getValue()); // 输出 1

外部只能通过暴露的方法操作私有数据： 无法直接访问 privateValue，例如 module.privateValue 会报错。

四、注意事项

1.变量提升：

立即执行函数内部的变量和函数也会有变量提升的现象。

(function() {
    console.log(message); // 输出 undefined
    var message = 'Hello';
})();

2.参数传递：

立即执行函数可以接收参数，就像普通函数一样。

(function(name) {
    console.log('Hello, ' + name);
})('John');

---

---

结束

---

---

总之，立即执行函数是 JavaScript 里一个强大的工具，它能帮助你创建独立的作用域，避免全局变量污染，同时封装代码逻辑。