1. Anonyme Funktionen
Funktionen sind das flexibelste Objekt in JavaScript. Hier erklären wir nur den Zweck seiner anonymen Funktionen. Anonyme Funktionen: Es sind Funktionen ohne Funktionsnamen.
1.1 Definition einer Funktion. Lassen Sie uns zunächst kurz die Definition einer Funktion vorstellen. Es kann grob in drei Arten unterteilt werden.
Der erste: Dies ist auch das häufigste
Die Codekopie lautet wie folgt:
Funktion double (x) {
Rückgabe 2 * x;
}
Die zweite Methode: Diese Methode verwendet den Funktionskonstruktor, der sowohl die Parameterliste als auch die Funktionskörper als Zeichenfolgen verwendet, was sehr unpraktisch ist und nicht empfohlen wird.
Die Codekopie lautet wie folgt:
var double = new function ('x', 'return 2 * x;');
Der dritte Typ:
var double = function (x) {return 2* x; }
Beachten Sie, dass die Funktion rechts von "=" eine anonyme Funktion ist. Nach dem Erstellen der Funktion wird die Funktion dem variablen Quadrat zugeordnet.
1.2 Erstellung anonymer Funktionen
Die erste Methode: Definieren Sie die oben erwähnte quadratische Funktion, die auch eine der am häufigsten verwendeten Methoden ist.
Die zweite Methode:
Die Codekopie lautet wie folgt:
(Funktion (x, y) {
alarm (x + y);
}) (dreiundzwanzig);
Hier wird eine anonyme Funktion erstellt (in der ersten Halterung), und die zweite Halterung wird verwendet, um die anonyme Funktion aufzurufen und die Parameter zu übergeben.
2. Schließung
Das englische Wort für den Verschluss ist der Verschluss, der ein sehr wichtiger Bestandteil von JavaScript ist, da die Verwendung von Verschlüssen die Menge unseres Codes erheblich reduzieren kann, unser Code klarer aussehen usw. Kurz gesagt, die Funktionen sind sehr leistungsstark.
Die Bedeutung des Verschlusses: Um es unverblümt auszudrücken, sind Verschlüsse die Verschachtelungsfunktionen. Die innere Funktion kann alle Variablen der äußeren Funktion verwenden, auch wenn die äußere Funktion ausgeführt wurde (dies beinhaltet die JavaScript -Bereichskette).
Beispiel 1
Die Codekopie lautet wie folgt:
Funktion checkCLOUSS () {
var str = 'Rain-Man';
setTimeout (
function () {alert (str); } // Dies ist eine anonyme Funktion
2000);
}
prüfleure ();
Dieses Beispiel sieht sehr einfach aus. Nach sorgfältiger Analyse seines Ausführungsprozesses gibt es immer noch viele Wissenspunkte: Die Ausführung der Checkclosenfunktion ist sofort (möglicherweise nur 0,00001 Millisekunden), eine variable STR wird im Körper der Checkclosenfunktion erstellt. Nach der Ausführung der Prüfung wird STR nicht freigegeben. Dies liegt daran, dass die anonyme Funktion in SetTimeout einen Hinweis auf Str. Der STR wird erst nach 2 Sekunden freigelassen.
Beispiel 2 optimieren Sie den Code
Die Codekopie lautet wie folgt:
Funktion Fortimeout (x, y) {
alarm (x + y);
}
Funktionsverzögerung (x, y, Zeit) {
setTimeout ('festimeout (' + x + ',' + y + ')', Zeit);
}
/**
* Die obige Verzögerungsfunktion ist sehr schwer zu lesen und ist nicht einfach zu schreiben. Wenn Sie Verschlüsse verwenden, kann der Code klarer sein
* Funktionsverzögerung (x, y, Zeit) {
* setTimeout (
* function () {
* Fortimeout (x, y)
*}
* , Zeit);
*}
*/
3. Geben Sie ein Beispiel an
Die größte Verwendung anonymer Funktionen besteht darin, Schließungen (eines der Merkmale der JavaScript -Sprache) zu erstellen und Namenspaces zu erstellen, um die Verwendung globaler Variablen zu verringern.
Beispiel 3:
Die Codekopie lautet wie folgt:
var oevent = {};
(Funktion(){
var addEvent = function () { / *Die Implementierung des Codes wird weggelassen * /};
Funktion removent () {}
oevent.addevent = addEvent;
oevent.removeEvent = REMEDEVENT;
}) ();
In diesem Code sind die Funktionen AddEvent und REMEDEVENT beide lokale Variablen, aber wir können es über die globale Variable Oevent verwenden, die die Verwendung globaler Variablen erheblich reduziert und die Sicherheit der Webseite verbessert. Wir möchten diesen Code verwenden: oevent.adDevent (document.getElementById ('box'), 'click', function () {});
Beispiel 4:
Die Codekopie lautet wie folgt:
var Rainman = (Funktion (x, y) {
Rückgabe x + y;
}) (dreiundzwanzig);
/**
* Es kann auch in der folgenden Form geschrieben werden, da die erste Klammer uns nur beim Lesen hilft, aber das folgende Schreibformat wird nicht empfohlen.
* var rainman = function (x, y) {
* Return X + Y;
*} (dreiundzwanzig);
*/
Hier erstellen wir einen variablen Regenman und initialisieren ihn auf 5, indem wir die anonyme Funktion direkt aufrufen. Dieser Trick ist manchmal sehr praktisch.
Beispiel 5:
Die Codekopie lautet wie folgt:
var out = null;
(Funktion(){
var eins = 1;
Funktion inner () {
ein += 1;
Alarm (einer);
}
äußere = innere;
}) ();
äußere(); // 2
äußere(); // 3
äußere(); // 4
Die Variable in diesem Code ist eine lokale Variable (weil sie in einer Funktion definiert ist), sodass das externe unzugänglich ist. Aber hier erstellen wir eine innere Funktion, die auf die variable zugreifen kann. und verweisen Sie auch auf die globale variable äußere nach innerlich, sodass drei Aufrufe zum Außenbereich das inkrementelle Ergebnis ergeben.
4. Achten Sie darauf
4.1 Der Verschluss ermöglicht es Innenschichtfunktionen, sich auf Variablen in übergeordneten Funktionen zu beziehen, aber die Variable ist der Endwert
Beispiel 6:
Die Codekopie lautet wie folgt:
/**
* <body>
* <ul>
* <li> eins </li>
* <li> zwei </li>
* <li> drei </li>
* <li> eins </li>
* </ul>
*/
var lists = document.getElementsByTagName ('li');
für (var i = 0, len = lists.length; i <len; i ++) {
listet [i] .onmouseover = function () {
Alarm (i);
};
}
Sie werden feststellen, dass wenn sich die Maus durch jedes <li & rt bewegt; Element, es taucht immer 4 anstelle des von uns erwarteten Element -Index auf. Warum ist das? Die Vorsichtsmaßnahmen wurden diskutiert (endgültig). Offensichtlich ist diese Erklärung zu einfach. Wenn das Mausover -Ereignis die Hörfunktion aufruft, suchen Sie zuerst nach, ob ich in der anonymen Funktion (Funktion () {alert (i);}) definiert ist, und das Ergebnis ist, dass es nicht definiert ist; Daher wird es nach oben schauen, und das Suchergebnis ist, dass es definiert wurde und der Wert von I 4 (der Wert von i nach der Schleife) ist; Am Ende ist jedes Popup 4.
Lösung 1:
Die Codekopie lautet wie folgt:
var lists = document.getElementsByTagName ('li');
für (var i = 0, len = lists.length; i <len; i ++) {
(Funktion (Index) {
listet [index] .onmouseover = function () {
Alert (Index);
};
})(ich);
}
Lösung 2:
Die Codekopie lautet wie folgt:
var lists = document.getElementsByTagName ('li');
für (var i = 0, len = lists.length; i <len; i ++) {
listet [i]. $$ Index = i; // Zeichnen Sie den Index auf, indem Sie das $$ -Indexattribut auf das DOM -Element binden
listet [i] .onmouseover = function () {
alarm (this. $$ Index);
};
}
Lösung Drei:
Die Codekopie lautet wie folgt:
Funktion EventListener (Liste, Index) {
list.onmouseover = function () {
Alert (Index);
};
}
var lists = document.getElementsByTagName ('li');
für (var i = 0, len = lists.length; i <len; i ++) {
EventListener (listet [i], i);
}
4.2 Speicherleck
Die Verwendung von Schließungen ist sehr einfach, um das Speicherleck des Browsers zu verursachen. In schweren Fällen ist der Browser tot. Wenn Sie interessiert sind, finden Sie unter: http://www.vevb.com/article/57404.htm