javascript - 从字符串数组分配回调事件 (PIXI.js)

Question

全部。我有一个棘手的问题，如果我只想复制代码，那么可以非常简单地解决这个问题。我的意思是，实际上，这只是我正在做的一个项目的一小部分，只是为了看看我是否可以，比其他任何事情都重要，但它困扰着我，因为我想好了。

项目

为了好玩，我决定采用某人的 ActionScript 3(基于文本的游戏引擎)并将其转换为 TypeScript，并最终使用 PixiJS 将其转换为 JavaScript。问题是，运行 tsc 时仍有 20213 个错误需要修复，因此我可以将其留到以后再修复。但我正在研究 Button 类，他们将其定义为 MovieClip 的子类。没关系;我只是通过阅读 PIXI 按钮来做出回应，它们看起来相当简单。只需在按钮的构造函数中添加类似于以下行的内容:

export class Button extends PIXI.Sprite {
    private _callback : Function;
    private _height : number;
    private _width : number;
    public get callback() : Function { return this._callback; }
    public set callback(fn : Function) {this._callback = fn; }
    public get height() : number { return this._height; }
    public set height(h : number) {this._height = h; }
    public get width() : number {return this._width; }
    public set width(w : number) {this._width = w; }
    public constructor(width = 180, height = 90, callback: Function = null){
        super(new PIXI.Texture(new PIXI.BaseTexture(GLOBAL.BTN_BACK, PIXI.SCALE_MODES.NEAREST)));
        this.callback = callback;
        this.width = width;
        this.height = height;
        this.buttonMode = true;
        this.interactive = true;
        this.anchor.set(0.5);
        this.on('mousedown', this.callback)
            .on('touchstart', this.callback);
    }
}

这是一个有点简化的版本，我在Codepen上做的版本使用 Container 和私有(private) _sprite 字段(以及 ColorMatrixFilter，它在我挑选的黑色图标上效果不太好，但这对于这个问题)，但这大致就是它是如何完成的要点。

问题

问题是，在 codepen 中，我想执行以下操作:

// assign `this.callback` to each of the following events:
let that = this;
['click','mousedown','touchstart'].map(evt => that.on(evt, that.callback});

在其他地方的构造函数中传递一个简单的调用:

for (let n = 0; n < 5; ++n){
    btnArray.push(new Button(16, 16, () => console.info('You pushed button %d', n)));
}

但我没有从他们那里得到任何东西，即使在 Chrome 控制台中也是如此。我什至记录了我之前提到的 ColorMatrixFilter，看看是否是 console.info 出错了。没有。所以现在，我对此感到困惑。我希望能够创建一个 GLOBAL(来自 AS 源的遗留静态对象)键来迭代事件，但看起来这并没有发生。

问题

1. 如果奇怪的话，我想做的事情是否可行？它是否被安全功能阻止(对此我将不胜感激)？如果不是，我做错了什么？
2. 我是否应该担心设置所有这些不同的事件处理程序，或者仅仅监听点击就足够了？

Answer 1

当执行像事件映射这样的箭头函数时，不会设置 this 上下文，因此引用 this 的任何代码都将获取当前值，包括任何 map 调用的函数。

将您的事件 map 替换为以下内容:

['click','mousedown','touchstart'].map(function(evt) { that.on(evt, that.callback} } );

演示:

function Named(x) {
    this.name = x;
}
var foo = new Named("foo");
var bar = new Named("bar");

var showFunc = function show() {
    // this is context dependant
    console.log(this.name);
}

var showArrow;
// this is the window
showArrow = () => console.log(this.name);

var fooShowArrow;
(function() {
    // this is foo
    that = this;
    fooShowArrow = () => console.log(that.name);
}).apply(foo);

var example = function(func) {
    // For the demo, at this point, this will always be bar
    func.apply(this, [ "arbitrary value" ]);
}

// explicitly set the current "this" to bar for the execution of these functions
example.apply(bar, [showFunc]);  // works
example.apply(bar, [showArrow]);  // fails, this is still the window
example.apply(bar, [fooShowArrow]);   // fails, this is still foo