Question

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

首先是TypeScript代码：

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

因此，此行每500ms设置一次timerToken的值，并使用当前日期/时间更新HTML元素。

在JavaScript中等同于：

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

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

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

Answer 1

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

因此，fat-arrow语法在TypeScript中具有特殊含义。

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

因此，使用fat-arrow语法，this.span是您类上名为span的属性。如果没有fat-arrow语法，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();

TypeScript中的setInterval行为

1 个答案: