使用ES6类将实例方法传递给super

Question

As I understand things, this is not available inside the constructor before super( ) is called.

Still, when referring to instance methods, we need to prefix the method with this . So how is it possible to pass a instance method to super( ) ?

eg In the Phaser framework , there is a Button class. The constructor takes a callback for the 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').

I want my own button class, which I define like this:

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

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

So how will I pass the clickHandler to super ?

this.clickHandler gives the error [Build Error] 'this' is not allowed before super() while parsing file: .... and passing just clickHandler gives me a runtime error of Uncaught ReferenceError: clickHandler is not defined .

Any suggestions?

Answer 1

This is a good use-case for ES6 arrow functions , which are bound lexically to this .

Here is a generic example of logging an instance-derived value by proxying the call to the instance method with an arrow function:

( Try it out on an ES6 REPL , or see it 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())
  }
}

As you can see, doing this allows us to avoid immediately referencing the thisArg of our new instance before our call to super . In your given example this is implemented like this:

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

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