javascript - Passing an instance method to super with ES6 classes - Stack Overflow

admin管理员组

文章数量:1326327

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

e.g. 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?

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

e.g. 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?

• javascript
• ecmascript-6
• phaser-framework

Share Improve this question Follow edited Sep 11, 2015 at 10:35 sdgluck 27.3k1212 gold badges8181 silver badges9595 bronze badges asked Sep 11, 2015 at 7:39 VegarVegar 12.9k1616 gold badges8888 silver badges153153 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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 pile 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
    }
}

本文标签： javascriptPassing an instance method to super with ES6 classesStack Overflow