JavaScript 閉包與 this 指向深度解析：get 對象方法鏈調用中的 this 綁定機制

代碼片段與疑問

var get = {
    byId: function(id) { return document.getElementById(id) },
    byClass: function(sClass, oParent) {
        var aElem = this.byTagName("*", oParent); // 這裡的 this 指向誰？
    },
    byTagName: function(elem, obj) { return (obj || document).getElementsByTagName(elem) }
};

問題：byClass 內部調用 this.byTagName 時，this 具體指向什麼？為何不直接寫 get.byTagName？

核心結論

this 永遠指向「調用該函數的對象」（調用站點決定綁定）。

執行流程圖解

// 調用鏈
get.byClass("subnav", oNav) 
   → byClass 內部：this === get
   → this.byTagName("*", oParent) 等價於 get.byTagName("*", oParent)

為何用 this 而非 get？

this 綁定四大規則（優先級遞減）

1. new 綁定：new Fn() → this 指向新實例
2. 顯式綁定：fn.call(obj) / fn.apply(obj) / fn.bind(obj) → this 指向 obj
3. 隱式綁定：obj.fn() → this 指向 obj（本例屬此類）
4. 默認綁定：獨立函數調用 fn() → 非嚴格模式指向 window，嚴格模式 undefined

進階：箭頭函數中的 this

var get = {
    byClass: (sClass, oParent) => {
        // 箭頭函數無 this，捕獲外層詞法作用域的 this（此處為 window！）
        // 錯誤示範：不能用箭頭函數定義對象方法
    }
};

最佳實踐建議

1. 對象字面量方法優先使用 function() {} 簡寫，保留 this 正確綁定。
2. 內部方法互調用統一使用 this.，支持繼承與重構。
3. 回調函數需保持 this 時，使用 .bind(this) 或箭頭函數（() => this.method()）。
4. 嚴格模式 'use strict' 可避免默認綁定污染全局對象。

理解 this 的「調用站點決定綁定」本質，是寫出健壯、可擴展 JavaScript 代碼的關鍵一步。

1. 上一篇文章： MFC DateTimePicker 控件導致運行時內存錯誤：DoModal 後 CString 指針被破壞的根因與修復
2. 下一篇文章： Eclipse 生成 WSDL 完整指南：從 Web Service 定義到契約優先開發

程式設計疑難解答

Java 快速排序分區邏輯深度解析：賦值 vs 交換

代碼片段 // 版本 A：賦值法（教科書常見） array[

HTML div 樣式不起作用的常見原因

CSS 的 id 選擇器不能以數字開頭，且 HTML 元素必

C++ STL map::find 與迭代器遍歷順序說明

代碼片段 map<int, int> m1; m

C++ 無限循環排查：變量初始化位置導致的經典錯誤

問題現象 初學者編寫循環代碼時，程序進入死循環無法退出。經排