拋棄立即執行函數 (IIFE)，讓 JavaScript 代碼更絲滑
作者：story
IIFE 曾經是 JavaScript 開發中不可或缺的工具，但隨著語言的發展，塊級作用域為我們提供了更優雅、更現代的解決方案。通過使用 let、const 和塊級作用域。
立即執行函數表達式（IIFE，Immediately Invoked Function Expression）曾是我們的救星，它幫助我們避免全局污染，創建私有作用域，解決了許多令人頭疼的問題。但是，隨著塊級作用域的引入，讓我們有了更優雅的解決方案。
一、IIFE：曾經的英雄，如今的累贅
1. IIFE 的經典用法
在 ES6 之前，我們經常這樣寫代碼：
// 經典的 IIFE 模式
(function() {
var privateVar = '這是私有變量';
var counter = 0;
function increment() {
counter++;
console.log('當前計數：', counter);
}
// 只暴露需要的接口
window.myModule = {
increment: increment
};
})();或者用于避免循環中的閉包陷阱：
// 使用 IIFE 解決循環閉包問題
for (var i = 0; i < 5; i++) {
(function(index) {
setTimeout(function() {
console.log('索引：', index);
}, 100);
})(i);
}2. IIFE 的問題
雖然 IIFE 解決了作用域問題，但它也帶來了一些困擾：
- 語法臃腫：需要額外的括號和函數聲明
- 可讀性差：嵌套層級增加，代碼變得難以理解
- 調試困難：匿名函數在調試時不好定位
- 不夠語義化：代碼意圖不夠明確
二、塊級作用域：現代 JavaScript 的優雅方案
1. 使用 let/const 替代 var
ES6 引入的 let 和 const 具有塊級作用域特性，讓我們可以拋棄復雜的 IIFE：
2. 循環中的塊級作用域
最明顯的改進體現在循環中：
3. 條件塊中的作用域隔離
三、性能對比：為什么塊級作用域更好
1. 內存使用
2. 執行效率
塊級作用域不需要創建函數調用棧，執行效率更高：
// 測試執行時間
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 msIIFE 曾經是 JavaScript 開發中不可或缺的工具，但隨著語言的發展，塊級作用域為我們提供了更優雅、更現代的解決方案。通過使用 let、const 和塊級作用域，我們可以：
- 寫出更清晰的代碼：語法更簡潔，意圖更明確
- 獲得更好的性能：避免不必要的函數調用開銷
- 享受更好的調試體驗：更容易定位問題和理解代碼流程
- 符合現代開發趨勢：與 ES6+ 特性更好地集成
責任編輯：趙寧寧
來源：
JavaScript
