Доброго дня всему Хабрасообществу. Сегодня наткнулся на одну очень интересную граблю особенность TypeScript.
Я, как порядочный JS программист, привык, что у функции вложенной в функцию свой scope (не знаю как по-русски), т.е. объект, на который ссылается this, но в TS это не всегда так.
Далее небольшойсовершенно бесполезный демонстрационный пример:
Если кому лень читать, то тут написано следующее: выполнить «console.log(this['location']);», при чем thisуказывает должен указывать на window.
После компидяции и выполнения мы получаем в консоли «undefined» (даже два), почему так? Давайте залезем в JS исходник:
Обратите внимание на «console.log(_this['location']);». Компилятор фактически подменил scope! Как сделать так чтоб он его не подменял? Нужно вместо
написать
Итак, мотаем на ус: если используем => то this равен this'у родителя (ч/з замыкание), если function, то все как в vanilla js.
В простых методах (не конструкторе) поведение сохраняется.
Я, как порядочный JS программист, привык, что у функции вложенной в функцию свой scope (не знаю как по-русски), т.е. объект, на который ссылается this, но в TS это не всегда так.
Далее небольшой
class MyClass {
constructor()
{
this.on(
window, // scope для callback'а
() => { console.log(this['location']); } // callback
);
}
private on(scope, callback){
callback.call(scope); // не бейте, так надо
}
}
var cls = new MyClass();
Если кому лень читать, то тут написано следующее: выполнить «console.log(this['location']);», при чем this
После компидяции и выполнения мы получаем в консоли «undefined» (даже два), почему так? Давайте залезем в JS исходник:
var MyClass = (function () {
function MyClass() {
var _this = this;
this.on(window, function () {
console.log(_this['location']);
});
}
MyClass.prototype.on = function (scope, callback) {
callback.call(scope);
};
return MyClass;
})();
var cls = new MyClass();
Обратите внимание на «console.log(_this['location']);». Компилятор фактически подменил scope! Как сделать так чтоб он его не подменял? Нужно вместо
() => { console.log(this['location']); }
написать
function(){ console.log(this['location']); }
Итак, мотаем на ус: если используем => то this равен this'у родителя (ч/з замыкание), если function, то все как в vanilla js.
В простых методах (не конструкторе) поведение сохраняется.