Auf was zeigt die This-Referenz in Funktionen?
- Bei
obj.myFunction(..)
–> This ist das Objektobj
. - Bei Aufruf
myFunction(..)
–> This ist das globale Objekt (oderwindow
). - Innerhalb einer mit
new
aufgerufenen Funktion:This
zeigt auf das Objekt, das erzeugt wird. - Mit
apply(thisObj, ..)
/call(thisObj, ..)
aufgerufen: Auf das mitgegebenethisObj
. - Bei Arrow-Functions (z.B.
(..) => this.feld1
): This zeigt auf das was in der unmittelbaren Umgebung der Funktion alsthis
referenziert wird.
This bei Arrow-Funktionen:
Bei Arrow-Funktions zeigt das this auf this der unmittelbaren Umgebung der Arrow-Function.
Im folgenden Beispiel wird obj2.increase2()
aufgerufen. Das heisst: Innerhalb von increase2(
) ist this=obj
2.
Das Problem: Die Anonyme Funktion innerhalb setTimeout wird mit keinerlei this-Kontext aufgerufen! Deshalb wird nicht feld1 von obj2 hinuaufgezählt, sondern es wird versucht feld1 im globalen Kontext zu finden. obj2.feld1 bleibt 0.
> Klasse2 = function(){
... this.feld1 = 0;
}
> Klasse2.prototype.increase2 = function(){
... setTimeout(function(){
..... this.feld1++
..... }, 500);
}
> obj2 = new Klasse2();
Klasse2 { feld1: 0 }
> obj2.increase2();
undefined
> obj2;
Klasse2 { feld1: 0 }
>
Damit die innere/anonyme Funktion auf obj2.feld1 zugreift müssen wir ihr explizit eine Referenz auf das umgebende this übergeben:
2. Variante der Methode
> Klasse2.prototype.increase3 = function(){
... saveThis = this;
... setTimeout(function(){
..... saveThis.feld1++;
..... }, 500);
... }
[Function]
> obj2.increase3();
undefined
> obj2;
Klasse2 { feld1: 1 }
Wenn wir aber die innere/anonyme Funktion als Arrow-Function definieren ist dieses This-Preserving unnötig, weil:
Das This von Arrow-Functions zeigt immer auf das This der unmittelbaren Umgebung!
3.Variante: Mit Arrow-Function:
> Klasse2.prototype.increase4 = function(){
... setTimeout(() => this.feld1++, 500);
... }
[Function]
> obj2.increase4()
undefined
> obj2
Klasse2 { feld1: 2 }