JavaScript 核心觀念(43)-函式以及 This 的運作-this：DOM

發表於 2021-01-10 更新於 2021-06-06 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

接下來講講 this 跟 DOM 的關係。

前言

接下來講講 this 跟 DOM 的關係。

DOM

接下來將會說明 this 在 DOM 操作上有什麼樣的差異，其實這部分也是一個很大的雷點。

首先先看一下範例程式碼

1	<button type="button">送出</button>

首先通常監聽行為我們兩種寫法，一種是直接寫在 HTML 上的

1	<button type="button" onclick="console.log(this)">送出</button>

而當你在 HTML 上面點這個元素時，其實會指向該 HTML

DOM

而另一種綁定方式也就是我們常見的 addEventListener

1	<button type="button" id="btn">送出</button>

var btnID = document.getElementById('btn');
btnID.addEventListener('click', function() {
  console.log(this);
})

這種 this 的指向也會是 DOM 本身

因此如果今天有希望該 this 是指向他處的話，那麼就可以搭配上一章節的技巧 bind 來混用，在此並不建議使用 call，因為函式會被立即執行

1
2
3

var obj = {
  name: 'Ray'
}

1	<button type="button" id="btn">送出</button>

var obj = {
  name: 'Ray'
}
var btnID = document.getElementById('btn');

function fn() {
  console.log(this);
}
btnID.addEventListener('click', fn.bind(obj));

參考文獻

JavaScript 核心篇