Eine Instanzmethode an Super mit ES6 Klassen übergeben

Question

Wie ich Dinge verstehe, ist this nicht innerhalb des Konstruktors verfügbar, bevor super() aufgerufen wird.

Wenn wir uns auf Instanzmethoden beziehen, müssen wir der Methode jedoch this voranstellen. Wie ist es möglich, eine Instanzmethode an super() zu übergeben?

z.B. In der Phaser framework gibt es eine Button Klasse. Der Konstruktor nimmt einen Rückruf für das Click-Ereignis:

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

ich meine eigene Taste Klasse will, die ich wie folgt definieren:

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

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

So wie ich die clickHandler zu super passieren?

this.clickHandler gibt den Fehler [Build Error] 'this' is not allowed before super() while parsing file: .... und vorbei nur clickHandler gibt mir einen Laufzeitfehler von Uncaught ReferenceError: clickHandler is not defined.

Irgendwelche Vorschläge?

Answer 1

Dies ist ein guter Anwendungsfall für ES6 arrow functions, die lexikalisch an this gebunden sind.

Hier ist ein allgemeines Beispiel für durch Proxying den Anruf an die Instanzmethode mit einem Pfeil Funktion eine Instanz abgeleiteten Werterfassung: (. Try it out on an ES6 REPL oder es compile in babel sehen)

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

Wie Sie können sehen, dies ermöglicht es uns zu vermeiden, sofort auf die thisArg unserer neuen Instanz vor unserem Aufruf an super verweisen. In Ihrem gegebenen Beispiel wird dies wie folgt umgesetzt:

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

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