Beispiel für die Verwendung von Javascript-Schließungen: Analyse_Javascript-Kenntnisse

Dieser Artikel analysiert das Konzept und die Verwendung von Javascript-Verschlüssen anhand von Beispielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wenn es um Schließungen geht, muss jeder davon gehört haben. Hier ist mein einfaches Verständnis.
Um ehrlich zu sein, gibt es nicht viele Szenarien, in denen Abschlüsse in der täglichen Arbeit tatsächlich manuell geschrieben werden, aber die im Projekt verwendeten Frameworks und Komponenten von Drittanbietern verwenden mehr oder weniger Abschlüsse.
Daher ist es sehr wichtig, Abschlüsse zu verstehen. Haha...

1. Was ist Schließung

Kurz gesagt handelt es sich um eine Funktion, die die internen Variablen anderer Funktionen lesen kann.
Aufgrund der Eigenschaften des JS-Variablenbereichs kann auf interne Variablen nicht von außen zugegriffen werden, auf externe Variablen jedoch von innen.

2. Nutzungsszenarien

1. Private Mitglieder implementieren.
2. Schützen Sie den Namespace und vermeiden Sie die Verschmutzung globaler Variablen.
3. Variablen zwischenspeichern.

Sehen wir uns zunächst ein Beispiel für die Kapselung an:

Code kopieren Der Code lautet wie folgt:

var person = function () {
//Der Gültigkeitsbereich der Variablen liegt innerhalb der Funktion und kann von außen nicht aufgerufen werden
var name = "default";

zurück {
          getName: function () {
              Rückgabename;
},
setName: Funktion (newName) {
              name = newName;
}
}
}();

console.log(person.name); // Direkter Zugriff, das Ergebnis ist: undefiniert
console.log(person.getName()); // Das Ergebnis ist: default
console.log(person.setName("langjt"));
console.log(person.getName()); // Das Ergebnis ist: langjt

Sehen Sie sich die häufig verwendeten Abschlüsse in Schleifen an, um das Problem der Referenzierung externer Variablen zu lösen:

Code kopieren Der Code lautet wie folgt:

var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i aLi[i].onclick = function() {
warning(i); // Egal auf welches

-Element geklickt wird, der angezeigte Wert ist len, was darauf hinweist, dass der Wert von i hier derselbe ist wie der Wert von i, der danach gedruckt wird.
};
}

Nach Verwendung des Verschlusses:

Code kopieren Der Code lautet wie folgt:

var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i aLi[i].onclick = (function(i) {
Rückgabefunktion() {
Alert(i); // Klicken Sie zu diesem Zeitpunkt auf das Element

und der entsprechende Index wird angezeigt.
}
})(i);
}

3. Vorsichtsmaßnahmen

1. Speicherverlust

Da Schließungen dazu führen, dass alle Variablen in der Funktion im Speicher gespeichert werden, was viel Speicher verbraucht, können Schließungen nicht missbraucht werden, da es sonst zu Leistungsproblemen auf der Webseite kommt.
Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Funktion foo() {
var oDiv = document.getElementById(‘J_DIV’);
var id = oDiv.id;
oDiv.onclick = function() {
// Alert(oDiv.id); Hier gibt es einen Zirkelverweis, und oDiv befindet sich noch im Speicher, nachdem die IE-Seite mit niedriger Version geschlossen wurde. Speichern Sie daher nach Möglichkeit primitive Typen anstelle von Objekten im Cache.
​​alert(id);
};
oDiv = null;
}

2. Variablenbenennung

Wenn der Variablenname der internen Funktion und der Variablenname der externen Funktion gleich sind, kann die interne Funktion nicht mehr auf die gleichnamige Variable der externen Funktion verweisen.
Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Funktion foo(num) {
Rückgabefunktion(num) {
console.log(num);
}
}
var f = new foo(9);
f(); // undefiniert

In fact, the above usage, the professional term is called function currying, is to transform a function that accepts multiple parameters into a function that accepts a single parameter (the first parameter of the original function), and returns the remaining parameters. New function technology that takes parameters and returns a result. Essentially, it also takes advantage of the caching feature of closures, such as:

Copy code The code is as follows:

var adder = function(num) {
Return function(y) {
          return num y;
};
};

var inc = adder(1);
var dec = adder(-1);
//inc, dec are now two new functions, their function is to convert the passed parameter value (/‐)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102

Another example is Ali Yubo’s seaJS source code:

Copy code The code is as follows:

/**
 * util-lang.js - The minimal language enhancement
 */
function isType(type) {
return function(obj) {
Return {}.toString.call(obj) == "[object " type "]"
}
}

var isObject = isType("Object");
var isString = isType("String");

I hope this article will be helpful to everyone’s JavaScript programming design.