javascript - TypeScript 中的 setInterval 行为

Question

我刚开始使用 TypeScript。我使用 Visual Studio 2012 Express for Web 创建了一个示例项目，该示例包含一行代码，其行为我无法解释。

首先是 TypeScript 代码:

start() {
    this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}

所以这一行每 500 毫秒设置一次 timerToken 的值，并用当前日期/时间更新一个 HTML 元素。

在 JavaScript 中相当于这样:

Greeter.prototype.start = function () {
        this.timerToken = setInterval(this.span.innerHTML = new Date().toUTCString(), 500);
    };

所以我想知道 TypeScript 代码行中的 lambda 表达式并将其删除，但是日期/时间字符串将不再更新。

这么简单的问题……为什么？

Answer 1

我假设 span 是与 start 方法在同一类中的一个属性...如果我错了，请纠正我。

因此，粗箭头语法在 TypeScript 中具有特殊含义。

当您使用 () => 时，TypeScript 会保留词法作用域...这意味着 this 在表达式内部和在表达式外部具有相同的含义。您可以在编译后的 JavaScript 中看到它创建了一个名为 _this 的变量来执行此操作。

因此，使用粗箭头语法，this.span 是您类中名为 span 的属性。如果没有粗箭头语法，this.span 是未定义的。

您可以使用此基本测试通过调用 withFatArrow 或 withoutFatArrow 来查看差异，您将看到会发生什么。

class Test {
    public example = 'Test';
    private timer;

    withFatArrow() {
        this.timer = setTimeout(() => alert(this.example), 500);
    }

    withoutFatArrow() {
        this.timer = setTimeout(function() { alert(this.example) }, 500);
    }
}

var test = new Test();
//test.withFatArrow();
test.withoutFatArrow();