最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin5浏览0评论

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?

Share Improve this question edited Sep 11, 2015 at 10:35 sdgluck 27.3k12 gold badges81 silver badges95 bronze badges asked Sep 11, 2015 at 7:39 VegarVegar 12.9k16 gold badges88 silver badges153 bronze badges
Add a ment  | 

1 Answer 1

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
    }
}
发布评论

评论列表(0)

  1. 暂无评论