Question

在下面的代码中：

<!DOCTYPE html>
<html>
  <script type="text/javascript">
    function foo() {
      console.log(this);
   }
  </script>
  <body>
    <button id="bar" onclick="foo()">Button</button>
    <p id="demo"></p>
  </body>
</html>

为什么当我在我的按钮上说onclick=foo()并在foo函数中说console.log(this)时，this变量指向window？

由于技术上onclick=foo()已在按钮上定义，因此当调用onclick函数时，它应自动将this的值设置为按钮正确吗？我知道如何解决这个问题，但我从未理解为什么会发生这种情况。

Answer 1

在Ruby或Java等语言中，this（或者在Ruby self的情况下）将始终指向定义方法的对象。因此，在Ruby中，如果您正在使用foo类中的Bar方法，self将始终指向作为Bar类实例的对象。

JavaScript在这里非常令人惊讶。因为在JavaScript中函数上下文是在调用函数时定义的，而不是在定义它时！当从不同领域来到JS时，这可能会让许多人感到惊讶。这种后期绑定是一种强大的机制，它允许我们在各种环境中重用松散耦合的函数。

回答你的问题，this，当从onclick事件处理程序调用时，由全局上下文执行。

Answer 2

在我看来，这是因为你没有将按钮传递给你的功能：

<input type="button" value="mybutton1" onclick="dosomething(this.value)">

虽然你的代码是这样的：

<button id="bar" onclick="foo()">Button</button>

并且您的函数条目为空：

    <script type="text/javascript">
      function foo() {
        console.log(this);
      }
    </script>

所以你应该将它传递给你的函数：

   <script type="text/javascript">
      function foo(e) {
        console.log(e);
      }
    </script>

并且因为调用未设置此值，所以默认为全局对象，即浏览器中的窗口。

了解更多信息，请check this出来。

在onclick中按钮的值

2 个答案: