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对象中调用的。

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

那么为什么箭头对象arrow2中没有它的值？为什么是全局窗口？

Answer 1

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

在定义const arrow的代码中，没有function上下文，只有箭头功能。因此，词汇this是全局对象（在草率模式下）或undefined在严格模式下。

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

Answer 2

箭头功能中的this与普通变量（const ant变量）的处理方式相似。箭头函数会在创建时记录this的值，并且this将始终指向箭头函数内部的值（因为您无法重新分配this）。

Answer 3

因为箭头函数不绑定自己的this，而是继承自父范围（在本例中为全局对象）

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}

箭头内的“ this”关键字功能

4 个答案: