在下面的代码中:
<!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 变量指向窗口？
由于技术上 onclick=foo() 是在按钮上定义的，因此当调用 onclick 函数时，它应该自动设置 this 的值> 按钮正确吗？我知道如何解决这个问题，但我从来不明白为什么会发生这种情况。
最佳答案
在 Ruby 或 Java 等语言中，this(或者在 Ruby 中为 self)将始终指向定义方法的对象。因此，在 Ruby 中，如果您正在使用 Bar 类中的 foo 方法，self 将始终指向该对象的实例Bar 类。
JavaScript 在这里的工作效果非常令人惊讶。因为在 JavaScript 中，函数上下文是在调用函数时定义的，而不是在定义函数时定义的!这是让许多来自不同领域的人接触 JS 时感到惊讶的事情。这种后期绑定(bind)是一种强大的机制，它允许我们在各种上下文中重用松散耦合的函数。
为了回答您的问题，this 当从 onclick 事件处理程序调用时由全局上下文执行。
关于javascript - 按钮 onclick 中 this 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47009710/