When extending "eventEmitter" to my class using "super", this.name returns undefined

Question

so I'm a little confused when it comes to the super() function within a class.

It seems like when I want to return this.name when my event is emitted, it returns undefined.

 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

But when I return the created instance of the class by property name it works.

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

Not sure if this is working as intended or I am missing something as this is my first attempt at using the extends and super keywords.

When I look at examples I have done with classes in the past I reference it by the newly created instance, but I just wanted to double check with StackOverflow and developers who are more confident than myself.

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Jared Smith, Dec 14 '18 at 17:19
Has nothing to do with EventEmitter, extends, super, etc. This is just basic JavaScript. — Jared Smith, Dec 14 '18 at 17:20

score 4 · Accepted Answer · answered Dec 14 '18 at 17:33

Arrow functions are always lexically bound and cannot be context bound. That means that this inside of an arrow function will always be whatever it was when the arrow function was declared... So in (callback)=>{ callback(this.name), this is actually the global object.

If you want to do a context binding for a function, use the function keyword. Then, you can use .bind if you wish.

However, EventEmitter on callbacks are already bound to the event emitter. This works:

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

Using hailey.eyeColor as you did in your question is also perfectly acceptable.

score 1 · Answer 2 · answered Dec 14 '18 at 17:32

This has nothing to do with the event emitter or super keyword. You are using javascript wrongly that is why you are having issues. There one thing you need to understand here:

Your use of the 'this' keyword is wrongly intended. This refers to the calling object of a function, so for arrow functions or anonymous functions that reside outside the intended class, the this refers to a global object. So in your case the 'this.name' refers to a global object which obviously has no 'name' property.

So this is why when you refer to 'hailey.name', it works and when you refer to this.name, it doesn't work.

Here is how 'this' applies:

In a method, this refers to the owner object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.
Methods like call(), and apply() can refer this to any object.

checkout this link for more understanding on the use of 'this' in a function.

When extending "eventEmitter" to my class using "super", this.name returns undefined

2 Answers2