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

【问题标题】：Typescript private method "is not a function"打字稿私有方法“不是函数”
【发布时间】：2017-02-10 06:53:31
【问题描述】：

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

我正在编写简单的鼠标 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);

    }
}

我曾经在onMouseDown 和onMouseUp 中调用this.crossBrowserButton(e)，但我只有this.crossBrowserButton is not a function(…)。

我想我在某处丢失了this 范围，但this.left 完美运行。

提前致谢！

【问题讨论】：

我投票结束这个问题，因为这个错误在低技能世界中很常见，我发现了问题所在。

标签： javascript typescript private

【解决方案1】：

好的，我想通了：我在 event 中将 this 绑定到 document.body，然后 - 我在方法中使用了这个 this。

感谢您的评论。各位晚安！

【讨论】：

【解决方案2】：

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

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

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

【讨论】：