this

Das Schlüsselwort this bezieht sich auf das Kontextobjekt, das Objekt aus dem sie aufgerufen wird.
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.

• globale Funktion
• Objekt mehr dazu
• Konstuktorfunktion mehr dazu

 

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(tierart){
		this.art = tierart;
		this.getArt = function(){return this.art};
	}
	var ele = new Tier("Elefant");
	console.log(ele.getArt()); //Ausgabe: Elefant
	

Objekt

    function getGlobalName(){
    return this.name;
    }
    let fisch ={
    name :"Fish";
    getName : getGlobalName; 
    }
    let affe ={
    name: "Monkey"
    getName : getGlobalName;
    }
    affe.getName();//Ausgabe: Monkey
    

Die Variable this hat abhängig vom Kontext, in dem die Variable aufgerufen wird einen anderen Kontext.

• Beim Aufruf einer globalen Funktion, bezieht sie sich auf das globale Objekt, bzw. ist im strikten Modus nicht definiert
• Wird die Funktion als Objektmethode aufgerufen, bezieht sich this auf das Objekt
• Wird sie als Konstruktorfunktion aufgerufen, bezieht sich this auf das Objekt welches durch den Funktionsaufruf erzeugt wurde.

Achtung bei Arrow Funktionen definiert sich this aus dem Kontext in dem die Arrow Funktion definiert ist und nicht aus dem Kontext aus dem sie aufgerufen wird.

---

 

Javascript Tipps