Przekazywanie metody instancji do super z klasami ES6

Question

Jak rozumiem, this nie jest dostępne wewnątrz konstruktora przed wywołaniem super().

Mimo to, odnosząc się do metod instancji, musimy przedrostować metodę za pomocą this. Jak więc przekazać metodę instancji do super()?

np. W klasie Phaser framework znajduje się klasa Button. Konstruktor wykonuje wywołania zwrotnego dla click-event:

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

chcę moje własne klasy przycisk, który zdefiniować tak:

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

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

Więc jak będę przekazać clickHandler do super?

this.clickHandler podaje błąd [Build Error] 'this' is not allowed before super() while parsing file: ...., a podanie tylko clickHandler powoduje błąd runtime w postaci Uncaught ReferenceError: clickHandler is not defined.

Wszelkie sugestie?

Answer 1

Jest to dobry przypadek użycia dla ES6 arrow functions, które są powiązane leksykalnie z this.

Oto ogólny przykład zarejestrowanie wartości instancji mająca proxowanie wywołanie metody przykład z funkcją strzałką (. Try it out on an ES6 REPL lub zobaczyć to 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()) 
    } 
} 

jako możesz to zobaczyć, dzięki temu unikniemy natychmiastowego odwoływania się do thisArg naszej nowej instancji przed naszym wywołaniem do super. W swojej podanym przykładzie jest to realizowane tak:

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

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