this

Das Schlüsselwort this bezieht sich auf das Kontextobjekt.
Dieser Beitrag erläutert sehr anschaulich die Problematik.

this ist eine Eigenschaft einer Funktion, die beim Aufruf der Funktion zur Verfügung steht.

Wenn eine Funktion als globale Funktion zur Verfügung steht, hat this eine andere Bedeutung als in einer Funktion, die sich innerhalb eines Objekts befindet und auch wieder eine andere Bedeutung in einer Konstuktorfunktion.

Zusammengefasst gibt es 3 verschiedene Möglichkeiten.

 

Objekt

Bei einem Objekt bezieht sich this auf das Objekt

var tier = {
art : "Tintenfisch",
getArt : function() {return this.art}
}
console.log(tier.getArt()); // Ausgabe: Tintenfisch

globale Funktion

Beim Aufruf einer globalen Funktion bezieht sich this auf das globale Objekt.

Im folgenden Beispiel ist getArt() undefined, weil es im globalen Kontext keine Variable art gibt.

function getArt(){
		var art = "Elefant";
		return this.art;
	}
	console.log(getArt()); // Ausgabe: undefined	

Hier sieht man deutlich, dass this sich auf den globalen Kontext bezieht

var art = "Leopard";
function getArt(){
		var art = "Elefant";
		return this.art;
	}
	console.log(getArt()); // Ausgabe: Leopard	

Den endgültigen Beweis, dass es das globale Objekt ist und nicht etwa das Objekt der übergeordneten Funktion oder der Kontext, in dem die Funktion aufgerufen wird, liefert folgendes Beispiel.

zugriff1 wird aufgerufen darin wird zugriff2 aufgerufen in zugriff2 wird die Anweisung console.log(this.art) ausgeführt.

	var art = "Echsen";	
	
	function zugriff1(){
		var art = "Fische";
		zugriff2();
		
		function zugriff2(){
			var art= "Einzeller";
			console.log(this.art);
		}	
	}	
	zugriff1(); // Ausgabe: Echsen	

Hier noch ein Praxisbeispiel zum gleichen Sachverhalt. Es ist übliche Praxis das gesamte Script einer Seite in einer anonymen Funktion zusammenzufassen, damit das Script erst dann zur Verfügung steht, wenn alle Elemente der HTML Seite geladen sind. siehe dazu DOMContentLoaded

var art = "Echsen";	
	
document.addEventListener("DOMContentLoaded", function(){	
		var art = "Fische";

		function getArt(){
		var art	= "Einzeller";
		console.log(this.art); 
		}	

		getArt(); //Ausgabe: Echsen	
});
	

 

Konstruktorfunktion

In einer Konstruktorfunktion bezieht this sich auf die Instanz, welche durch die Konstruktorfunktion erzeugt wurde. mehr zur Konstruktorfunktion

	function Tier(){
		this.art = "Elefant";
		this.getArt = function(){return this.art};
	}
	var ele = new Tier();
	console.log(ele.getArt()); //Ausgabe: Elefant
	

 


 

Javascript Tipps