暗夜9.1破解版免费,幼儿免费稀缺区超清幼儿做的网站,玖玖五月天,国产亚洲精品精品精品

JavaScript 閉包經典問題：為什么輸出 10 次 i=10

zhenglin

2026年4月1日 16:12 本文熱度 292

問題代碼

先觀察以下代碼，思考輸出結果：

function f() {
    for(var i = 0; i < 10; i++) {
        setTimeout(() => {
            console.log('i=', i)
        });
    }
}


f();

輸出結果：

i= 10
i= 10
i= 10
...（共 10 次）

執行過程詳解

第一步：var 變量的作用域

for(var i = 0; i < 10; i())
    ↑
    └── var 聲明的變量是函數作用域
        整個函數 f 內都能訪問這個 i

第二步：循環執行過程

代碼高亮：
循環次數     i 的值    循環條件 (i < 10)
---------------------------------------
第 1 次      0         ? 通過
第 2 次      1         ? 通過
...
第 10 次     9         ? 通過
             10        ? 不通過，循環結束

循環結束后：i = 10

第三步：創建 10 個回調函數

for(var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log('i=', i)  // ← 所有回調共享同一個 i
    });
}

每次循環創建一個箭頭函數，都通過閉包引用變量 i

第四步：異步執行時序


時間軸：
─────────────────────────────────────────
| 同步執行階段        | 異步執行階段        |
─────────────────────────────────────────
for 循環完成      setTimeout 回調執行
i 遞增到 10       讀取 i 的值（此時 i=10）
                  輸出 10 次 i=10
─────────────────────────────────────────

核心原因

三個關鍵點

var 是函數作用域

不是塊級作用域

整個函數內只有一個 i 變量

閉包共享變量

10 個箭頭函數都引用同一個 i

不是創建 10 個獨立的 i 副本

setTimeout 異步執行

回調函數放入任務隊列延遲執行

執行時循環已結束，i 已經是 10

圖示理解：

變量 i 的生命周期：
─────────────────────────────→ 時間
     0 1 2 3 4 5 6 7 8 9  10
     └───┬───┘ └───┬───┘
         │                │
     同步循環執行        循環結束
                        i=10


回調函數 1:  ────────────────────→ 讀取 i (10)
回調函數 2:  ────────────────────→ 讀取 i (10)
...
回調函數 10: ────────────────────→ 讀取 i (10)

解決方案

方案 1：使用 let（推薦）?

代碼高亮：
function f() {
    for(let i = 0; i < 10; i++) {
        setTimeout(() => {
            console.log('i=', i)
        });
    }
}

原理： let 是塊級作用域，每次循環創建新的 i 綁定

輸出： i= 0 到 i= 9 各一次

方案 2：IIFE 立即執行函數

function f() {
    for(var i = 0; i < 10; i++) {
        (function(j) {
            setTimeout(() => {
                console.log('i=', j)
            });
        })(i);
    }
}

原理：通過函數參數保存每次循環的 i 值

方案 3：傳遞參數給 setTimeout

function f() {
    for(var i = 0; i < 10; i++) {
        setTimeout((j) => {
            console.log('i=', j)
        }, 0, i);
    }
}

原理： setTimeout 的第三個參數會傳遞給回調函數

知識點總結

一句話總結

var 的函數作用域 + 閉包共享變量 + setTimeout 異步執行 = 所有回調讀取到循環結束后的同一個 i 值（10）

參考文章：原文鏈接?

該文章在 2026/4/1 16:12:58 編輯過

關鍵字查詢

為什么

問題

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。