“ this”引用如何绑定箭头符号？ 常规功能箭头功能奖金：要使用哪个

问题描述

我在JS中苦于“ this”关键字。 我列出了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();

这一次，无论我是否在人员对象中定义了foo，我上面提到的第一种情况和第二种情况都会打印出人员对象的引用。

这些结果的依据是什么？

解决方法

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

在常规函数中，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);
        });
    },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箭头功能无法绑定到此关键字，因此它将 词汇上一个范围，并在范围内使用此值 它是定义的。

如果您熟悉Fn.bind()，这是一种更改常规函数称为this的技巧。箭头函数并不遵循这种技巧，而是始终坚持引用其父范围的this。

尤其是如果您要开发一个供其他人使用的库，如果您想确信使用this来引用其父范围，请使用箭头功能。使用常规函数进行事件处理，因为this将引用事件源（按钮，文本字段等）。如果必须使用常规函数并且必须引用其父作用域，请使用closure冻结父作用域，而不要使用this。