更多信息

Question

我有以下代码

<!DOCTYPE html>
<html>
  <body>

    <p id="demo">Demo Element</p>


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script>
      $('#demo').click(() => {
          console.log(this)
      })
    </script>
  </body>
</html>

当我单击#demo段落时，this将返回窗口对象。为什么会发生这种情况，如何使用此方法无法访问#demo段落。

Answer 1

因为您使用箭头语法创建了该函数：

()=>{

}

如果您要创建这样的函数，它将起作用：

$('#demo').click(function() {
      console.log(this)
})

更多信息

使用箭头语法创建函数时，此this元素将保持与您定义它的相同位置的相同上下文。

箭头函数不会创建自己的this，使用封闭执行上下文的this值。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this

Answer 2

这是因为您正在使用ECMAscript语法。箭头函数语法将函数内的数据绑定到自身，而常规函数语法则不然。

为什么这不会返回我点击的元素

2 个答案:

更多信息