Question

我似乎无法在点击事件中获得一个打字稿类实例。

我有一个TypeScript类Navigation。

class Navigation
{
    currentPage: number;

    wireMouseEvents()
     {
        this.buttonPrevious.on("click", function(): void {
            if (this.currentPage > 1)
            {
                // do more work with Navigation objects
            }
        });
    }
}

这是由此产生的JavaScript：

Navigation.prototype.wireMouseEvents = function () {
    var _this = this;
    this.buttonPrevious.on("click", function () {
        if(_this.currentPage > 1) {
            // do more work with Navigation objects

        }
    });
};

事件被触发但currentPage未定义。在调试器中的click事件中查看“this”时，它是一个Kinetic.Text对象。

如何确保点击处理程序的范围是我的班级Navigation？

Answer 1

您发布的Typescript不会编译为您发布的JavaScript。 this.buttonPrevious.on("click", function(): void {等不会生成_this来维护词法范围。只有this.buttonPrevious.on("click", () => {会这样做。见here。

您需要使用胖箭头功能来维持范围：

class NavigationWithFatArrow
{
    currentPage: number;

    wireMouseEvents()
     {
        this.buttonPrevious.on("click", () => {
            if (this.currentPage > 1)
            {
                // do more work with Navigation objects
            }
        });
    }
}

您可能还需要在构造函数中尝试绑定，以确保始终获得正确的“this”。请参阅Ryan Cavanaugh的回答：https://stackoverflow.com/a/16029714/1014822

如何从Kinetic.js单击事件访问类

1 个答案: