Javascript „this“-Zeiger im Rätsel um verschachtelte Funktionen

In einem Webentwicklungsszenario das Verhalten des „this“-Zeigers innerhalb verschachtelter Funktionen kann rätselhaft sein. Betrachten Sie den folgenden Code:

var std_obj = {
  options: {rows: 0, cols: 0},
  activeEffect: "none",
  displayMe: function() {
    // this refers to std_obj
    if (this.activeEffect == "fade") {}

    var doSomeEffects = function() {
      // this surprisingly refers to window object
      if (this.activeEffect == "fade") {}
    }

    doSomeEffects();
  }
};

std_obj.displayMe();

Im obigen Code zeigt der „this“-Zeiger innerhalb der verschachtelten Funktion „doSomeEffects()“ unerwartet auf das „window“-Objekt. Dieses Verhalten widerspricht der Erwartung, dass die verschachtelte Funktion den Umfang der äußeren Funktion erben würde, wobei sich „this“ auf „std_obj“ bezieht.

Grundlegendes zum Aufruf und Umfang von Javascript-Funktionen

Das Verhalten von „this“ in Javascript-Funktionen hängt davon ab, wie die Funktion aufgerufen wird. Im Allgemeinen gibt es drei Möglichkeiten:

1. Methodenaufruf: someThing.someFunction(arg1, arg2, argN)
2. Function.call-Aufruf: someFunction.call(someThing, arg1, arg2, argN)
3. Function.apply Aufruf: someFunction.apply(someThing, [arg1, arg2, argN])

In all diesen Aufrufen ist das „this“-Objekt „someThing“. Der Aufruf einer Funktion ohne führendes übergeordnetes Objekt (z. B. doSomeEffects() im Beispiel) führt jedoch im Allgemeinen dazu, dass das „this“-Objekt auf das globale Objekt gesetzt wird, das in den meisten Browsern das „window“-Objekt ist.

Im Beispielcode wird die verschachtelte Funktion „doSomeEffects()“ ohne übergeordnetes Objekt aufgerufen, sodass sie den globalen Bereich erbt und ihr „this“-Zeiger auf das „window“-Objekt zeigt. Aus diesem Grund beobachten Sie das unerwartete Verhalten.

Um sicherzustellen, dass die verschachtelte Funktion Zugriff auf den Bereich „std_obj“ hat, können Sie sie mit der Methode Function.call() mit dem Objekt „std_obj“ als aufrufen erstes Argument:

var doSomeEffects = function() {
  // this now refers to std_obj
  if (this.activeEffect == "fade") {}
}

doSomeEffects.call(std_obj);

Das Verständnis der subtilen Nuancen dieses Zeigerverhaltens in Javascript ist entscheidend für die Erstellung robuster und wartbarer Anwendungen.