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

Question

全部。我遇到了一个很麻烦的问题，如果我只是想复制代码，那可以很简单地解决。我的意思是，真的，这只是我正在做的项目的一小部分，只是为了看看我是否可以，最重要的是，但它是打扰我了，因为我想出来了。

项目

为了好玩，我决定采用某人的基于文本的 ActionScript 3 游戏引擎并将其转换为 TypeScript，并最终 JavaScript 使用 PixiJS。问题是，还有 20213 个错误需要修复运行 tsc，所以我可以把它留到以后再说。但我正在研究按钮 class，他们将其定义为 MovieClip 的子 class。没关系;我只是通过阅读 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 和一个私有 _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 源的遗留静态对象）键来遍历事件，但看起来这并没有发生。

问题

我正在尝试做的事情是否可行，如果奇怪的话？它是否被安全功能阻止（对此我将不胜感激）？如果不是，我做错了什么？
我什至应该担心设置所有这些不同的事件处理程序，还是只听 click 就够了？

Answer 1

当像你的事件映射这样的箭头函数被执行时，this 上下文没有被设置，所以任何引用 this 的代码都将获得当前值，包括你的映射调用的任何函数.

用以下内容替换您的事件地图：

['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

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

Assigning callback events from an array of strings (PIXI.js)

javascript

callback

typescript

pixi.js

项目

问题

问题