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

DOM

試著在按鈕上綁定事件後看看 this 是誰?

<!-- addEventListener -->
<button type="button" id="btn">送出</button>
<!-- 直接綁在按鈕上 -->
<button type="button" onclick="console.log(this)">送出</button>

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

上述 this 會指向 DOM

搭配 bind()

如果希望 this 不是指向 DOM，而是由我們決定的話，可以使用 bind() 來賦予 this。

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

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

參考資料

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