Kan jag komma åt det andra detta i en TypeScript-lambda?

I TypeScript kan jag skriva något liknande detta:

$('#something').fadeOut(400, (): void => {
    this.invokeAnotherMethod();
});

När det kompileras ser TypeScript automatiskt till att this pekar på min klass istället för den inneslutna funktionen:

var _this = this;
$('#something').fadeOut(400, function() {
    _this.invokeAnotherMethod();
});

Men vad händer när jag behöver komma åt det verkliga detta istället för det yttre _this? Finns det en syntax för att referera till det? Till exempel, hur skulle jag kunna skriva kod som skulle kompileras till följande:

var _this = this;
$('#something').fadeOut(400, function() {
    $(this).data('specialhide', true);
    _this.invokeAnotherMethod();
});

Är det möjligt?

Svar #1

Du skulle behöva undvika fettpils-syntaxen för att göra detta eftersom du inte vill bevara den lexikala scope för this.

var _me = this;
$('#something').fadeOut(400, function () {
    _me.invokeAnotherMethod();
    $(this).data('specialhide', true);
});

I det här exemplet har jag använt _me istället för _this för att undvika kollisioner med variabler som genereras av TypeScript. Jag har också undvikit self för att undvika förväxling med window.self (tack RockResolve).

Varför!

Specifikationen för ECMAScript 6 innehåller Arrow Function Definitions - det är där TypeScript-språket har tagit denna funktion från. När TypeScript riktar sig mot ECMAScript 6 i framtiden, kommer det att lämna kvar () =>-syntaxen - så de kan inte få det att fungera med båda kontexterna av this utan att bryta framtida kompatibilitet.

Även om du skulle kunna föreställa dig hur de skulle kunna ändra TypeScript-kompilatorn för att göra både _this och this tillgängliga i ECMAScript 3 eller 5, skulle det faktiskt bli ett problem i version 6.

Relaterade artiklar