用ES6类传递一个实例方法给super

Passing an instance method to super with ES6 classes

本文关键字：一个 实例方法 super ES6      更新时间：2023-09-26

据我所知，在调用super( )之前，this在构造函数中不可用。

但是，当引用实例方法时，我们需要在方法前面加上this。那么如何将实例方法传递给super( )呢?

。在相位器框架中，有一个Button类。构造函数接受click事件的回调:

构造函数


new Button(game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame)

callback -按下此按钮时调用的函数。
callbackContext -回调被调用的上下文(通常是'this')。

我想要我自己的按钮类，我这样定义:

class MyButton extends Phaser.Button {
    constructor(game) {
        super(game, game.world.centerX, game.world.centerY, 'buttonImage');
    }
    clickHandler(button, pointer) {
       //handle the clicking
    }
}

如何将clickHandler传递给super呢?

this.clickHandler给出错误[Build Error] 'this' is not allowed before super() while parsing file: ....，传递clickHandler给我一个运行时错误Uncaught ReferenceError: clickHandler is not defined。

有什么建议吗?

这是ES6箭头函数的一个很好的用例，它在词法上绑定到this。

下面是一个记录实例派生值的通用示例，通过使用箭头函数代理对实例方法的调用:

(在ES6的REPL上尝试一下，或者在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())
  }
}

可以看到，这样做可以避免在调用super之前立即引用新实例的thisArg。在您给出的示例中，它是这样实现的:

class MyButton extends Phaser.Button {
    constructor(game) {
        super(
            game,
            game.world.centerX,
            game.world.centerY,
            'buttonImage',
            () => this.clickHandler()
        );
    }
    clickHandler(button, pointer) {
       //handle the clicking
    }
}
相关文章：