Dieser Artikel analysiert das Konzept und die Verwendung von JavaScript -Schließungen. Teilen Sie es für Ihre Referenz. Die Details sind wie folgt:
Wenn es um Schließungen geht, glaube ich, dass jeder von ihnen gehört hat. Lassen Sie mich Ihnen mein einfaches Verständnis unten sagen.
Um ehrlich zu sein, gibt es nicht viele Szenarien zum manuellen Schreiben von Schließungen in der täglichen Arbeit, aber die im Projekt verwendeten Frameworks und Komponenten verwenden mehr oder weniger Schließungen.
Daher ist es sehr notwendig, Schließungen zu verstehen. hehe ...
1. Was ist eine Schließung?
Kurz gesagt, es ist eine Funktion, die Variablen in anderen Funktionen lesen kann.
Aufgrund des Umfangs von JS -Variablen können interne Variablen nicht extern zugegriffen werden, und externe Variablen können extern sein.
2. Verwenden Sie Szenarien
1. Implementieren Sie private Mitglieder.
2. Schützen Sie den Namespaces, um die Verschmutzung globaler Variablen zu vermeiden.
3. Cache -Variablen.
Schauen wir uns zunächst ein Beispiel für die Kapselung an:
Kopieren Sie den Code wie folgt: var person = function () {
// Der Umfang der Variablen befindet sich innerhalb der Funktion und kann nicht außerhalb zugegriffen werden
var name = "Standard";
zurückkehren {
GetName: function () {
Rückgabename;
},
setName: function (newname) {
name = newname;
}
}
} ();
console.log (Person.name); // Direktzugriff ist das Ergebnis: undefiniert
console.log (person.getName ()); // Das Ergebnis ist: Standardeinstellung
console.log (Person.SetName ("Langjt"));
console.log (person.getName ()); // Das Ergebnis ist: Langjt
Schauen wir uns die gängigen Verschlüsse in Schleifen an, um das Problem der Referenzierung externer Variablen zu lösen:
Die Codekopie lautet wie folgt: var ali = document.getElementsByTagName ('li');
für (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .onclick = function () {
Alarm (i); // Egal auf welches Element Sie klicken, der Pop-up-Wert ist Len, der angibt, dass der Wert von I hier und der Wert von I Dast für für das gleiche ist.
};
}
Nach dem Verschluss:
Die Codekopie lautet wie folgt: var ali = document.getElementsByTagName ('li');
für (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .onclick = (Funktion (i) {
return function () {
Alarm (i); // Klicken Sie zu diesem Zeitpunkt auf das Element <li> und das entsprechende Index wird angezeigt.
}
})(ich);
}
3.. Dinge zu beachten
1. Speicherleck
Da Verschlüsse dazu führen, dass alle Variablen in der Funktion im Speicher gespeichert werden und der Speicherverbrauch sehr groß ist, können Schließungen nicht missbraucht werden, andernfalls verursacht er Leistungsprobleme der Webseite.
Zum Beispiel:
Kopieren Sie den Code wie folgt: Funktion foo () {
var odiv = document.getElementById ('j_div');
var id = odiv.id;
odiv.onclick = function () {
// alarm (odiv.id); Hier gibt es eine kreisförmige Referenz. Odiv ist immer noch im Speicher, nachdem die IE -Low -Version -Seite geschlossen ist. Cache primitive Typen anstelle von Objekten so weit wie möglich.
Alarm (ID);
};
odiv = null;
}
2. Variable Benennung
Wenn die Variable der inneren Funktion und der variable Name der äußeren Funktion gleich sind, kann die innere Funktion nicht mehr auf die Variable mit demselben Namen wie die äußere Funktion verweisen.
Zum Beispiel:
Kopieren Sie den Code wie folgt: Funktion foo (num) {
Rückgabefunktion (num) {
console.log (num);
}
}
var f = neuer Foo (9);
F(); // undefiniert
Tatsächlich wird die obige Verwendung als Funktion Currying bezeichnet, nämlich die Technik, eine Funktion zu konvertieren, die mehrere Parameter in eine Funktion akzeptiert, die einen einzelnen Parameter (der erste Parameter der ursprünglichen Funktion) akzeptiert, und eine neue Funktion zurückzugeben, die die verbleibenden Parameter akzeptiert und das Ergebnis zurückgibt. Im Wesentlichen wird auch Funktionen verwendet, die zwischengespeichert werden können, wie z. B.:
Kopieren Sie den Code wie folgt: var adder = function (num) {
Rückgabefunktion (y) {
Rückgabe num+y;
};
};
var inc = add (1);
var dec = add (-1);
// Inc, Dez, jetzt sind zwei neue Funktionen, die zum Übergeben des Parameterwerts (+/) 1 verwendet werden
Alarm (Inc (99)); // 100
Alarm (Dez (101)); // 100
Alarm (Addierer (100) (2)); // 102
Alarm (Addierer (2) (100)); // 102
Zum Beispiel im SeaJS -Quellcode von Alibaba Yubo:
Kopieren Sie den Code wie folgt:/**
* util -lang.js - die minimale Sprachverbesserung
*/
Funktion iStype (Typ) {
Rückgabefunktion (obj) {
return {} .toString.call (obj) == "[Objekt" + Typ + "]"
}
}
var isObject = iStype ("Objekt");
var isstring = iStype ("String");
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.