Question

所以对于类中的super（）函数，我有些困惑。

似乎在发出事件时要返回this.name时，它返回未定义。

 enter class Girl extends EventEmitter{
    constructor(name, eyeColor, hairColor){
        super()
        this.name = name;
        this.eyeColor = eyeColor;
        this.hairColor = hairColor
    }
}

var hailey = new Girl("Hailey", "Green", "Black")


hailey.on("messageLogged", (callback)=>{
    callback(this.name)
}); 
hailey.emit("messageLogged", (msg)=>{
    console.log(msg)
})
    //returns undefined in console

但是当我通过属性名称返回创建的类的实例时，它就起作用了。

class Girl extends EventEmitter{
    constructor(name, eyeColor, hairColor){
        super()
        this.name = name;
        this.eyeColor = eyeColor;
        this.hairColor = hairColor
    }
}

var hailey = new Girl("Hailey", "Green", "Black")


hailey.on("messageLogged", (callback)=>{
    callback(hailey.eyeColor)
}); 

hailey.emit("messageLogged", (msg)=>{
    console.log(msg)
}) //returns Green

不确定这是否按预期工作，或者我缺少某些东西，因为这是我第一次尝试使用extend和super关键字。

当我查看过去使用过的类的示例时，我是通过新创建的实例来引用它的，但是我只想仔细检查一下StackOverflow和比我更自信的开发人员。

Answer 1

箭头函数始终按词法绑定，而不能上下文绑定。这意味着箭头函数内部的this将始终是声明箭头函数时的样子……因此，在(callback)=>{ callback(this.name)中，this实际上是全局对象。

如果要对函数进行上下文绑定，请使用function关键字。然后，您可以根据需要使用.bind。

然而，EventEmitter on回调已经绑定到事件发射器。这有效：

hailey.on("messageLogged", function (callback) {
    callback(this.eyeColor)
});

像在问题中一样使用hailey.eyeColor也是可以接受的。

Answer 2

这与事件发射器或super关键字无关。您错误地使用了JavaScript，这就是您遇到问题的原因。您需要在这里了解一件事：

您错误地使用'this'关键字。这是指函数的调用对象，因此对于驻留在预期类之外的箭头函数或匿名函数，这是指全局对象。因此，在您的情况下，“ this.name”是指显然没有“ name”属性的全局对象。

这就是为什么当您引用“ hailey.name”时，它起作用，而当您引用this.name，则它不起作用。

这是“ this”的应用方式：

在方法中，这是指所有者对象。
单独，这是指全局对象。
在函数中，这是指全局对象。
在函数中，在严格模式下，这是未定义的。
在事件中，这是指接收事件的元素。
像call（）和apply（）这样的方法可以将其引用到任何对象。

检出此link，以进一步了解在函数中使用“ this”的情况。

使用“ super”将“ eventEmitter”扩展到我的类时，this.name返回未定义

2 个答案: