据我所知,在调用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
}
}