Javascript中的立即执行函数表达式(IIFE)

什么是立即执行函数表达式(IIFE)？

立即执行函数表达式（Immediately Invoked Function Expression，简称IIFE，读作"iffy"）是一种在定义后立即执行的JavaScript函数。它是一种设计模式，用于创建一个封闭的作用域，避免变量污染全局命名空间。

IIFE的基本语法如下：

(function() {
    // 函数体内的代码
})();

或者：

(function() {
    // 函数体内的代码
}());

这两种写法在功能上完全相同，只是括号的位置不同。

为什么需要IIFE？

1. 避免全局变量污染

在JavaScript中，默认情况下变量会被添加到全局作用域。使用IIFE可以创建一个私有作用域，防止变量污染全局命名空间：

// 全局作用域
var name = "全局名称";

// IIFE创建的私有作用域
(function() {
    var name = "私有名称";
    console.log(name); // 输出: "私有名称"
})();

console.log(name); // 输出: "全局名称"

2. 模块化代码

IIFE可以用来创建简单的模块，将相关功能封装在一起：

var counter = (function() {
    var count = 0;
    
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getValue: function() {
            return count;
        }
    };
})();

console.log(counter.getValue()); // 0
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

3. 保护私有变量

IIFE可以创建闭包，保护私有变量不被外部访问：

var calculator = (function() {
    // 私有变量
    var result = 0;
    
    // 私有函数
    function validate(value) {
        return typeof value === 'number';
    }
    
    // 公共API
    return {
        add: function(value) {
            if (validate(value)) {
                result += value;
            }
            return this;
        },
        subtract: function(value) {
            if (validate(value)) {
                result -= value;
            }
            return this;
        },
        getResult: function() {
            return result;
        }
    };
})();

calculator.add(5).subtract(2);
console.log(calculator.getResult()); // 3
console.log(calculator.result); // undefined (私有变量)
console.log(calculator.validate); // undefined (私有函数)

IIFE的高级用法

1. 传递参数

IIFE可以接收外部参数：

(function(global, name) {
    console.log("Hello, " + name + "! from " + global.location.href);
})(window, "小明");

2. 返回值

IIFE可以返回值，这在创建模块或初始化对象时非常有用：

var person = (function() {
    var privateData = {
        name: "张三",
        age: 30
    };
    
    return {
        getName: function() {
            return privateData.name;
        },
        getAge: function() {
            return privateData.age;
        }
    };
})();

console.log(person.getName()); // "张三"

3. 与ES6模块的比较

在ES6引入模块系统之前，IIFE是实现模块化的主要方式之一。现在，我们可以使用ES6模块：

// module.js
const privateValue = "私有值";

export function publicFunction() {
    console.log(privateValue);
}

// main.js
import { publicFunction } from './module.js';
publicFunction(); // "私有值"

尽管ES6模块提供了更好的模块化支持，但IIFE在某些场景下仍然有用，特别是在不使用构建工具的情况下。

4. 在循环中使用IIFE

IIFE可以解决循环中的闭包问题：

// 问题代码
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 输出五次 5
    }, 1000);
}

// 使用IIFE解决
for (var i = 0; i < 5; i++) {
    (function(index) {
        setTimeout(function() {
            console.log(index); // 依次输出 0, 1, 2, 3, 4
        }, 1000);
    })(i);
}

// 使用ES6的let关键字也可以解决
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 依次输出 0, 1, 2, 3, 4
    }, 1000);
}

IIFE的实际应用场景

1. jQuery插件开发

jQuery插件通常使用IIFE来避免污染全局作用域：

(function($) {
    $.fn.myPlugin = function(options) {
        // 插件代码
        return this.each(function() {
            // 对每个元素执行操作
        });
    };
})(jQuery);

2. 单例模式实现

var Singleton = (function() {
    var instance;
    
    function init() {
        // 私有方法和属性
        var privateVariable = "私有变量";
        
        function privateMethod() {
            console.log(privateVariable);
        }
        
        return {
            publicMethod: function() {
                privateMethod();
            }
        };
    }
    
    return {
        getInstance: function() {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
})();

var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

3. 初始化代码

IIFE常用于执行一次性的初始化代码：

(function() {
    // 初始化代码
    var app = document.getElementById('app');
    var config = {
        theme: 'dark',
        language: 'zh-CN'
    };
    
    // 设置应用
    app.className = config.theme;
    document.documentElement.lang = config.language;
    
    // 其他初始化代码...
})();