Hallo nochmal! Wir haben bereits geschrieben, dass Ende September in OTUS ein neuer Stream des Kurses
"Fullstack JavaScript Developer" startet. Im Vorgriff auf den Beginn des Unterrichts teilen wir Ihnen weiterhin urheberrechtlich geschützte Artikel mit, die speziell für Kursteilnehmer erstellt wurden. Heute werden wir uns Kontexttypen in JavaScript ansehen. Lass uns gehen.
Artikelautor : Pavel Yakupov
Der Zweck dieses Artikels besteht darin, dass der Leser die grundlegenden Konzepte von Bereichen versteht, die in JavaScript verwendet werden.
Umfang ist eines der wichtigsten Dinge in JavaScript (und es hat einen Platz in den meisten modernen Programmiersprachen). Der Umfang hängt mit der langen Lebensdauer einer Variablen oder Funktion, dem Zugriff, der Sichtbarkeit von Variablen und einigen anderen Dingen zusammen.
Warum brauchen wir diesen Umfang?
Der Bereich in Programmiersprachen führt die folgenden Funktionen aus:
Sicherheit (Kapselung) - Variablen und Funktionen sind nur verfügbar, wenn sie benötigt werden.
Beseitigt den Konflikt von Variablennamen. Das Vorhandensein von Bereichen ermöglicht es Ihnen, nicht alle Variablen in einem Heap zu "sichern" und Namespaces (Namespace) zu simulieren.
Wiederverwendung von Code - Der geschriebene Code kann dann verwendet werden, um "fremde" Effekte zu vermeiden.
Arten von Bereichen
Auf der einfachsten Ebene gibt es in JavaScript zwei Bereiche - lokal und global.
In diesem Artikel werden wir auch auf einen Bereich wie Lexikon und Block eingehen.
Globaler Geltungsbereich
Wenn Sie ein Dokument in JavaScript öffnen und mit dem Schreiben von Code beginnen, fallen Sie in den globalen Bereich.
Auf alles, was im globalen Bereich erstellt wird - Variablen, Funktionen - kann von überall im Programm zugegriffen werden. Außerdem sind globale Variablen während der gesamten Ausführung Ihrer Anwendung verfügbar und werden erst gelöscht, wenn das Programm seine Arbeit beendet hat.
Viele Neulinge verwenden zunächst zu oft globale Variablen - dies ist etwas einfacher zu programmieren, wird jedoch als schlechte Praxis angesehen und führt häufig zu instabilen Programmen, die letztendlich viel mehr Speicher belegen, als sie tatsächlich benötigen. Wenn die Variablen zuverlässig in die Funktionen eingekapselt würden, in denen sie verwendet werden, würden sie am Ende der Funktion mit dem Garbage Collector aus dem Speicher gelöscht und würden den nicht unendlichen Client-Speicher nicht mehr belegen.
Lokaler Bereich
Lokal deklarierte Variablen sind nur in dem Bereich verfügbar, in dem sie deklariert wurden.
Der einfachste Weg, einen neuen Bereich zu erstellen, besteht darin, eine neue Funktion zu erstellen. Auf eine innerhalb einer Funktion erstellte Variable kann nur von innen zugegriffen werden. Zusätzlich kann der lokale Bereich unter Verwendung des Blockbereichs erhalten werden (wird unten diskutiert).
function foo(){ let x = 15; } //console.log(x); error { let y = 14; } // console.log(y); error { var z = 13; } console.log(z); // var , // // - 13
Lexikalischer Bereich
Was ist der lexikalische Geltungsbereich? In einfachen Worten ist dies die Fähigkeit einer internen Funktion, auf einen externen Bereich zuzugreifen. Hier lohnt es sich, sich der Praxis der Verschlüsse zuzuwenden. Sie können wahrscheinlich noch ein paar Artikel darüber schreiben, aber ich werde Ihnen schnell ein klassisches Beispiel geben:
sum(5)(5) // ? function sum(a){ var add = function(b){ return a+b; } return add; } console.log(sum(5)(5)); // 10 //
Bereich blockieren
Bisher haben wir nur den Umfang diskutiert, der mit der Operation von Funktionen und geschweiften Klammern {} verbunden ist, und wir haben die Unterschiede in der Operation von var diskutiert und nur indirekt gelassen.
Wie funktioniert die var-Direktive? Wenn eine Variable mit ihr im globalen Bereich deklariert wird, wird der Variablenname dem globalen Fensterobjekt (wenn wir den Browser meinen) als Eigenschaft zugewiesen und bleibt dort die ganze Zeit, wenn das Programm ausgeführt wird. Gleichzeitig als Blockbereich wie {} (und wenn, für, während und alle anderen ganz logisch enthalten sind).
Darüber hinaus gibt es ein weiteres Merkmal von let und const - deklariert im selben Bereich, dann können sie nicht erneut im selben Bereich deklariert werden (nun, die Unzufriedenheit des Interpreters sieht hier ziemlich logisch aus).
let x = 15; console.log(x); // { let x = 16; // console.log(x) // let x = 17; // , }
neue Funktion
Merkmale des Gültigkeitsbereichs beim Deklarieren einer neuen Funktion als "neue Funktion". Diese Option zum Erstellen einer Funktion wird selten verwendet, kann jedoch manchmal erforderlich sein.
Syntaxbeispiel:
//let newFunc = new Function([arg1, arg2…argN], functionBody); let mult = new Function('a', 'b', 'return a * b'); console.log(mult(3,4));
Normalerweise merkt sich eine Funktion, wo sie geboren wurde (Lexikalische Umgebung), aber wenn eine Funktion mit dem neuen Funktionskonstrukt erstellt wird, schreibt sie nicht die sie umgebenden Umgebungsvariablen wie in einer normalen Situation, sondern nur die global deklarierten.
// , ()() let a = 3; function outerFunc() { var a = 2; var func = new Function('console.log(a*a)'); return func; } outerFunc()(); // 9, window
Heben (Variablen erhöhen)
Bei der Erörterung des Umfangs konnten wir das Thema der Erhöhung des Umfangs von Variablen nicht ansprechen. Der Interpreter, der den Code liest, liest ihn tatsächlich zweimal: Er liest die als Funktionsdeklaration deklarierten Funktionen und liest globale Variablen, die mit der Variablen var als global deklariert wurden. Die Variablen werden jedoch nicht anhand ihrer deklarierten Werte aufgezeichnet, sondern anhand des undefinierten Werts.
console.log(x); // undefined var x = 15; console.log(y);// error let y = 13;
Lassen Sie dieses Thema nur indirekt auf Sichtbarkeitsbereiche verweisen, aber manchmal kann dieses Wissen nützlich sein.
Danke an alle! Ich hoffe, dieser Artikel war für jemanden nützlich!
Nützliche Links:developer.mozilla.org/en-US/docs/Glossary/Scopedeveloper.mozilla.org/en/docs/Web/JavaScript/Closures2ality.com/2015/02/es6-scoping.htmllearn.javascript.ru/new-functionhabr.com/de/company/otus/blog/466873