箭头函数中的'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 中它的值不是全局 window 而是全局对象呢？

- ohn

---

因为箭头函数采用其周围（函数）作用域的 this。由于此箭头函数不在任何其他函数内部，其封闭作用域是全局的，因此其 this 是全局对象。 - Robin Zigmond

Answer 1

this在函数执行上下文中被定义。

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

普遍存在一种误解，即对象字面量（分配给arrow或arrow2的字面量）会以某种方式将this绑定到它本身。

- trincot

Answer 2

在箭头函数中，this 被视为一个普通变量（一个 const 常量）。箭头函数记录了创建时的 this 的值，并且 this 在箭头函数内部始终指向该值（因为你无法重新分配 this）。

- marzelin

Answer 3

由于箭头函数不绑定它们自己的this，而是从父级作用域继承，这种情况下父级作用域是全局对象。

- Murali Kumar

---

我知道你现在可能无法发表评论，但如果你回答，请确保它有意义。 - Sid

Answer 4

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}

- Arun Pandi