Diejenigen unter euch die öfters mit Javascript arbeiten kennen vielleicht das Problem mit Javascripts this. Wie letzte Woche beschrieben arbeitet Javascript anders mit Kontexten als PHP zum Beispiel, heute stelle ich euch ein paar dieser Situationen vor!

Immer und überall

Im Gegensatz zu anderen Programmiersprachen bietet einem Javascript immer this an, egal in welchem Kontext wir uns befinden. Im globalen Kontext (also direkt zwischen den öffnenden und schließenden SCRIPT Tags) bietet Javascript uns das Window Objekt an. Das gleiche gilt wenn wir uns innerhalb von normalen Funktionen befinden:

console.log(this);
// Returns the "Window" object.

var func = function () {
   console.log(this);
};

func();
// Returns the "Window" object.

Im Objekt-Context funktioniert this wie wir es erwarten würden!

// "this" in object scope
var obj = {
   method:function () {
      console.log(this);
   }
};

obj.method();
// Returns the "obj" object.

Durch die enge Verzahnung zwischen Javascript und dem DOM gibt es auch diverse Situationen in denen this sehr praktisch ist:

// Prototype syntax.
$('my-element').on('click', function () {
   console.log(this);
});
// Returns the Element ("#my-element").

Wir springen bei diesem Beispiel aus dem reinen Javascript Kontext in den DOM Kontext – und genau hier muss man sehr aufpassen!

Stolperfallen!

Stellt euch z.B. ein (Prototype, MooTools oder jQuery) Plugin vor das euch für irgendwas eine hübsche GUI generiert und auf Events reagiert:

// Plugin for a image popup (Prototype syntax).
var Popup = Class.create();

Popup.prototype = {
   initialize: function (selector) {
      this.elements = $$(selector);
      this.elements.invoke('on', 'click', this.openPopup);
   },
   openPopup: function () {
      this.preparePopup();
      // ...
   },
   preparePopup: function () {
      // ...
   }
};

// ...

new Popup('img.popup');

Hier haben wir einen kleinen Quelltext der z.B. dafür benutzt werden könnte Bilder per Klick in einem hübschen Popup zu öffnen. Zuerst erstellen wir eine neue Instanz von Popup und übergeben einen Selektorn… Den selektierten Elementen wird dann via this.elements.invoke('on', 'click', this.openPopup); ein Observer mitgegeben, der beim klick die openPopup Methode aufruft – diese wiederum soll preparePopup aufrufen um bestimmte Vorkehrungen zu treffen… Doch dieser Code würde, so wie er oben steht, nicht funktionieren!
Und warum? Ganz einfach: Die Zeile this.preparePopup(); in der openPopup Methode würde probieren die preparePopup() auf dem geklickten DOM Element zu rufen anstatt im Klassen-Kontext (Siehe vorheriges Beispiel).

Dieses Problem lässt sich zwar relativ einfach mit Hilfe von Prototypes bindAsEventListener() lösen, doch es zeigt uns sehr deutlich das wir uns nicht immer auf this verlassen können/dürfen!

Für diese Woche möchte ich es dabei belassen. Weitere Informationen zum Thema „Javascript und this“ gibt es dann nächste Woche in alter frische! Bis dahin wünsche ich euch eine angenehme Woche und natürlich Happy Coding!