调用 this.prop 时，与直接调用 [duplicate] 时的情况不同-解网

问：

箭头函数和这个 [重复] （5 答案）

2年前关闭。

我试图以箭头函数的方式理解它与普通函数之间的区别。然而，每次我似乎有了这个想法，都缺少一些东西，所以我开始稍微清洁一下空气，并发现了这一点，在编码了一段时间后，我得到了这个区别。

class Func {
    constructor(name) {
        this.prop = name;
    }


    arrowLogger(){
        let self = (() => {
            return this.prop;
        })();
        console.log(self);
    }

    simpleLogger(){
        console.log(this.prop);
    }
}

let example = new Func(1);
global.prop = 2;
console.log(example.arrowLogger());
console.log(example.simpleLogger())

为什么 2 个控制台 .log 打印相同的数字？

为什么下面的答案不一样？

class Func {
    constructor(name) {
        this.prop = name;
    }
    arrowLogger(){
       setTimeout(() => {
           console.log("arrow this:")
           console.log(this)
           console.log("arrow:",this.prop);
       }, 0)
    }

    simpleLogger(){
        setTimeout( function (){
            console.log("simple this:")
            console.log(this)
            console.log("simple:" , this.prop)
        } , 0)
    }

}

let example = new Func(1);
global.prop = 2;
console.log(example.arrowLogger());
console.log(example.simpleLogger())

P.S. 我在 Node.js 中写这篇文章时使用了<>。

JavaScript ecmascript-6 关闭此箭头函数

在第一个示例中，您会看到两次，因为箭头函数在调用的当前位置上关闭，该调用由您调用的方式设置为。所以是.在第二个示例中，您将获得不同的输出，因为计时器回调内部是不同的，因为箭头函数关闭而传统函数则不然（它们根据调用方式进行设置）。所以的回调使用，但的回调看到的是全局的。1thisarrowLoggerexamplearrowLoggerexample.arrowLogger()this.propexample.prop1thisthisthisarrowLoggerthis = examplesimpleLoggerthis

0赞 T.J. Crowder 2/7/2021

（旁注：在现代环境中，包括最新版本的 Node.js，您可以使用标准而不是特定于 Node.js 的 [遗憾的是，添加到标准中并不安全]。globalThisglobal

0赞 T.J. Crowder 2/7/2021

FWIW，我在我最近出版的书《JavaScript： The New Toys》的第 3 章中详细介绍了这一点。如果您有兴趣，请提供我个人资料中的链接。

0赞 T.J. Crowder 2/7/2021

我消失了一会儿，但请随时发表评论并提出后续问题，我很乐意解决您剩余的任何问题。:-)

答： 暂无答案

上一个：类中的箭头函数

下一个：Vanilla Javascript 在预算应用程序上添加 This.Title、值、费用表单金额

调用 this.prop 时，与直接调用 [duplicate] 时的情况不同

when calling this.prop, it behaves different compared to the situation when it is called directly [duplicate]

评论