為什么“this”關鍵字在 EventListener 的匿名 function 中不起作用？

Question

 var slide = document.getElementById("slider"); slide.onclick = function() { alert(this.value) }

 <input type="range" id="slider" name="slider">

使用onclick可以工作。

 var slide = document.getElementById("slider"); slide.oninput = function() { alert(this.value) }

 <input type="range" id="slider" name="slider">

使用oninput有效。

 var slide = document.getElementById("slider"); function thistest() { alert(this.value) } slide.addEventListener("input", thistest, false);

 <input type="range" id="slider" name="slider">

將單獨的eventlistener與事件監聽器一起使用。

然而...

 var slide = document.getElementById("slider"); slide.addEventListener("input", ()=> { alert(this.value) } );

 <input type="range" id="slider" name="slider">

在eventlistener上使用匿名 function ，它返回未定義。

根據 MDN， eventlisterner上的this應該返回它所在元素的值。 但事實並非如此。 為什么？

Answer 1

匿名函數（ function(...) {... } ）和箭頭函數（ (...) => {... } ）之間是有區別的——箭頭函數在調用時實際上並不綁定this 。 因此，在您的示例中，只需嘗試將()=>替換為function() 。

Answer 2

您在箭頭 function 內使用此關鍵字，則此關鍵字將指向上一級，而不會指向同一級別。

這就是為什么你得到未定義的價值。