Heim > Web-Frontend > js-Tutorial > Hauptteil

Abschlüsse in JS entmystifizieren

WBOY
Freigeben: 2024-09-01 21:13:32
Original
1000 Leute haben es durchsucht

Demystifying Closures in JS

  • Muss beherrscht werden, um die komplizierten Details der Sprache zu verstehen.
  • Nicht so erstellt, wie wir ein Array oder eine Funktion erstellen.
  • Eine Fn, die eine andere Fn zurückgibt, die in der LHS-Variablen gespeichert ist.
const secureBooking = function(){
  let passengerCount = 0;
  return function(){
    passengerCount++;
    console.log(`${passengerCount} passengers`);
  }
}

const booker = secureBooking();

booker();
booker();
booker();
Nach dem Login kopieren
  • secureBooking fn wird im globalen Bereich ausgeführt.
  • Ein neuer Ausführungskontext wird im globalen Ausführungskontext erstellt.
  • Jeder Ausführungskontext (EC) hat seine eigene Variablenumgebung mit all seinen Variablen. „let PassengerCount = 0“ ist innerhalb dieser EC definiert. Es kann auf alle Variablen seines übergeordneten Bereichs zugreifen.
  • Eine neue FN wird zurückgegeben und im Bucher gespeichert.
  • Der globale EC enthält auch die Booker-Variable.
  • Jetzt wird secureBooking() aus EC entfernt und ist verschwunden. Die secureBooking EC-Umgebung ist nicht mehr aktiv. Es wird jedoch immer noch auf die Variable „passagierCount“ zugegriffen, die zum Zeitpunkt der Fn-Erstellung definiert wurde.
  • Dennoch kann der innere Fn auf die Variable „passagierCount“ zugreifen, die im äußeren Fn definiert ist. Dies geschieht aufgrund der Schließung.
  • Der Abschluss erinnert den Fn an die Variablen, die rund um den Geburtsort des Fns oder seines EC definiert sind.
  • Booker ist kein FN, der sich im globalen Geltungsbereich befindet.
  • Jetzt wird booker(); ausgeführt. Zum ersten Mal wird auf dem Aufrufstapel ein EC mit eigenen Variablen erstellt.
  • Ein Fn hat Zugriff auf die Variablenumgebung des Ausführungskontexts, in dem der Fn erstellt wurde, i. sichere Buchung. Daher hat der Bucher Zugriff auf Variablen, die in der Variablenumgebung von secureBooking fn definiert sind. Diese Verbindung des Geburtsorts von fn, d. h. der Definition, mit der umgebenden variablen Umgebung wird als Abschluss bezeichnet, selbst nachdem der EC von secureBooking fn, der den fn enthält, aus dem Aufrufstapel herausgesprungen ist.
  • Abschluss: Variable Umgebung, die an den Fn angehängt ist, genau so, wie sie zum Zeitpunkt und am Ort der Erstellung des Fn war.
  • Die Scope-Kette bleibt durch den Verschluss erhalten, auch wenn EC weg ist, bleibt die variable Umgebung irgendwie in der Engine bestehen. Daher sagen wir, dass Booker-FN über übergeordnetem Fn geschlossen ist, einschließlich übergeordneter Fn-Argumente, die wir hier nicht haben.
  • Durch die Schließung verliert ein Fn nicht die Verbindung zu den Variablen, die rund um seinen Geburtsort definiert sind.
  • Wenn sich die Variable nicht im aktuellen Gültigkeitsbereich befindet, prüft JS den Abschluss, noch bevor die Gültigkeitsbereichskette nachgeschlagen wird. Angenommen, es gibt eine globale Variable, selbst dann wird zuerst nach der in ihrem Abschluss definierten Variablen gesucht.
  • Der Abschluss hat Vorrang vor der Scope-Kette.
  • Nachdem die Funktion „booker()“ zum ersten Mal ausgeführt wurde, wird der Wert von „passagierCount“ erhöht, in der Konsole angemeldet und dann wird der Buchungsvorgang vom Aufrufstapel entfernt.
  • Die Ausführung geht zur nächsten Zeile, ein neuer EC wird erstellt, aber die Abschlussvariable ist immer noch vorhanden. Der bestehende Wert wird erhöht und der EC wird herausgesprungen.
  • Nochmals zum dritten Mal wiederholt sich dieser Vorgang.

ZUSAMMENFASSUNG

  • Defn: Ein Abschluss ist eine geschlossene variable Umgebung des EC, in der ein Fn erstellt wurde, auch nachdem dieser EC verschwunden ist.

  • Außerdem gewährt ein Abschluss einem Fn Zugriff auf alle Variablen seines übergeordneten Fns, selbst nachdem dieser übergeordnete Fn zurückgekehrt ist. Der fn behält einen Verweis auf seinen äußeren Bereich bei, wodurch die Bereichskette über die Zeit hinweg erhalten bleibt.

  • Eine Schließung stellt sicher, dass der Fn die Verbindung zu Variablen, die zum Zeitpunkt der Geburt von Fn existierten, nicht verliert. Es ist wie ein Rucksack, den ein Fn überall hin mitnimmt. Dieser Rucksack enthält alle Variablen, die in der Umgebung vorhanden waren, in der der FN erstellt wurde.

  • Wir müssen Abschlüsse nicht manuell erstellen. Außerdem können wir nicht einmal explizit auf geschlossene Variablen zugreifen. Ein Abschluss ist kein greifbares JS-Objekt, d. h. wir können nicht auf einen Abschluss zugreifen und daraus Variablen übernehmen. Es ist eine interne Eigenschaft eines Fn. Um einen Blick auf den Rucksack zu werfen, „console.dir(booker);“
    [[Scope]] zeigt Ihnen den VE dieses Fn-Aufrufs.

  • [[]] bedeutet, dass es sich um eine interne Eigenschaft handelt, auf die wir über unseren Code nicht zugreifen können.

  • Wir müssen nicht immer einen FN von einem anderen FN zurückgeben, um einen Abschluss zu erstellen. Im folgenden Beispiel wurde die Variable „f“ nicht einmal innerhalb von fn definiert, da sie sich im globalen Bereich befindet. Es kann auch dann auf die Variable „a“ zugreifen, wenn g() seinen EC beendet hat. „a“ befindet sich jetzt im Rucksack von „f“.

let f;

const g = function(){
  const a = 23;
  f = function() {
    console.log(a*2); // 46
  };
};


const h = function(){
  const b = 777;
  f = function(){
    console.log(b*2); // 1554
  };
};

g();
f();
console.dir(f);

// f fn is reassigned using h fn. Hence, old closure value i.e 'a' will be replaced with new value 'b' which can be verified using console.dir().
h();
f();
console.dir(f);
Nach dem Login kopieren
  • setTimeout(callbackFnToBeCalled, Delay);
  • Abschlussvariablen haben eine höhere Priorität als die Bereichskette.
// Boarding Passengers using Closures
const boardPassengers = function(n, wait){
  const perGroup = n / 3;

  setTimeout(function(){
    console.log(`We are now boarding all ${n} passengers`);
    console.log(`There are 3 groups, each with ${perGroup} passengers`)
  }, wait*1000);

  console.log(`Will start boarding in ${wait} seconds`);
}

boardPassengers(180, 3);
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAbschlüsse in JS entmystifizieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!