Heim Web-Frontend js-Tutorial Verstehen und verwenden Sie den Schließungsmechanismus von JavaScript_Grundkenntnisse

Verstehen und verwenden Sie den Schließungsmechanismus von JavaScript_Grundkenntnisse

May 16, 2016 pm 03:45 PM
javascript 闭包

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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 ? ?

Nach dem Login kopieren

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) {
 ... // 排序条件
});
Nach dem Login kopieren

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]
Nach dem Login kopieren

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

someCollection.find(function (element) {
 return element.someProperty == 'searchCondition';
});
Nach dem Login kopieren

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
Nach dem Login kopieren

Ü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]);
Nach dem Login kopieren

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
};
//...

Nach dem Login kopieren

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

Nach dem Login kopieren

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was bedeutet der Abschluss im C++-Lambda-Ausdruck? Was bedeutet der Abschluss im C++-Lambda-Ausdruck? Apr 17, 2024 pm 06:15 PM

In C++ ist ein Abschluss ein Lambda-Ausdruck, der auf externe Variablen zugreifen kann. Um einen Abschluss zu erstellen, erfassen Sie die äußere Variable im Lambda-Ausdruck. Abschlüsse bieten Vorteile wie Wiederverwendbarkeit, Ausblenden von Informationen und verzögerte Auswertung. Sie sind in realen Situationen nützlich, beispielsweise bei Ereignishandlern, bei denen der Abschluss auch dann noch auf die äußeren Variablen zugreifen kann, wenn diese zerstört werden.

Wie implementiert man einen Abschluss im C++-Lambda-Ausdruck? Wie implementiert man einen Abschluss im C++-Lambda-Ausdruck? Jun 01, 2024 pm 05:50 PM

C++-Lambda-Ausdrücke unterstützen Abschlüsse, die Funktionsbereichsvariablen speichern und sie für Funktionen zugänglich machen. Die Syntax lautet [capture-list](parameters)->return-type{function-body}. Capture-Liste definiert die zu erfassenden Variablen. Sie können [=] verwenden, um alle lokalen Variablen nach Wert zu erfassen, [&], um alle lokalen Variablen nach Referenz zu erfassen, oder [Variable1, Variable2,...], um bestimmte Variablen zu erfassen. Lambda-Ausdrücke können nur auf erfasste Variablen zugreifen, den ursprünglichen Wert jedoch nicht ändern.

Was sind die Vor- und Nachteile von Abschlüssen in C++-Funktionen? Was sind die Vor- und Nachteile von Abschlüssen in C++-Funktionen? Apr 25, 2024 pm 01:33 PM

Ein Abschluss ist eine verschachtelte Funktion, die auf Variablen im Bereich der äußeren Funktion zugreifen kann. Zu ihren Vorteilen gehören Datenkapselung, Zustandserhaltung und Flexibilität. Zu den Nachteilen gehören der Speicherverbrauch, die Auswirkungen auf die Leistung und die Komplexität des Debuggens. Darüber hinaus können Abschlüsse anonyme Funktionen erstellen und diese als Rückrufe oder Argumente an andere Funktionen übergeben.

Lösen Sie das durch Schließungen verursachte Speicherverlustproblem Lösen Sie das durch Schließungen verursachte Speicherverlustproblem Feb 18, 2024 pm 03:20 PM

Titel: Durch Abschlüsse und Lösungen verursachte Speicherlecks Einführung: Abschlüsse sind ein sehr verbreitetes Konzept in JavaScript, das internen Funktionen den Zugriff auf Variablen externer Funktionen ermöglicht. Allerdings können Schließungen bei falscher Verwendung zu Speicherverlusten führen. In diesem Artikel wird das durch Schließungen verursachte Speicherverlustproblem untersucht und Lösungen sowie spezifische Codebeispiele bereitgestellt. 1. Durch Schließungen verursachte Speicherlecks Das Merkmal von Schließungen besteht darin, dass interne Funktionen auf Variablen externer Funktionen zugreifen können, was bedeutet, dass in Schließungen referenzierte Variablen nicht durch Müll gesammelt werden. Bei unsachgemäßer Verwendung

Der Einfluss von Funktionszeigern und -abschlüssen auf die Golang-Leistung Der Einfluss von Funktionszeigern und -abschlüssen auf die Golang-Leistung Apr 15, 2024 am 10:36 AM

Die Auswirkungen von Funktionszeigern und -abschlüssen auf die Go-Leistung sind wie folgt: Funktionszeiger: Etwas langsamer als direkte Aufrufe, aber verbessert die Lesbarkeit und Wiederverwendbarkeit. Schließungen: Normalerweise langsamer, kapseln aber Daten und Verhalten. Praktischer Fall: Funktionszeiger können Sortieralgorithmen optimieren und Abschlüsse können Ereignishandler erstellen, aber sie bringen Leistungseinbußen mit sich.

Wie werden Schließungen in Java implementiert? Wie werden Schließungen in Java implementiert? May 03, 2024 pm 12:48 PM

Abschlüsse in Java ermöglichen es inneren Funktionen, auf äußere Bereichsvariablen zuzugreifen, selbst wenn die äußere Funktion beendet wurde. Durch anonyme innere Klassen implementiert, enthält die innere Klasse einen Verweis auf die äußere Klasse und hält die äußeren Variablen aktiv. Schließungen erhöhen die Codeflexibilität, Sie müssen sich jedoch des Risikos von Speicherverlusten bewusst sein, da Verweise auf externe Variablen durch anonyme innere Klassen diese Variablen am Leben halten.

Verkettete Aufrufe und Schließungen von PHP-Funktionen Verkettete Aufrufe und Schließungen von PHP-Funktionen Apr 13, 2024 am 11:18 AM

Ja, die Einfachheit und Lesbarkeit des Codes können durch verkettete Aufrufe und Abschlüsse optimiert werden: Verkettete Aufrufe verknüpfen Funktionsaufrufe in einer fließenden Schnittstelle. Abschlüsse erstellen wiederverwendbare Codeblöcke und greifen auf Variablen außerhalb von Funktionen zu.

Zusammenfassung der Vor- und Nachteile anonymer Golang-Funktionen und -Verschlüsse Zusammenfassung der Vor- und Nachteile anonymer Golang-Funktionen und -Verschlüsse May 05, 2024 am 09:54 AM

Anonyme Funktionen sind prägnant und anonym, weisen jedoch eine schlechte Lesbarkeit und Schwierigkeiten beim Debuggen auf; Schließungen können Daten kapseln und den Status verwalten, können jedoch zu Speicherverbrauch und Zirkelverweisen führen. Praktischer Fall: Anonyme Funktionen können für die einfache numerische Verarbeitung verwendet werden, und Abschlüsse können die Zustandsverwaltung implementieren.

See all articles