JavaScript 函數調用與方法調用模式下 this 綁定差異解析

本文通過具體代碼演示 JavaScript 中函數調用模式與方法調用模式下 this 綁定的本質區別。

代碼示例

var doubling = function(x) {
    return x * 2;
};
var obj = {
    val: 100,
    prop: function() {
        var that = this;
        document.write('name: ' + that + '; type: ' + typeof(that) + '<br/>');
        return doubling(that.val);
    }(),
    get_prop: function() {
        var that = this;
        document.write('name: ' + that + '; type: ' + typeof(that) + '<br/>');
        return doubling(that.val);
    }
};

執行結果分析

• prop 初始化時：輸出 name: [object Window]; type: object。立即執行的匿名函數屬於函數調用模式，this 綁定全局對象 window。doubling(that.val) 對 window.val（undefined）運算，返回 NaN。
• 調用 obj.get_prop() 時：輸出 name: [object Object]; type: object。方法調用模式下 this 綁定 obj 本身。doubling(that.val) 正確返回 200。

核心結論

1. 函數調用模式：this 綁定全局對象（瀏覽器中為 window）。
2. 方法調用模式：this 綁定調用該方法的對象。
3. 對象字面量外動態添加屬性/方法，規律一致：唯有方法調用模式獲得正確 this 綁定。

理解此機制對避免 this 指向錯誤導致的 Bug 至關重要，也是 JavaScript 面向對象編程的基石。