Home » Uncategorized » Javascript Function Scope

Javascript Function Scope

Auf was zeigt die This-Referenz in Funktionen?

  1. Bei obj.myFunction(..) –> This ist das Objekt obj.
  2. Bei Aufruf myFunction(..) –> This ist das globale Objekt (oder window).
  3. Innerhalb einer mit new aufgerufenen Funktion: This zeigt auf das Objekt, das erzeugt wird.
  4. Mit apply(thisObj, ..)/call(thisObj, ..) aufgerufen: Auf das mitgegebene thisObj.
  5. Bei Arrow-Functions (z.B. (..) => this.feld1 ): This zeigt auf das was in der unmittelbaren Umgebung der Funktion als this 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=obj2.
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 }

Hinterlasse einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert