Funktionsreferenz / Anonyme- & Callbackfunktion
<script>
function mfunc() {
alert("Button Klick");
}
</script>
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>
Noch nicht verstanden? Dann mal Schritt für Schritt.
HTML
<button id="btn">Hallo Button</button>
<p id="anzeige"></p>
Javascript
var anzeige = document.getElementById("anzeige");
var btn = document.getElementById("btn");
function hallo(){ anzeige.innerHTML = "Hallo";}
console.log(hallo());
Es wird in der Konsole undefined ausgegeben, weil die Funktion keinen Rückgabewert hat. Mit Rückgabewert würde dieser angezeigt. Die Funktion wird aufgerufen und "Hallo" erscheint im Absatz "anzeige".
console.log(hallo);
Es wird die komplette Funktion in der Konsole angezeigt.
ƒ hallo () { anzeige.innerHTML = "Hallo"; }
Durch eine Funktionsreferenz wird also die komplette Funktion ausgegeben.
btn.addEventListener('click', hallo);
Die Funktion wird auf Buttonklick aufgerufen. im EventListener wird eine Referenz auf eine Funktion erwartet. Genauso könnte man auch die komplette Funktion einfügen.
btn.addEventListener('click', function hallo(){ anzeige.innerHTML = "Hallo";});
Der Name der Funktion könnte fehlen, also eine anonyme Funktion wäre auch möglich.
btn.addEventListener('click', function (){ anzeige.innerHTML = "Hallo";});
Man kann in der anonymen Funktion auch eine andere Funktion aufrufen.
btn.addEventListener('click', function (){ hallo();});
Selbst eine Funktion mit einem Parameter wäre möglich.
function hallo(gruss){ anzeige.innerHTML = gruss;}
btn.addEventListener('click', function (){ hallo("Hallöchen");});
Wir kennen Funktionen mit Rückgabewerten. Ein Rückgabewert könnte auch eine Funktion sein. Ich könnte also den kompletten Inhalt des zweiten Arguments der EventListener Funktion aus dem Rückgabewert einer Funktion bekommen.
function callHallo(){
return function (){ hallo("Hallöchen");}
}
btn.addEventListener('click', callHallo());
Wir sehen, dass hier ein Funktionsaufruf in der EventListenerFunktion steht. Weil dieser eine function zurückgibt, ist das möglich.
Jetzt kommt der eigentlich Trick, ich kann auch einen Funktionsaufruf mit Argument notieren. Hierbei wird das Argument weitergegeben.
function hallo(gruss){
anzeige.innerHTML = gruss;
}
function callHallo(myGruss){
return function (){hallo(myGruss);}
}
btn.addEventListener('click', callHallo("HalliHallo"));
TADA!
Ich habe noch einen Tipp in AS3 . siehe hier und es gibt noch das oben erwähnte Videotutorial.
