ES6クラスでスーパークラスにインスタンスメソッドを渡す

Question

super()が呼び出される前に、thisはコンストラクタ内で使用できません。

なお、インスタンスメソッドを参照する場合は、メソッドの先頭にthisという接頭辞を付ける必要があります。では、インスタンスメソッドをどのようにしてsuper()に渡すことが可能ですか？

Phaser frameworkには、Buttonクラスがあります。コンストラクタは、クリックイベントのコールバックを取ります

Constructor
new Button(game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame)

callback - The function to call when this Button is pressed.
callbackContext - The context in which the callback will be called (usually 'this').

私は、私自身のボタンクラスをしたい、私はこのように定義する：それでは、どのように私はsuperにclickHandlerを渡します

class MyButton extends Phaser.Button { 
    constructor(game) { 
     super(game, game.world.centerX, game.world.centerY, 'buttonImage'); 
    } 

    clickHandler(button, pointer) { 
     //handle the clicking 
    } 
} 

を？

this.clickHandlerは、エラー[Build Error] 'this' is not allowed before super() while parsing file: ....を返し、ちょうどclickHandlerを渡すと、ランタイムエラーUncaught ReferenceError: clickHandler is not definedが返されます。

提案がありますか？

Answer 1

これはES6 arrow functionsの良いユースケースです。これは語彙的にthisにバインドされています。ここ

矢印機能とインスタンスメソッドの呼び出しをプロキシすることによってインスタンス由来の値をロギングの一般的な例である：（。Try it out on an ES6 REPL、又はcompile in babelを参照）

class A { 
    constructor(method) { 
    if(method) { 
     method() 
     return 
    } 
    this.callback() 
    } 

    message() { 
    return "a" 
    } 

    callback() { 
    console.log(this.message()) 
    } 
} 

class B extends A { 
    constructor() { 
    super(() => this.callback()) 
    } 

    message() { 
    return "b" 
    } 

    callback() { 
    console.log(this.message()) 
    } 
} 

としてこれを行うと、superへの呼び出しの前に、すぐに新しいインスタンスのthisArgを参照することを避けることができます。私は同じ考えを持っていたが、それは私のフェイザーから新しいランタイムエラーました

class MyButton extends Phaser.Button { 
    constructor(game) { 
     super(
      game, 
      game.world.centerX, 
      game.world.centerY, 
      'buttonImage', 
      () => this.clickHandler() 
     ); 
    } 

    clickHandler(button, pointer) { 
     //handle the clicking 
    } 
}