Verstehen und verwenden Sie den Schließungsmechanismus von JavaScript_Grundkenntnisse

Der große Genosse Einstein sagte einmal: „Wenn man einem 6-jährigen Kind etwas nicht klar erklären kann, dann versteht man es selbst nicht.“ Als ich jedoch einem 27-jährigen Freund erklärte, was Schließungen sind, scheiterte ich völlig.

Dies war ursprünglich eine Frage eines ausländischen Freundes auf Stack Overflow zu JavaScript-Abschlüssen. Da diese Frage jedoch auf Stack Overflow gestellt wurde, werden sich natürlich viele Experten melden, um sie zu beantworten. Einige der Antworten sind tatsächlich Klassiker, wie zum Beispiel die folgende:

Wenn Sie eine interne Funktion in einer externen Funktion definieren, also eine verschachtelte Funktion, dann kann die interne Funktion auch auf die Variablen in der externen Funktion zugreifen:

function foo(x) {
 var tmp = 3;
 function bar(y) {
 alert(x + y + (++tmp));
 }
 bar(10);
}

foo(2); // alert 16
foo(2); // alert 16
foo(2); // alert 16

Dieser Code kann korrekt ausgeführt werden und gibt das Ergebnis zurück: 16, da bar auf die Variable tmp der externen Funktion und auch auf den Parameter x der externen Funktion foo zugreifen kann. Aber das obige Beispiel ist kein Abschluss!

Um den Abschluss zu implementieren, muss die interne Funktion als Rückgabewert der externen Funktion zurückgegeben werden. Vor der Rückgabe sperrt die interne Funktion alle Variablen in der externen Funktion, auf die im Speicher zugegriffen wurde. Diese Variablen werden wie folgt im Speicher von bar gespeichert und nicht vom Garbage Collector recycelt:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + (++tmp));
 }
}
var bar = foo(2); // bar 现在是个闭包了
bar(10); // alert 16
bar(10); // alert 17
bar(10); // alert 18

Wenn bar im obigen Code zum ersten Mal ausgeführt wird, wird immer noch das Ergebnis zurückgegeben: 16, da bar immer noch auf x und tmp zugreifen kann, obwohl es nicht mehr direkt im Bereich von foo existiert. Da tmp also beim Schließen von bar gesperrt ist, wird tmp jedes Mal erhöht, wenn bar ausgeführt wird. Wenn bar also zum zweiten und dritten Mal ausgeführt wird, werden 17 bzw. 18 zurückgegeben.

In diesem Beispiel ist x nur ein reiner Wert. Wenn foo aufgerufen wird, wird der Wert x als Parameter nach foo kopiert.

Aber wenn JavaScript Objekte verarbeitet, verwendet es immer Referenzen. Wenn Sie foo mit einem Objekt als Parameter aufrufen, ist das, was in foo übergeben wird, tatsächlich eine Referenz auf das Originalobjekt, sodass das Originalobjekt auch dem Schließen gleichkommt . , wie folgt:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + tmp++);
 x.memb = x.memb ? x.memb + 1 : 1;
 alert(x.memb);
 }
}
var age = new Number(2);
var bar = foo(age); // bar 现在是个闭包了
bar(10); // alert 15 1
bar(10); // alert 16 2
bar(10); // alert 17 3

Wie erwartet wird bei jeder Ausführung von bar(10) nicht nur tmp, sondern auch x.memb inkrementiert, da x im Funktionskörper und age außerhalb der Funktion auf dasselbe Objekt verweisen.

über http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

Ergänzung: Durch die oben genannten Beispiele sollten Sie in der Lage sein, Abschlüsse klarer zu verstehen. Wenn Sie glauben, es zu verstehen, können Sie versuchen, das Ausführungsergebnis des folgenden Codes zu erraten:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + tmp++);
 x.memb = x.memb ? x.memb + 1 : 1;
 alert(x.memb);
 }
}
var age = new Number(2);
var bar1 = foo(age); // bar1 现在是个闭包了
bar1(10); // alert 15 1
bar1(10); // alert 16 2
bar1(10); // alert 17 3

var bar2 = foo(age); // bar2 现在也是个闭包了
bar2(10); // alert ? ?
bar2(10); // alert ? ?
bar2(10); // alert ? ?

bar1(10); // alert ? ?
bar1(10); // alert ? ?
bar1(10); // alert ? ?

In der Praxis können Verschlüsse zu sehr eleganten Designs führen, die eine individuelle Anpassung der verschiedenen auf funarg definierten Berechnungsmethoden ermöglichen. Das Folgende ist ein Beispiel für die Array-Sortierung, die eine Sortierbedingungsfunktion als Parameter akzeptiert:

[1, 2, 3].sort(function (a, b) {
 ... // 排序条件
});

Das gleiche Beispiel ist, dass die Map-Methode eines Arrays das ursprüngliche Array auf ein neues Array zuordnet, basierend auf den in der Funktion definierten Bedingungen:

[1, 2, 3].map(function (element) {
 return element * 2;
}); // [2, 4, 6]

Mithilfe funktionaler Parameter können Sie eine Suchmethode einfach implementieren und unbegrenzte Suchbedingungen unterstützen:

someCollection.find(function (element) {
 return element.someProperty == 'searchCondition';
});

Es gibt auch Anwendungsfunktionen, wie zum Beispiel die allgemeine forEach-Methode, die die Funktion auf jedes Array-Element anwendet:

[1, 2, 3].forEach(function (element) {
 if (element % 2 != 0) {
  alert(element);
 }
}); // 1, 3

Übrigens können die Apply- und Call-Methoden von Funktionsobjekten auch als Anwendungsfunktionen in der funktionalen Programmierung verwendet werden. Hier betrachten wir sie als Anwendungsfunktionen – Funktionen, die auf Parameter angewendet werden (in apply ist es die Parameterliste, in call ist es ein unabhängiger Parameter):

(function () {
 alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);

Schließungen haben eine weitere sehr wichtige Anwendung – verzögertes Anrufen:

var a = 10;
setTimeout(function () {
 alert(a); // 10, after one second
}, 1000);
还有回调函数：

//...
var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
 // 当数据就绪的时候，才会调用;
 // 这里，不论是在哪个上下文中创建
 // 此时变量“x”的值已经存在了
 alert(x); // 10
};
//...

Sie können auch Kapselungsbereiche erstellen, um Hilfsobjekte auszublenden:

var foo = {};

// 初始化
(function (object) {

 var x = 10;

 object.getX = function _getX() {
  return x;
 };

})(foo);

alert(foo.getX()); // 获得闭包 "x" – 10