"this"引用如何绑定箭头表示法？

Question

我正在与"这个"；JS中的关键字。我列出了3个我感到困惑的不同案例。

const person = {
name: "joe",
talk(){
this.foo(function (){
console.log(this);
});
},
foo(a) {
a()
}
};
person.talk();

在第一个场景中：尽管foo是person对象的成员；当我调用foo函数时，它会返回一个窗口对象引用。

const person = {
name: "joe",
talk(){
foo(function (){
console.log(this);
});
},
};
function foo(a){
a()
}
person.talk();

在第二个场景中：虽然我将foo函数放在person对象之外，但没有任何更改。

但是，如果我用箭头符号在foo函数中定义回调函数的方式如下：

const person = {
name: "joe",
talk(){
foo(() => {
console.log(this);
});
},
};
function foo(a){
a()
}
person.talk();

然后这一次，我上面提到的第一个场景和第二个场景打印出了person对象的引用，而不管foo是否在person对象中定义。

这些结果的依据是什么？

Answer 1

我要无耻地复制粘贴https://www.w3schools.com/js/js_arrow_function.asp此处：

在正则函数中，this关键字表示调用了函数，该函数可以是窗口、文档、按钮或者其他什么。

对于箭头函数，this关键字始终表示对象定义了箭头函数。

要进一步详细说明您的场景：

正则函数

const person = {
name: "joe",
talk(){
this.foo(function (){
console.log(this);
});
},
foo(a) {
a()
}
};
person.talk();

和

const person = {
name: "joe",
talk(){
foo(function (){
console.log(this);
});
},
};
function foo(a){
a()
}
person.talk();

这个==调用函数序列的对象==窗口

箭头函数

const person = {
name: "joe",
talk(){
this.foo(() => {
console.log(this);
});
},
foo(a) {
a()
}
};
person.talk();

和

const person = {
name: "joe",
talk(){
foo(() => {
console.log(this);
});
},
};
function foo(a){
a()
}
person.talk();

这个==定义函数的对象==个人

奖金：使用哪一个

引用自https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/:

ES6箭头函数不能绑定到this关键字，因此它将从词法上转到一个作用域，并在中的作用域中使用this的值它是被定义的。

如果您熟悉Fn.bind()，那么更改正则函数所称的this是一个众所周知的技巧。箭头函数不遵循此技巧，始终坚持引用其父作用域的this。

特别是如果您正在开发一个供其他人使用的库，如果您想确信使用this来引用其父作用域，请使用箭头函数。使用常规函数处理事件，因为this将引用事件源(按钮、文本字段等(。如果必须使用正则函数并且必须引用其父作用域，请使用闭包冻结父作用域，而不是使用this。