Passaggio di un metodo di istanza a super con classi ES6

Question

Come ho capito cose, this non è disponibile all'interno del costruttore prima che venga chiamato super().

Ancora, quando ci si riferisce ai metodi di istanza, è necessario prefissare il metodo con this. Quindi, come è possibile passare un metodo di istanza a super()?

ad es. Nel Phaser framework, c'è una classe Button. Il costruttore prende un callback per il click-evento:

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').

Voglio la mia classe Button, che io definisco così:

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

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

Quindi, come faccio a passare il clickHandler a super?

this.clickHandler dà l'errore [Build Error] 'this' is not allowed before super() while parsing file: .... e passando solo clickHandler mi dà un errore di runtime di Uncaught ReferenceError: clickHandler is not defined.

Qualche suggerimento?

Answer 1

Questa è una buona causa di utilizzo per ES6 arrow functions, che sono associati in modo lessicale a this.

Ecco un esempio generico di registrazione di un valore un'istanza derivata dal proxying la chiamata al metodo di istanza di una funzione di freccia: (. Try it out on an ES6 REPL, o vederlo 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()) 
    } 
} 

Come puoi vedere, questo ci permette di evitare di fare immediatamente riferimento allo thisArg della nostra nuova istanza prima della nostra chiamata a super. Nel vostro esempio dato questo viene implementato in questo modo:

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

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