“使用常规函数'this'表示调用该函数的对象”是什么意思？

Question

[在解释箭头功能时，w3schools说：“在常规功能中，此关键字代表调用该函数的对象，可以是窗口，文档，按钮或其他”，而“在常规功能中，此关键字代表调用函数的对象”。链接：https://www.w3schools.com/js/js_arrow_function.asp

我试图理解这句话，与箭头功能无关，而与箭头功能无关。我在网上发现的许多其他来源似乎与此矛盾，他们说，当一个函数被单独调用（而不是作为一种方法）时，“ this”将绑定到顶级对象（例如window）或未定义，这取决于在严格模式下。

因此，我建立了一个简单的示例（在浏览器中非严格运行）。我不想使用w3schools网站上的示例，因为它们使用事件处理程序进行解释，并且我想确保避免使用事件处理程序引入的任何其他绑定逻辑。

<script type="text/javascript">

function foo() {
    console.log('foo on ' + this.prop);
}

function bar() {
    console.log('bar on ' + this.prop);
    var f = this.foo;
    f();
}

var x = {
    prop: 'x'
};
window.prop = 'w';

x.foo = foo;
x.bar = bar;
x.bar();

</script>

此日志：“ x上的bar”和“ w上的foo”，这似乎表明在foo中，这是指窗口。所以很明显，w3schools的解释并不涉及在foo在bar内部被调用时foo's this与bar's this的自动绑定。但这还意味着什么？

Answer 1

嗯，让我们开始的前提是，W3Schools的声誉不及一流，您不应该为他们编写的内容而太费力地思考。实际上，您最好应改为阅读MDN。

在常规函数中，此关键字表示调用该函数的对象...

嗯，是的，不……对象什么也没叫。一个对象就是。这是其他东西的容器。这样的“东西”可以是一种功能。然后，您可能具有code，它从该“容器”中获取函数并进行调用。因此，代码调用函数，无论这些函数是对象的属性还是其他对象。

如何在函数内部确定this取决于确切地该代码如何调用函数。简而言之，在表达式a.b()中，this内的b将为a。通常，函数内的this是调用.之前的内容。如果在呼叫前没有.，例如只是b()，就没有this（确切显示的方式取决于严格模式）。有关所有详细信息，请参见https://stackoverflow.com/a/3127440/476。

这里的脚注是，您可以在一个函数上使用bind this或使用this或call显式传递另一个apply，并且粗箭头功能完全不遵循此规则。