document.getElementById 無法調用？this 綁定丟失與正確用法

錯誤現場

var getById = document.getElementById;
getById("logo"); // TypeError: Illegal invocation

根本原因

document.getElementById 內部依賴 this 指向 document 物件。直接賦值給變數並呼叫時，this 變為 window（或 strict mode 下的 undefined），導致原生方法拋出 Illegal invocation。

三種正確修復方式

1. 使用 .call() 顯式綁定 this

var getById = document.getElementById;
getById.call(document, "logo"); // 正確

2. 使用箭頭函數保持詞法作用域（ES6+）

const getById = (id) => document.getElementById(id);
getById("logo"); // 正確

3. 直接包裝成普通函數（最推薦，可讀性最佳）

function getById(id) {
    return document.getElementById(id);
}
getById("logo"); // 正確

延伸：其他易發生 this 丟失的 DOM API

• document.querySelector / querySelectorAll
• element.addEventListener / removeEventListener
• console.log（部分瀏覽器）
• Array.prototype.forEach 等陣列方法傳遞回調時

總結

原生 DOM 方法多為 this-sensitive，提取出來獨立呼叫必須顯式綁定 this。日常開發建議直接封裝成函數或使用箭頭函數，避免踩坑。