回调保留 class 级变量值打字稿

Question

我有一个带有一些变量的 class 和一个从外部库调用函数的函数，这个函数需要像这样的回调：

class UserGestures {

    private gestureManager : HammerManager;
    private gestureDetected : string;

    constructor() {

        this.gestureManager = new Hammer.Manager(document.body);
        this.detectOnElement.addEventListener('touchend', this.resetGestures);
        this.gestureDetected = "OUTER";

        this.startDetection();
    }

    private startDetection() {

        this.gestureManager.on('pinch rotate pan', (e : HammerInput) => {

            console.log(this.gestureDetected);

            if(this.gestureDetected === "OUTER") {
                console.log("checking for new gesture");
                this.gestureDetected = "INNER";
            }
        });
    }

    private resetGestures() {
        console.log("reset");
        this.gestureDetected = "OUTER";
        console.log(this.gestureDetected);
    }
}

我遇到的问题是我第一次运行这段代码。 this.gestureManager.on('pinch rotate pan', (e : HammerInput) => {} 触发的事件我按以下顺序看到以下 console.logs：

OUTER
checking for new gesture
INNER

现在，当 resetGestures 函数触发时，我看到以下内容：

reset
OUTER

这一切都符合预期。但是现在问题来了...
当 this.gestureManager.on('pinch rotate pan', (e : HammerInput) => {} 再次触发时，我看到以下内容 console.logs:

INNER

而不是预期的：

OUTER
checking for new gesture
INNER

为什么会这样？我认为正在发生的事情是回调在本地存储 this.gestureDetected 的值，而不是在定义它的 class 级别检查它。我该如何解决这个问题？

仅供参考，这是简化的代码。但经过大量测试后，这就是它的结果（99% 确定）

Answer 1

而不是这个：

this.detectOnElement.addEventListener('touchend', this.resetGestures);

这样做：

this.detectOnElement.addEventListener('touchend', () => this.resetGestures());

否则，this将不会引用您正在考虑的对象。有关此 JavaScript 行为的更多信息，请参见：https://thenewstack.io/mastering-javascript-callbacks-bind-apply-call/

您还可以显式 bind this 参数：

this.detectOnElement.addEventListener('touchend', this.resetGestures.bind(this));

还有更多信息和解释 on this answer。

回调保留 class 级变量值打字稿

callback retains class level variable value typescript

variables

scope

class

callback

typescript