Как использовать этот «класс» в «обратных вызовах» в ES6?

Question

Я использую Babel с ES2015. И хотите использовать this внутри callback внутри метод.

class baz { 
    bar = "xxx"; 
    foo() { 
    x(function() { 
     console.log(this.bar); 
    }); 
    } 
} 

function x(callback) { 
    return callback(); 
} 
var y = new baz(); 
y.foo(); 

https://jsfiddle.net/dnthehnt/7/ Я получаю

TypeError: this is undefined

, потому что, насколько я понимаю, это относится к функции обратного вызова в x(). В качестве решения я использую

class baz { 
    bar = "xxx"; 
    foo() { 
    var bar = this.bar;//<===== 
    x(function() { 
     console.log(bar);//<===== 
    }); 
    } 
} 

function x(callback) { 
    return callback(); 
} 
var y = new baz(); 
y.foo(); 

https://jsfiddle.net/dnthehnt/6/ И получить

xxx

Это решение, но если у вас есть масса кода это становится очень запутанным и трудно писать. Есть ли лучшее решение для использования this? Или любая другая дисциплина для ES6 для использования обратных вызовов и этого.

Answer 1

Посмотрите на функции стрелок, и особенно способ this обрабатывается функциями стрелок по сравнению с классическими функциями.

class baz { 
    constructor() { this.bar = "xxx"; } 
    foo() { 
    x(() => { 
     console.log(this.bar); 
    }); 
    } 
} 

Ваше решение с использованием классических функций не будет работать, если бар был изменен между вызовом x и вызовом функции обратного вызова.

Это, как вы должны делать это с классическими функциями

class baz { 
    constructor() { this.bar = "xxx"; } 
    foo() { 
    const self = this; 
    x(function() { 
     console.log(self.bar); 
    }); 
    } 
} 

Или вы могли бы использовать bind, я полагаю.

class baz { 
    constructor() { this.bar = "xxx"; } 
    foo() { 
    x((function() { 
     console.log(this.bar); 
    }).bind(this)); 
    } 
}