如何使用 'this' 关键字规避 ES6 Class 范围问题

Question

例如在Class构造函数中：

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

'onUserJoin' 被声明为 class 的方法，但被 socket.io 调用，因此 'this' 不是我的 Class。解决此问题的一种方法是使用 '=>' 函数。

示例：

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

现在 'this' 是我的 class，但是我如何引用这个匿名函数来取消订阅？

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

我试过这个：

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

并在方法中引用 self，但 self 正在跨套接字共享...

命名匿名函数可以解决它，但我更喜欢绑定选项。

Answer 1

您可以使用 Function.prototype.bind.

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

这确保 onUserJoin 具有正确的上下文，这将是您的 class 的实例。

Answer 2

您始终可以将箭头函数绑定到名称。

例如，

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);

如何使用 'this' 关键字规避 ES6 Class 范围问题

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

javascript

this

socket.io

ecmascript-6