click - 如何从 Kinetic.js 点击事件中访问类

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未定义。在调试器的单击事件中查看“this”时，它是一个Kinetic.Text对象。

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

Answer 1

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

您需要使用粗箭头函数来维护范围：

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