Funktionsreferenz / Anonyme- & Callbackfunktion

<script>
function mfunc() {
	alert("Button Klick");
	}
</script>

---

click mich

Es gibt Fälle, in denen anstatt eines Funktionsaufrufs eine Referenz auf eine Funktion verlangt wird.

function high5(){return 5;}
var a = high5;

Der Variablen a wurde eine Referenz auf die Funktion high5 übergeben. Das ist kein Funktionsaufruf, sondern vielmehr ein Zeiger auf die Funktion. Der Wert von a ist die Funktion. Überprüfe das Beispiel mit
console.log(a);

Weiterführende Infos zu Referenz und Kopien siehe molily

In einigen Fällen sind keine Funktionsaufrufe erlaubt. Beispielsweise in Konstruktorfunktionen. In EventListenern werden Referenzen auf eine Funktion benötigt.

Daher muss ich hier etwas vorgreifen auf das Thema DOM Event. Man kann über das DOM auf Elemente der HTML Seite zugreifen, diese verändern oder auch einen Event darauf legen. In diesem Beispiel handelt es sich um ein HTML Element mit einer id
<button id="b1">Click mich</button>

Es ist wichtig, dass dieses Element geladen ist, wenn man darauf zugreift. mehr dazu hier

document.getElementById("b1").onclick = mfunc;

Hierbei ist mfunk eine zuvor definierte Funktion. Wie man hier sieht, fehlen die Klammern. Es ist somit kein Funktionsaufruf sondern eine Referenz auf eine Funktion. Da hier die Klammern nicht aufgeführt werden dürfen, kann man auch keine Argumente zuweisen. siehe auch Callback

Hat man eine Funktion mit Parametern, muss eine andere Lösung her.

Anonyme Funktion

Ersetzen wir meine Funktion durch eine anonyme Funktion. Das ist eine namenlose Funktion. Innerhalb dieser namenlosen Funktion kann man Anweisungen notieren und auch Funktionen mit Parametern aufrufen.

document.getElementById("b2").onclick = function() {
myParaFunc("Hallöchen");
}

Callback Funktion

Anonyme Funktionen werden auch Callback Funktionen genannt. Es ist damit das Verfahren gemeint, welches beim Eintreten eines Ereignis eine Funktion aufruft. Streng genommen ist eine Callback Funktion jedoch etwas anderes.

Setzt man eine Referenz auf eine Funktion, werden die Klammern nicht notiert. Hat man jedoch eine Callback Funktion, so kann man durchaus Klammern notieren und Parameterwerte zuweisen. Das Besondere an der Callbackfunktion ist, dass sie als Rückgabe eine Referenz auf eine anonyme Funktion setzt und dadurch wird dieser Rückgabewert dem Eventhandler zugeordnet.

Im folgenden Beispiel ist getInfo() eine Callbackfunktion. Die Rückgabe ist die anonyme Funktion function(){}. Wie wir oben gesehen haben können wir anonyme Funktionen dem Eventhandler zuweisen und genau das geschieht hier.

<script>
function myAlert(a){
alert(a);
}

function getInfo(b){
return function(){
myAlert(b);
} 
}

document.getElementById("b3").onclick = getInfo("Halli Hallo wie gehts denn so.");
</script>

Click b3

Noch nicht verstanden? Dann mal folgendes Beispiel:

function showNumber(){
return 3;
}

alert(showNumber());

Da die Funktion den Wert 3 zurückgibt, wird im Alertfenster 3 angezeigt. Es ist das gleiche, als würde man schreiben:

alert(3);

So wie man hier auch direkt den Rückgabewert 3 einsetzen könnte, könnte man es auch mit jedem anderem Rückgabewert machen. Wenn eine Funktion eine anonyme Funktion zurückgibt, könnte man die anonyme Funktion auch direkt notieren.

So könnte man anstatt

document.getElementById("b3").onclick = getInfo("Hallöchen");

den Rückgabewert von getInfo() direkt notieren

document.getElementById("b3").onclick = function(){alert("Hallöchen")};

 

---

Javascript Tipps