ES6の "コールバック"で "this"クラスの使い方は？

Question

私はES2015でBabelを使用しています。そしての中にthisを使いたいです。

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/ 限り私は理解して、これはx()でコールバック関数を参照するので、私は

TypeError: this is undefined

を取得しています。解決策として、私は

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