箭头函数中的“this”关键字

Question

尝试正确学习箭头函数中的“this”关键字。

阅读并观看了一些视频后，我了解到使用常规函数，只要调用该函数，就会定义“this”关键字。

并且箭头函数内的“this”将根据“this”的值在您构建该函数的任何地方进行定义。

所以我打开控制台并玩了两个对象和两个功能。

我这样做了：

const reg = {
    reg1: "reg1",
    reg2: {
            reg3: 'reg3',
            regFunc: function(){console.log(this)}
    }
}

const arrow = {
    arrow1: "arrow1",
    arrow2: {
            arrow3: 'arrow3',
            arrowFunc: () => {console.log(this)}
    }
}

reg.reg2.regFunc()
VM712:5 {reg3: "reg3", regFunc: ƒ}

arrow.arrow2.arrowFunc()
VM712:13 Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}

对于 reg 对象，我得到它，因为它是在它向我显示的 reg2 对象内调用的。

但是对于箭头对象，箭头函数中的 this 关键字是在箭头内的 arrow2 对象内创建的。

那么为什么它的值不在箭头对象 arrow2 中呢？为什么是全局窗口？

Answer 1

this是为function执行上下文定义的。

在定义的代码中const arrow没有function上下文，只有箭头函数。所以词法this是全局对象（在草率模式下）或undefined在严格模式下。

这是一种常见的误解，认为对象字面量（分配给arrow或 to的对象字面量arrow2）会以某种方式绑定this到它。