setInterval поведение в TypeScript

17

Я только начал играть с TypeScript. Я создал образец проекта с Visual Studio 2012 Express для Web, и этот образец имеет строку кода, которая имеет поведение, которое я не могу объяснить сам.

Сначала введите код TypeScript:

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

Таким образом, эта строка устанавливает значение timerToken каждые 500 мс и обновляет элемент HTML с текущей датой / временем.

В JavaScript, который был бы эквивалентен этому:

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

Итак, я задавался вопросом о выражении лямбда в строке кода TypeScript и удалял его, но затем строка даты / времени больше не обновляется.

Так просто вопрос ... почему?

    
задан seveves 18.04.2013 в 10:02
источник

1 ответ

29

Я предполагаю, что span является свойством в том же классе, что и метод start ... Исправьте меня, если я ошибаюсь.

Таким образом, синтаксис жирной стрелки имеет особое значение в 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();
    
ответ дан Fenton 18.04.2013 в 10:35
источник
  • О, я вижу ... Я не видел разницы в масштабах. Спасибо, теперь я получаю это :) –  seveves 18.04.2013 в 10:44