20

我刚开始玩 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 表达式并将其删除，但日期/时间字符串将不再更新。

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

4

1 回答 1

34

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

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

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

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

您可以使用此基本测试通过调用withFatArrowor来查看差异，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();
于 2013-04-18T08:35:44.387 回答