Entmystifizierende JavaScript -Schließungen, Rückrufe und IIFes

In diesem Artikel werden drei entscheidende Konzepte in der modernen JavaScript-Entwicklung eingehende drei wichtige Konzepte untersucht: Schließungen, Rückruffunktionen und sofortige Ausführungsfunktionsausdrücke (IIFE). Wir haben ausführlich über den variablen Umfang und die Verbesserung gelernt und nun unsere Erkundungsreise abschließen.

Kernpunkte

• JavaScript -Schließungen sind Funktionen, die auf ihre übergeordneten Umfangsvariablen zugreifen können.
• Die Rückruffunktion ist eine Funktion, die als Parameter an andere Funktionen übergeben wird und dann innerhalb einer externen Funktion ausgeführt wird und eine Möglichkeit bietet, die Ausführung zu verzögern oder die Reihenfolge der asynchronen Operationen aufrechtzuerhalten.
• Function Expression (IIfe) ausführen nun ist eine Funktion, die unmittelbar nach der Definition ausgeführt wird, um den Variablenumfang zu schützen und die globale Umfangskontamination zu verhindern.
• Schließungen können sowohl in ihrem Bereich gespeicherte Variablen lesen als auch aktualisieren, und diese Aktualisierungen sind für alle Verschlüsse sichtbar, die auf diese Variablen zugreift, was beweist, dass die Schließung Verweise auf die Variablen und nicht auf einen Wert speichert.
• Die Verwendung von IIFE hilft dabei, private Bereiche in Funktionen zu erstellen, wodurch die Verwaltung von Variablen besser verwaltet und externen Zugriff auf diese Variablen verhindert wird.
• Die Kombination dieser Konzepte (Verschluss, Rückruffunktionen und IIFE) bietet leistungsstarke Tools zum Schreiben von prägnantem, effizientem und sicherem JavaScript -Code, um die Funktionalität zu verkörpern und die globale Umfangskontamination zu vermeiden.

Schließen

In JavaScript ist eine Schließung jede Funktion, die Verweise auf seine übergeordnete Umfangsvariable behält, auch wenn die übergeordnete Funktion zurückgegeben hat.

Tatsächlich kann jede Funktion als Schließung angesehen werden, denn wie wir im Abschnitt Variable Geltungsbereich des ersten Teils dieses Tutorials gelernt haben, kann eine Funktion referenziert oder zugegriffen werden:

Alle Variablen und Parameter in seinem eigenen Funktionsbereich
• Alle Variablen und Parameter der externen (übergeordneten) Funktion
• jede Variable im globalen Bereich

Sie haben also den Verschluss verwendet, ohne es zu wissen. Aber unser Ziel ist es nicht nur, sie zu benutzen - aber um sie zu verstehen. Wenn wir nicht verstehen, wie sie funktionieren, können wir sie nicht richtig verwenden. Dazu teilen wir die obige Abschlussdefinition in drei leicht verständliche wichtige Punkte auf. Punkt 1:

Sie können sich auf Variablen beziehen, die außerhalb der aktuellen Funktion definiert sind.

In diesem Codebeispiel bezieht sich die Funktion

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  printLocation();
}

setLocation("Paris"); // 输出：You are in Paris, France</code>

auf den Parameter

und printLocation() der beigefügten (übergeordneten) setLocation() -Funktion. Wenn country aufgerufen wird, gibt city unter Verwendung der früheren Variablen und Parameter erfolgreich "Sie in Paris, Frankreich" aus. setLocation() printLocation() Punkt 2:

Innenfunktionen können sich auch nach Rückgabe der externen Funktion auf Variablen beziehen, die in externen Funktionen definiert sind.

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  printLocation();
}

setLocation("Paris"); // 输出：You are in Paris, France</code>

Dies ist fast das gleiche wie das erste Beispiel, außer dass diesmal printLocation() im außerhalb der setLocation() -Funktion zurückgegeben wird, anstatt sofort aufzurufen. Daher ist der Wert von currentLocation die interne printLocation() -Funktion.

Wenn wir an diese currentLocation - alert(currentLocation); - wir erinnern die folgende Ausgabe:

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  return printLocation;
}

var currentLocation = setLocation("Paris");

currentLocation(); // 输出：You are in Paris, France</code>

Wie wir gesehen haben, wird printLocation() außerhalb seines lexikalischen Bereichs ausgeführt. setLocation() scheint zu verschwinden, aber printLocation() kann immer noch auf seine Variablen (country) und Parameter (city) zugreifen und "erinnern".

Der Verschluss (innere Funktion) kann sich an den Umfang um ihn herum (externe Funktion) erinnern, auch wenn er außerhalb seines lexikalischen Bereichs ausgeführt wird. Sie können es also später jederzeit in Ihrem Programm anrufen.

Punkt 3: Innenfunktionen speichern Variablen, die externe Funktionen nach Bezugnahme und nicht nach Werten sind.

<code class="language-javascript">function printLocation () {
  console.log("You are in " + city + ", " + country);
}</code>

hier cityLocation() Gibt ein Objekt zurück, das zwei Schließungen enthält - get() und set() - beide beziehen sich auf externe Variablen city. get() erhält den aktuellen Wert von city und set() aktualisiert ihn. Wenn der zweite Anruf myLocation.get(), gibt er einen aktualisierten (aktuellen) Wert von city - "Sydney" - anstelle des Standards "Paris" aus.

Daher können Verschlüsse sowohl ihre gespeicherten Variablen lesen als auch aktualisieren, und diese Aktualisierungen sind für alle Verschlüsse sichtbar, die auf sie zugreifen. Dies bedeutet, dass der Verschluss einen Verweis auf seine externe Variable speichert, anstatt ihren Wert zu kopieren. Dies ist ein sehr wichtiger Punkt, denn ohne zu wissen, dass dies zu schwierig zu findenden logischen Fehlern führen kann-wie wir im Abschnitt "Sofort (iife) ausführen" sehen werden. Ein interessantes Merkmal von

Der Verschluss ist, dass Variablen im Verschluss automatisch versteckt sind. Verschlüsse speichern Daten in ihren geschlossenen Variablen, ohne die Möglichkeit zu geben, direkt auf sie zuzugreifen. Die einzige Möglichkeit, diese Variablen zu ändern, besteht darin, indirekt auf sie zuzugreifen. Zum Beispiel sehen wir im letzten Code -Snippet, dass wir nur indirekt die Variable

durch Verwendung get() und set() verschluss ändern können. city

Wir können dieses Verhalten verwenden, um private Daten in Objekten zu speichern. Speichern Sie Daten als Attribut eines Objekts als Variable im Konstruktor und verwenden Sie dann einen Verschluss, um diese Variablen zu verweisen.

Wie Sie sehen können, gibt es nichts Mysteriöses oder tiefgreifendes um die Schließung - nur drei einfache Punkte, an die Sie sich erinnern sollten.

Rückruffunktion

In JavaScript sind Funktionen erstklassige Bürger. Eine der Konsequenzen dieser Tatsache ist, dass Funktionen als Argumente an andere Funktionen übergeben oder von anderen Funktionen zurückgegeben werden können.

Funktionen, die andere Funktionen als Parameter oder Rückgabefunktionen als Ergebnisse als Funktionen höherer Ordnung annehmen, und Funktionen, die als Parameter übergeben werden, werden als Rückruffunktionen bezeichnet. Es wird als "Rückruf" bezeichnet, weil es irgendwann "Rückruf" durch eine Funktion höherer Ordnung wird.

Rückruffunktionen haben viele tägliche Verwendung. Einer von ihnen ist, wenn wir die Methoden setTimeout() und setInterval() des Browserfensterobjekts verwenden - diese Methoden akzeptieren und führen die Rückruffunktion aus:

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  printLocation();
}

setLocation("Paris"); // 输出：You are in Paris, France</code>

Ein weiteres Beispiel ist, wenn wir einen Ereignishörer an ein Element auf der Seite anhängen. Auf diese Weise bieten wir tatsächlich einen Zeiger auf die Rückruffunktion, die auf dem Laufenden des Ereignisses aufgerufen wird.

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  return printLocation;
}

var currentLocation = setLocation("Paris");

currentLocation(); // 输出：You are in Paris, France</code>

Der einfachste Weg, um zu verstehen, wie Funktionen höherer Ordnung und Rückruffunktionen funktionieren, besteht darin, Ihre eigenen Funktionen höherer Ordnung und Rückruffunktionen zu erstellen. Lassen Sie uns jetzt einen erstellen:

<code class="language-javascript">function printLocation () {
  console.log("You are in " + city + ", " + country);
}</code>

Hier erstellen wir eine Funktion fullName(), die drei Parameter akzeptiert - zwei für den ersten und Nachnamen und eine für die Rückruffunktion. Nach der Anweisung console.log() platzieren wir dann einen Funktionsaufruf, der die tatsächliche Rückruffunktion auslöst - die unten fullName() definierte greeting() -Funktion. Schließlich nennen wir fullName() wob 🎜>. greeting() Wir übergeben Funktionsdefinitionen, keine Funktionsaufrufe. Dies verhindert, dass die Rückruffunktion sofort ausgeführt wird, was nicht mit der Philosophie hinter der Rückruffunktion übereinstimmt. Als Funktionsdefinitionen bestanden, können sie jederzeit und zu jedem Zeitpunkt in der enthaltenden Funktion ausgeführt werden. Da sich die Rückruffunktionen wie tatsächlich in der Funktion verhalten, sind sie tatsächlich Verschluss: Sie können auf Variablen und Parameter zugreifen, die die Funktion enthalten, und sogar auf Variablen im globalen Bereich zugreifen. fullName() Die Rückruffunktion kann eine vorhandene Funktion sein (wie im vorherigen Beispiel gezeigt) oder eine anonyme Funktion.

Rückruffunktionen werden in JavaScript -Bibliotheken häufig verwendet, um Vielseitigkeit und Wiederverwendbarkeit zu bieten. Sie ermöglichen eine einfache Anpassung und/oder Erweiterung der Bibliotheksmethoden. Darüber hinaus ist der Code einfacher zu warten und ist prägnanter und einfach zu lesen. Rückruffunktionen sind nützlich, wenn Sie unnötige doppelte Codemuster in abstraktere/generische Funktionen umwandeln müssen.

Angenommen, wir benötigen zwei Funktionen - eine, die die veröffentlichten Artikelinformationen und die andere, die die gesendeten Nachrichteninformationen druckt, druckt. Wir haben sie erstellt, aber wir haben festgestellt, dass ein Teil unserer Logik in beiden Funktionen wiederholt wird. Wir wissen, dass es unnötig und schwer zu pflegen ist, dasselbe Code an einem Ort zu haben. Also, was ist die Lösung? Lassen Sie es uns im nächsten Beispiel veranschaulichen:

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  printLocation();
}

setLocation("Paris"); // 输出：You are in Paris, France</code>

Was wir hier tun, ist, die doppelten Codemuster (console.log(item) und var date = new Date()) in eine separate allgemeine Funktion (publish()) zu bringen und nur spezifische Daten in anderen Funktionen beizubehalten - diese Funktion ist jetzt eine Rückruffunktion. Auf diese Weise können wir mit derselben Funktion relevante Informationen über verschiedene verwandte Dinge drucken - Nachrichten, Artikel, Bücher, Zeitschriften usw. Das einzige, was Sie tun müssen, ist für jeden Typ eine spezielle Rückruffunktion zu erstellen und sie als Argument an die publish() -Funktion zu übergeben.

Funktionsausdrücke sofort ausführen (iife)

Führen Sie den Funktionsausdruck sofort aus, oder IIFE (ausgesprochen "ify") ist ein Funktionsausdruck (benannt oder anonym), der unmittelbar nach seiner Erstellung ausgeführt wird.

Es gibt zwei leicht unterschiedliche Syntaxvarianten dieses Modus:

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  return printLocation;
}

var currentLocation = setLocation("Paris");

currentLocation(); // 输出：You are in Paris, France</code>

Um eine reguläre Funktion in IIFE zu konvertieren, müssen Sie zwei Schritte ausführen:

1. Sie müssen die gesamte Funktion in Klammern einschließen. Wie der Name schon sagt, muss IIfe ein Funktionsausdruck sein, nicht eine Funktionsdefinition. Daher ist der Zweck der Einstellung von Klammern die Umwandlung von Funktionsdefinitionen in Ausdrücke. Dies liegt daran, dass in JavaScript alles in Klammern als Ausdrücke behandelt wird.
2. Sie müssen am Ende ein Paar Klammern (Variante 1) oder nach dem Schließen der Klammern (Variante 2) hinzufügen, wodurch die Funktion sofort ausgeführt wird.

Drei weitere Dinge, an die Sie sich erinnern sollten:

, wenn Sie einer Variablen eine Funktion zuweisen, müssen Sie nicht die gesamte Funktion in Klammern einschließen, da dies bereits ein Ausdruck ist:

<code class="language-javascript">function printLocation () {
  console.log("You are in " + city + ", " + country);
}</code>

Zweitens endet das IIfe mit einem Semikolon, andernfalls funktioniert Ihr Code möglicherweise nicht ordnungsgemäß.

drittens können Sie Parameter an IIFE übergeben (es ist schließlich eine Funktion), wie im folgenden Beispiel gezeigt:

<code class="language-javascript">function cityLocation() {
  var city = "Paris";

  return {
    get: function() { console.log(city); },
    set: function(newCity) { city = newCity; }
  };
}

var myLocation = cityLocation();

myLocation.get(); // 输出：Paris
myLocation.set('Sydney');
myLocation.get(); // 输出：Sydney</code>

Ein globales Objekt als Parameter an iife übergeben ist ein gemeinsames Muster, um in einer Funktion auf sie zugreifen zu können, ohne ein window Objekt zu verwenden, das den Code unabhängig von der Browserumgebung macht. Der folgende Code erstellt eine Variable global, die auf das globale Objekt verweist, unabhängig davon, welche Plattform Sie verwenden:

<code class="language-javascript">function showMessage(message) {
  setTimeout(function() {
    alert(message);
  }, 3000);
}

showMessage('Function called 3 seconds ago');</code>

Dieser Code funktioniert im Browser (das globale Objekt ist window) oder in der node.js -Umgebung (wir verwenden spezielle Variable global, um auf das globale Objekt zu verweisen).

Einer der großen Vorteile von IIFE ist, dass Sie sich bei der Verwendung keine Sorgen machen müssen, den globalen Raum mit temporären Variablen zu kontaminieren. Alle Variablen, die Sie in iife definieren, sind lokal. Schauen wir es uns an:

<code class="language-html"><!-- HTML -->
<button id="btn">Click me</button>

<!-- JavaScript -->
function showMessage() {
  alert('Woohoo!');
}

var el = document.getElementById("btn");
el.addEventListener("click", showMessage);</code>

In diesem Beispiel funktioniert die erste console.log() -Anweisung gut, aber die zweite Anweisung schlägt fehl, da die Variablen today und currentTime zu lokalen Variablen aufgrund von IIFE werden.

Wir wissen bereits, dass Verschlüsse Verweise auf externe Variablen behalten, sodass sie die neuesten/aktualisierten Werte zurückgeben. Was ist Ihrer Meinung nach die Ausgabe des folgenden Beispiels?

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  printLocation();
}

setLocation("Paris"); // 输出：You are in Paris, France</code>

Sie können erwarten, dass der Name der Früchte in einem Intervall von Sekunden nacheinander gedruckt wird. Tatsächlich ist die Ausgabe jedoch viermal "undefiniert". Also, was ist das Problem?

Das Problem ist, dass in der Aussage

für jede Iteration der Schleife der Wert von console.log() gleich 4 ist. Und da wir nichts bei der Indexierung 4 im i -Array haben, ist die Ausgabe "undefiniert". (Denken Sie daran, dass der Index des Arrays in JavaScript bei 0 beginnt.) Wenn fruits gleich 4 ist, endet der Schleifen. i

Um dieses Problem zu lösen, müssen wir für jede von der Schleife erstellte Funktion einen neuen Bereich bereitstellen. Dies erfasst den aktuellen Status der

-Variablen. Wir tun dies, indem wir die i -Methode in iife ausschalten und eine private Variable definieren, um die aktuelle Kopie von setTimeout() zu halten. i

<code class="language-javascript">function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  return printLocation;
}

var currentLocation = setLocation("Paris");

currentLocation(); // 输出：You are in Paris, France</code>

Wir können auch die folgende Variante verwenden, die dieselbe Aufgabe ausführt:

<code class="language-javascript">function printLocation () {
  console.log("You are in " + city + ", " + country);
}</code>

iife wird normalerweise verwendet, um Bereiche zu erstellen, um Module zu verkapseln. Innerhalb des Moduls gibt es einen in sich geschlossenen privaten Bereich, der zufällige Änderungen verhindert. Diese Technik wird als Modulmuster bezeichnet und ist ein leistungsstarkes Beispiel für die Verwendung von Tischmanagement -Scopes, die in vielen modernen JavaScript -Bibliotheken wie JQuery und Unterstrich häufig verwendet werden.

Schlussfolgerung

Der Zweck dieses Tutorials ist es, diese grundlegenden Konzepte so klar und präzise wie möglich einzuführen - wie eine einfache Reihe von Prinzipien oder Regeln. Ein gutes Verständnis für sie ist der Schlüssel, um ein erfolgreicher und effizienter JavaScript -Entwickler zu werden.

Um das hier vorgestellte Thema ausführlicher und ausführlicher zu erklären, schlage ich vor, dass Sie "Sie kennen JS: Scopes and Closeures" von Kyle Simpson.

(Der nachfolgende Inhalt, nämlich der FAQ -Teil, wurde aufgrund der Länge des Artikels weggelassen. Bei Bedarf stellen Sie bitte bestimmte Fragen.)

Das obige ist der detaillierte Inhalt vonEntmystifizierende JavaScript -Schließungen, Rückrufe und IIFes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!