this

Das Schlüsselwort 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. siehe auch diesen Beitrag

Zusammengefasst gibt es 3 verschiedene Möglichkeiten.


Wenn this in einer globalen Funktion steht bezieht sich this auf das globale Objekt.
In einem Objekt bezieht this sich auf das Kontextobjekt, das Objekt aus dem sie aufgerufen wird.

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 An diesem Beispiel sieht man das this sich auch nicht auf das Objekt bezieht, aus dem Funktion aufgerufen wird, sondern wirklich auf das globale Objekt.

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

 

let name = "global Dino";

function getGlobalName() {
  return this.name;
}
console.log(getGlobalName()); //globalDino

let affe = {
  name: "Monkey",
  getName: getGlobalName
}

console.log(affe.getName()); // Monkey

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

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