打字稿私有方法“不是函数”

Question

我可能会误解了一些概念，但是在阅读了4个关于stackoverflow的主题以及“打字稿中的私有成员”的文档后，我仍然感到困惑。

我正在编写简单的鼠标IO（第一个打字稿项目）。 这是发生故障的鼠标类别的完整代码：

class Mouse {
    public left: MouseKeyData = new MouseKeyData();
    public right: MouseKeyData = new MouseKeyData();
    public whell: MouseKeyData = new MouseKeyData();

    public x: number = 0;
    public y: number = 0;

    private crossBrowserButton(e: any):string {
        switch (e.button) {
            case 0: return 'left';
            case 1: return 'whell';
            case 2: return 'right';
            case 3: return 'back';
            case 4: return 'forward';
        }
        return 'none';
    }


    private onMouseDown(e: any):void {
        let target: MouseKeyData = this.left;
        try {console.log(this.crossBrowserButton(e))} catch (a) {console.warn(a)} finally {}
        if(target) {
            target.press();
        }
    }

    private onMouseUp(e: any):void {
        let target: MouseKeyData = this.left;
        if(target) {
            target.release();
        }
    }

    private onMouseMove(e: any): void {
        this.x = e.pageX;
        this.y = e.pageY;
    }

    public constructor() {
        let anchor = document.body;

        anchor.addEventListener('mousedown', this.onMouseDown);
        anchor.addEventListener('mouseup', this.onMouseUp);
        anchor.addEventListener('mousemove', this.onMouseMove);

    }
}

我习惯叫this.crossBrowserButton(e)内onMouseDown和onMouseUp ，但我只拿到this.crossBrowserButton is not a function(…)

我认为我在this.left失去了this范围，但是this.left完美地工作了。

提前致谢！

Answer 1

听起来您所做的与您应该做的完全相反。 在原始代码中，事件侦听器的执行范围存在问题。 它们不受类范围的约束，因此将在它们运行的​​上下文中执行。

您的事件绑定应如下所示。

    anchor.addEventListener('mousedown', this.onMouseDown.bind(this));
    anchor.addEventListener('mouseup', this.onMouseUp.bind(this));
    anchor.addEventListener('mousemove', this.onMouseMove.bind(this));

Answer 2

好吧，我想通了：我必将this在事件document.body的，然后-我把这个this在方法。

感谢您的评论。 晚安，伙计们！