IIFE (Immediately Invoked Function Expression) 曾是 JavaScript 开发中的重要工具，但随着 ES6+ 的块级作用域特性，我们现在有了更优雅的替代方案。

IIFE：曾经的英雄，如今的累赘

IIFE 的经典用法

// 经典的 IIFE 模块模式
(function() {
    var privateVar = '私有变量';
    var counter = 0;
    
    function increment() {
        counter++;
        console.log('当前计数：', counter);
    }
    
    window.myModule = {
        increment: increment
    };
})();

或者用于避免循环中的闭包陷阱：

for (var i = 0; i < 5; i++) {
    (function(index) {
        setTimeout(function() {
            console.log('索引：', index);
        }, 100);
    })(i);
}

IIFE 的主要问题

虽然 IIFE 解决了作用域问题，但它也带来了一些困扰：

语法臃肿：需要额外的括号和函数声明
可读性差：嵌套层级增加，代码变得复杂
调试困难：匿名函数在调试时难以定位
性能开销：每次调用都会创建新的函数作用域
不够语义化：代码意图不够明确

块级作用域：现代 JavaScript 的优雅方案

使用let/const替代var

ES6 引入的 let 和 const 具有块级作用域特性，让我们可以抛弃复杂的 IIFE：

// 旧方式：使用 IIFE
(function() {
    var privateVar = '私有变量';
    var config = {
        apiUrl: 'https://api.example.com',
        timeout: 5000
    };
    
    // 一些私有逻辑
    function processData(data) {
        return data.map(item => item.toUpperCase());
    }
    
    window.myModule = {
        process: processData
    };
})();

// 新方式：使用块级作用域
{
    const privateVar = '私有变量';
    const config = {
        apiUrl: 'https://api.example.com',
        timeout: 5000
    };
    
    // 一些私有逻辑
    function processData(data) {
        return data.map(item => item.toUpperCase());
    }
    
    window.myModule = {
        process: processData
    };
}

循环中的块级作用域

最明显的改进体现在循环中：

// 旧方式: 使用 IIFE
for (var i = 0; i < 5; i++) {
    (function(index) {
        setTimeout(() => console.log('IIFE 方式: ', index), 100);
    })(i);
}

// 新方式: 使用 let
for (let i = 0; i < 5; i++) {
    setTimeout(() => console.log('块级作用域: ', i), 100);
}

条件块中的作用域隔离

// 复杂的条件逻辑处理
if (userType === 'admin') {
    const adminConfig = {
        permissions: ['read', 'write', 'delete'], 
        level: 'high'
    };

    const processAdminAction = (action) => {
        return adminConfig.permissions.includes(action);
    };

    // adminConfig 和 processAdminAction 只在这个块中存在
    if (processAdminAction('delete')) {
        console.log('管理员可以执行删除操作');
    }
} else if (userType === 'user') {
    const userConfig = {
        permissions: ['read'], 
        level: 'low'
    };

    const processUserAction = (action) => {
        return userConfig.permissions.includes(action);
    };

    // 这里的变量不会与上面的 adminConfig 冲突
    if (processUserAction('read')) {
        console.log('普通用户可以读取数据');
    }
}

性能对比：为什么块级作用域更好

内存使用

// IIFE 创建了函数作用域，可能保持不必要的引用
(function() {
    var largeData = new Array(1000000).fill('data');
    var processedData = largeData.map(item => item.toUpperCase());
    // 即使 largeData 不再需要，函数作用域可能仍然保持引用
    window.result = processedData;
})();

// 块级作用域更容易被垃圾回收
{
    const largeData = new Array(1000000).fill('data');
    const processedData = largeData.map(item => item.toUpperCase());
    // largeData 在块结束后立即可以被垃圾回收
    window.result = processedData;
}

执行效率

块级作用域不需要创建函数调用栈，执行效率更高：

// 测试执行时间
console.time('IIFE');
for (let i = 0; i < 100000; i++) {
    (function() {
        const temp = i * 2;
        const result = temp + 1;
    })();
}
console.timeEnd('IIFE');
// => IIFE: 8.159912109375 ms

console.time('Block Scope');
for (let i = 0; i < 100000; i++) {
    {
        const temp = i * 2;
        const result = temp + 1;
    }
}
console.timeEnd('Block Scope');
// => Block Scope: 1.242919921875 ms

IIFE 曾经是 JavaScript 开发中不可或缺的工具，但随着语言的发展，块级作用域为我们提供了更优雅、更现代的解决方案。通过使用 let、const 和块级作用域，我们可以：

写出更清晰的代码：语法更简洁，意图更明确
获得更好的性能：避免不必要的函数调用开销
享受更好的调试体验：更容易定位问题和理解代码流程
符合现代开发趋势：与 ES6+ 特性更好地集成

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

抛弃立即执行函数 (IIFE)，拥抱现代 JavaScript 块级作用域

IIFE：曾经的英雄，如今的累赘

IIFE 的主要问题

块级作用域：现代 JavaScript 的优雅方案

性能对比：为什么块级作用域更好