201413Aug

JavaScript: Schlüsselwort 'this' übernehmen mit bind()

Manchmal gibt es Situationen in JavaScript, in denen das Schlüsselwort "this" in einem anderen Kontext überschrieben wird, ohne dass dies gewünscht ist. Ein klassisches Beispiel dafür sind Event-Listener, bei denen sich "this" nach dem Binden des Events auf das Listener-Scope und nicht mehr auf das gewünschte Objekt bezieht:

  • function a() {
  • this.abc = 123;
  •  
  • this.func = function(event) {
  • alert(this.abc);
  • };
  •  
  • return this;
  • }
  •  
  • var b = a();
  •  
  • document.querySelector("#btn").addEventListener("click", b.func);

In dem Beispiel wird beim Klick auf die Schaltfläche mit der ID "btn" also nicht etwa "123" ausgegeben, sondern "undefined". Das Problem mit dem "this"-Schlüsselwort erstreckt sich natürlich noch auf weitere Bereiche, wie beispielsweise asynchrone Ajax-Callbacks. Der Entwickler Krasimir Tsonev hat in diesem Beitrag das Problem noch einmal beleuchtet und den entsprechenden Lösungsansatz inklusive Polyfill für ältere Browser vorgestellt: Die native JavaScript-Funktion Function.prototype.bind(). Hiermit lässt sich der Kontext bzw. das Scope einer Funktion neu definieren und somit kann auch "this" an anderen Stellen genutzt werden, ohne eine Hilfsvariable "self", "that" oder Ähnliches erstellen zu müssen. Das obige Beispiel kann also mit dem Hinzufügen von ".bind(this)" korrigiert werden. Die entsprechende Zeile sieht dann aus wie folgt:

  • document.querySelector("#btn").addEventListener("click", b.func.bind(this));

Die Problematik von Event-Listenern und "this" wird übrigens auch mit ES6 und den Arrow Functions verschwunden sein.