How to circumvent the ES6 Class scoping issue with 'this' key word

Question

For example in the Class constructor:

Socket.on('user:join', onUserJoin);

'onUserJoin' is declared as a method of the class but is being called by socket.io so the 'this' is not my Class. A way to resolve this is to use the '=>' function.

example:

Socket.on('user:join', (data)=>{
        this.isOnline = true;
    });

Now 'this' is my class, but how do I reference this anonymous function to unsubscribe ?

socket.removeListener('user:join', ????);

I did try this:

let self;
class RoomController {
    constructor() {
    self = this;
    }
    ...
}

and reference the self in the methods but the self was being shared across sockets...

naming the anonymous function could solve it but I preferred for my case the bind option.

You do it the same way as in ES5. – Felix Kling May 16 '15 at 15:15 — Felix Kling, May 16 '15 at 15:15

score 2 · Accepted Answer · answered May 16 '15 at 06:19

2

You can use Function.prototype.bind.

Socket.on('user:join', onUserJoin.bind(this));

This ensures that onUserJoin has the correct context, which will be the instance of your class.

answered May 16 '15 at 06:19

Trey Cordova

124
4

score 2 · Answer 2 · answered May 16 '15 at 06:42

2

You can always bind the arrow functions to the names.

For example,

class RoomController {

    constructor() {
        this.flag = true;
    }

    // Assign the arrow function to the name `setFlag`
    setFlag = (v) => this.flag = v;
}

let r = new RoomController();

function tester(func) {

    func(false);
    console.log(r.flag);
    // false

    func(true);
    console.log(r.flag);
    // true

}

// Now you can pass the function around, `this` will still refer the object `r`
tester(r.setFlag);

answered May 16 '15 at 06:42

thefourtheye

233,700
52
457
497

1

Note that `setFlag = (v) => this.flag = v;` is an ES7 proposal. – Felix Kling May 16 '15 at 15:11
@FelixKling I wonder why babeljs implemented that already – thefourtheye May 16 '15 at 19:19
Because Babel also supports ES7 proposals :) It's just not ES6. – Felix Kling May 16 '15 at 19:24
@FelixKling Ah, the home page itself says "ES6 and **beyond**". Is there any other way to achieve what OP wanted in ES6? I checked in IRC, people suggested me to not use `class` and `this` together. – thefourtheye May 16 '15 at 19:25
There really isn't anything new regarding `this` in ES6 except arrow functions. `.bind` is still the way to go. I guess I'm missing the context, but I also don't know what is bad about `class` + `this` in particular. – Felix Kling May 16 '15 at 19:33
@FelixKling `Because they cause more ergonomically issues than they solve.` was the response which I got when I asked about why they both should not be used together. – thefourtheye May 16 '15 at 19:34
Meh. Maybe someone who doesn't like the class syntax. I don't really understand why some are so opposed to it. It's basically just syntactic sugar. No one forces anybody to use them. It's also pretty generic response, I wouldn't give too much about it. – Felix Kling May 16 '15 at 19:38
setFlag = (v) => this.flag = v; Internal Error SyntaxError: http://localhost:5000/src/app/AppController.js: Unexpected token (91:12) 89 | } 90 | > 91 | setFlag = (v) => this.flag = v; – Brett Jun 09 '15 at 05:36
@Brett Yes, as Felix pointed out, it is a ES7 feature :( – thefourtheye Jun 09 '15 at 05:38
What flag in Babel do you need to enable to make it work ? – Brett Jun 09 '15 at 07:16

How to circumvent the ES6 Class scoping issue with 'this' key word

2 Answers2