1

traceur を使用して ES6 でクラスをテストしていますが、期待どおりに動作しません。

メソッドを別のクラスの参照として使用しようとしていますが、呼び出されると、の値を読み取るときに呼び出し元クラスの参照を取得しますthis。

これが私のコードです：

class A {
    constructor(anotherMethod){
        this.anotherMethod = anotherMethod;
        this.name = "A";
    }
    myMethod (){
        console.log(this.name);
        this.anotherMethod();
    }
}

class B {
    constructor(){
        this.a = new A(this.myMethod);
        this.name = "B";
    }
    myMethod(){
        console.log(this.name);
    }
}

var c = new B();
c.a.myMethod();

私の予想されるログは次のとおりです。

A
B

しかし、それは示しています：

A
A
4

1 に答える 1

2

クラス B では、コンストラクター関数が実行されると、次のようになります。

this.a = new A(this.myMethod);

実際には B のメソッドを A に設定していますmyMethod。A のコンストラクターが実行されると、

this.myMethod は、A の anotherMethod に設定されます。this.aB のコンストラクターで印刷しようとすると、 が得られname : Aます。これは実際にクラス A を参照しています。

メソッドを実行しようとすると、c.a.myMethod()A には への参照が含まれているためclass A、A の が呼び出されますmyMethod。このメソッド内では、A である現在の実行コンテキスト オブジェクトが参照されます。これが、両方のコンソールに表示されるthis理由です。A.

つまり、関数を A に割り当てるだけで、コンテキストを設定していません。

fat arrow以下を使用して強制できます。

class B {
    constructor(){
        this.a = new A(this.myMethod);
        this.name = "B";
    }

     myMethod = () => {
            console.log(this);
     }
}

これで、目的の出力が得られます。しかし、残念ながらtraceurサポートしていません。fat arrowの一部である内部関数をサポートするのは、babel だけですES7 stage 0 Class Properties。

Felix King が示唆しているように: 現在、使用してコンテキストをバインドするbindだけで十分です

class B {
    constructor(){
        this.a = new A(this.myMethod.bind(this));
        this.name = "B";
    }

     myMethod() {
            console.log(this);
     }
}
于 2015-04-03T04:57:36.893 に答える