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

Я только начал играть с 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 и удалял его, но затем строка даты/времени больше не обновляется.

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

Ответы

Ответ 1

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

Таким образом, синтаксис жирной стрелки имеет особое значение в TypeScript.

Когда вы используете () => TypeScript, сохраняет лексическую область..., которая просто означает this, означает то же самое внутри выражения, что и вне выражения. Вы можете увидеть в скомпилированном JavaScript, что он создает переменную с именем _this, чтобы сделать это.

Таким образом, с синтаксисом толстой стрелки this.span является свойством span в вашем классе. Без синтаксиса толстой стрелки this.span - undefined.

Вы можете использовать этот базовый тест, чтобы увидеть разницу, вызвав 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();