Was ist eine Referenz auf eine Funktion?
Eine Referenz auf eine Funktion notiert man, indem man den Funktionsnamen ohne Klammern
aufführt. Eine Referenz ist kein Funktionsaufruf, sondern ein Zeiger auf die gleiche
Speicherstelle.
Im folgenden wurde der Variablen a eine Referenz auf das Funktionsobjekt übergeben.
Mit console.log(a); Drücke Taste F12 sieht man, dass die komplette Funktion in a erscheint.
----------------------------------------------------------------------------------------
*/
/*
function verschiebe() {
alert("hallo");
}
var a = verschiebe;
console.log(a);
*/
/*
----------------------------------------------------------------------------------------
4)
Eine Funktion kann man auch auf andere Art deklarieren. Man weist der Variablen a eine anonyme Funktion zu
Anschließend erfolgt der Funktionsaufruf a();
----------------------------------------------------------------------------------------
*/
/*
var a = function(){alert("hallo");}
a();
*/
/*
5)
Wenn ich in einer anderen Variablen b eine Referenz auf a setze,
enthält b genau das was bei a rechts hinter dem Gleichheitszeichen steht.
*/
/*
var a = function(){alert("hallo");};
var b = a;
console.log(a);
console.log(b);
*/
/*
----------------------------------------------------------------------------------------
6
Wenn ich die Funktion a aufrufe, notiere ich a();
oder in diesem Falle könnte ich auch b() notieren;
----------------------------------------------------------------------------------------
*/
/*
var a = function(){alert("hallo");};
var b = a;
b();
*/
/*
----------------------------------------------------------------------------------------
7
da b oder a die function enthält, die rechts hinter dem Gleichheitszeichen notiert ist,
müsste es doch auch möglich sein, diese namenlose Funktion direkt zu notieren und damit
einen funktionsaufruf zu erzeugen.
dazu muss ich die Funktion nur in Klammern einschließen
anstatt
b();
notiere ich
(function(){alert("hallo");})();
Die Klammern um den Funktions-Ausdruck sind erforderlich, damit der JavaScript-Parser erkennt,
dass der Funktionsausdruck zusammen gehört. Ohne Klammern könnte es zu einer Fehlerausgabe kommen.
Außerdem werden durch die Klammern Mehrdeutigkeiten vermieden.
Dieses Idiom in der Javascript Programmierung nennt man IIFA Immediately-invoked Function Expression
sofort ausgeführter Funktionsausdruck
----------------------------------------------------------------------------------------
*/
/*
(function(){alert("hallo");})();
*/
/*
----------------------------------------------------------------------------------------
Nun komme ich nochmal auf die ersten Beispiele zurück
Benutzt man aus den Codefragmenten einen EventListener (klicken um.....)
hat der Listener 2 Parameter, den Event und eine Referenz auf eine Funktion
this.kiste.addEventListener("click", verschiebe);
Außerdem wird oftmals noch ein bind() an die Funktionsreferenz angehängt.
this.kiste.addEventListener("click", verschiebe.bind(this));
Man kann als Parameter angeben was innerhalb der Funktion this bedeuten soll.
Ohne bind() bezieht sich this in einer Funktion, immer auf das Funktionsobjekt selbst
(was das genau bedeutet ist hier nicht so wichtig)
Außerhalb der Funktion bedeutet this in diesem Fall die Hauptbühne
Stünde das Script innerhalb eines MC wäre es die Timeline des MCs.
KLicke beim Testen auf den MC
----------------------------------------------------------------------------------------
*/
/*
function verschiebe() {
this.kiste.x = 0;
this.kiste.y = 0;
}
this.kiste.addEventListener("click", verschiebe.bind(this));
*/
/*
----------------------------------------------------------------------------------------
In den vorigen Beispielen bin ich ausführlich auf die Funktionsreferenz eingegangen
und die Möglichkeiten eine Funktion aufzurufen.
So kann man auch mit dieser Schreibweise die bind() Methode nutzen.
bind() an die Funktion angehängt. Der Parameter von bind() bestimmt den Gültikeitsbereich von
this innerhalb der Funktion.
Oder anders ausgedrückt, was bedeutet this innerhalb der Funktion.
Im nächsten Beispiel mehr dazu
----------------------------------------------------------------------------------------
*/
/*
function verschiebe() {
this.kiste.x = 0;
this.kiste.y = 0;
}
(verschiebe.bind(this))();
*/
/*
----------------------------------------------------------------------------------------
Was bedeutet dieses this in den Klammern? Dazu ein anderes Beispiel.
Außerhalb der Funktion greife ich mit mit this.kiste auf den MC zu.
Wenn ich this.kiste als Argument der bind() Methode zuweise, kann ich innerhalb der Funktion mit this
auf den MC this.kiste zugreifen
----------------------------------------------------------------------------------------
*/
/*
function verschiebe() {
this.x = 0;
this.y = 0;
}
(verschiebe.bind(this.kiste))();
*/
/*
----------------------------------------------------------------------------------------
Das funktioniert auch mit Parametern
----------------------------------------------------------------------------------------
*/
/*
function verschiebe(xpos, ypos) {
this.kiste.x = xpos;
this.kiste.y = ypos;
}
(verschiebe.bind(this))(0,100);
*/
/*
----------------------------------------------------------------------------------------
Hier noch ein Beispiel, welches thematisch verwandt ist, auch wenn es nicht direkt zum vorigen Beispiel passt.
In einem Eventlistener kann man anstatt eine Referenz auf eine Funktion auch eine anonyme Funktion einfügen.
this.kiste.addEventListener("click", meinefunktion);
meinefunktion wird durch eine anonyme Funktion ersetzt
function(parameter){anweisung;}
die Methode bind() kann man an die Funktion anfügen.
----------------------------------------------------------------------------------------
*/
/*
this.kiste.addEventListener("click", function () {
this.kiste.x = 20;
this.kiste.y = 80;
}.bind(this));
*/