首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

JavaScript 立即執行函數 (IIFE) 返回函數的雙重調用機制解析

     編輯:程式設計綜合問答

原始代碼


var $aaa = (function() {
    return function(a){ alert(a); }
})(); // 第一次呼叫:執行外層 IIFE,返回內層函數
$aaa(10); // 第二次呼叫:執行內層函數,彈出 10

為何在第一個分號前括號寫 10 不會彈出?


// 錯誤嘗試
var $aaa = (function() {
    return function(a){ alert(a); }
}(10)); // ← 這裡傳 10 給「外層函數」,但外層函數**沒有參數**!
// 等價於
var outer = function() { return function(a){ alert(a); } };
var $aaa = outer(10); // outer 忽略參數,返回內層函數賦給 $aaa
// 程式結束,內層函數從未被呼叫 → 無彈窗

正確的單表達式雙重調用


// 寫法 1:外層 IIFE 後再加一對括號
var $aaa = (function() {
    return function(a){ alert(a); }
})()(10); // ① IIFE 返回 fn ② fn(10) 執行

// 寫法 2:外層函數接收參數並透傳
var $aaa = (function(x) {
    return function(a){ alert(a); }
})(10); // 此處 10 傳給外層參數 x,但外層未使用 x,同樣無效

// 寫法 3:外層使用參數決定返回哪個函數 (真正有意義的傳參)
var $aaa = (function(prefix) {
    return function(a){ alert(prefix + a); }
})("Num: ")(10); // 彈出 "Num: 10"

核心概念:函數為一等公民

  • function() { return function(){} } 是**高階函數**:接收/返回函數。
  • ()() 為**函數呼叫運算子**,左邊必須評估為函數物件。
  • 參數傳遞遵循**調用位置**:外層括號傳給外層函數,內層括號傳給返回的函數。

實務應用:模組模式與參數化工廠


var Counter = (function(initial) {
    var count = initial || 0;
    return {
        inc: function() { return ++count; },
        dec: function() { return --count; },
        get: function() { return count; }
    };
})(100); // 傳入初始值

Counter.inc(); // 101
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved