箭头函数内的“this”关键字[重复]答案

【问题标题】：'this' key word inside arrow functions [duplicate]箭头函数内的“this”关键字[重复]
【发布时间】：2020-05-05 02:57:38
【问题描述】：

尝试正确学习箭头函数内的“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中呢？为什么是全局窗口？

【问题讨论】：

因为箭头函数采用了它们周围（函数）范围的this。由于这个箭头函数不在任何其他函数内，它的封闭范围是全局的，因此它的this 是全局对象。

标签： javascript

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

因为箭头函数不绑定自己的 this 而是从父范围继承，在这种情况下是全局对象

【讨论】：

我知道您目前无法发表评论，但如果您正在回答，请确保其有意义。

【解决方案3】：

this 指针指向 window 对象，因为它是父对象。而箭头函数中的this总是指向父作用域，这里是window对象。

如果您使用类或函数（例如）包装该箭头函数，则this 将指向该对象。

const func = {
    b: {
        d: function() {
            console.log(this)
        }
    }
}

const arrow = {
    b: {
        d: function() {
            const e = () => {
                console.log(this)
            }
            return e()
        }
    }
}

func.b.d()  >> {d:f}
arrow.b.d() >> {d:f}

【讨论】：

【解决方案4】：

在箭头函数中，this 的处理方式与普通变量类似（constant one）。箭头函数在创建时记录this 的值，this 将始终指向箭头函数内的该值（因为您无法重新分配this）。

【讨论】：