Detaillierte Erläuterung der Verwendung von Javascript-Bereich und -Abschluss_Grundkenntnisse

Die Verschachtelung von Bereichen bildet eine Bereichskette und die Verschachtelung von Funktionen bildet einen Abschluss. Abschlüsse und Bereichsketten sind eines der wichtigen Merkmale, die JavaScript von anderen Sprachen unterscheiden.

Bereich
Es gibt zwei Arten von Bereichen in JavaScript: Funktionsbereich und globaler Bereich.

In einer Funktion deklarierte Variablen und die Parameter der Funktion haben denselben Gültigkeitsbereich, d. h. den Funktionsbereich. Ein einfaches Beispiel für den Funktionsumfang:

Code kopieren Der Code lautet wie folgt:

function foo() {
var bar = 1 ;
{
var bar = 2;
}
return bar; // 2
}

Im Gegensatz zu anderen blockbasierten Sprachen wie C wird hier immer 2 zurückgegeben.

Globaler Bereich für Browser kann als Fensterobjekt verstanden werden (Node.js ist global):

Code kopieren Der Code lautet wie folgt:

var bar = 1;
function foo() {}
alert(window.bar); // 1
alert(window.foo ) ; // "function foo() {}"

Sowohl die Variable bar als auch die Funktion foo gehören zum globalen Bereich und sind beide Attribute von window.

Bereichskette
Wenn Sie in JavaScript auf eine Variable zugreifen, beginnt diese mit lokalen Variablen und Parametern und durchläuft den Bereich Schritt für Schritt, bis sie den globalen Bereich erreicht.

Code kopieren Der Code lautet wie folgt:

var Scope = 0, Zero = "global -scope" ;
(function(){
var Scope = 1, one = "scope-1";
(function(){
var Scope = 2, two = "scope-2 ";
(function(){
varscope = 3, three = "scope-3";
scope-1 global-scope
console.log([drei, zwei, eins, null ].join(" "));
             console.log(scope); // 3
           })(); 🎜> console.log(scope);
console.log(typeof one); // undefiniert
console.log(scope); // 1
})();
console.log(typeof one); // undefiniert 🎜>console.log(scope); // 0



In der innersten Funktion kann jede Variable Schritt für Schritt durchlaufen und ausgegeben werden. In der vorletzten Funktionsschicht kann die Variable drei nicht durch Traversierung gefunden werden, daher wird undefiniert ausgegeben.

Um ein einfaches Beispiel zu nennen: Wenn Sie Geld ausgeben, um etwas zu kaufen, greifen Sie zuerst zu Ihrem Portemonnaie. Wenn Sie es nicht haben, können Sie Ihren Vater darum bitten Das kannst du doch mal deinen Opa fragen... Und wenn dein Vater kein Geld hat, um etwas zu kaufen, wird er nicht zu dir kommen und darum bitten.

Abschluss

In einer Funktion wird das Definieren einer anderen Funktion als Funktionsverschachtelung bezeichnet. Die Verschachtelung von Funktionen bildet einen Abschluss.

Abschlüsse und Bereichsketten ergänzen sich gegenseitig. Durch die Verschachtelung von Funktionen werden nicht nur mehrere Bereiche in einer Kettenbeziehung erstellt, sondern auch ein Abschluss gebildet.

Code kopieren

Der Code lautet wie folgt:Funktion bind(func, target) { return function() {

func.apply(target, arguments);

};
}



Wie verstehen Sie also Schließung?

Externe Funktionen können nicht auf eingebettete Funktionen zugreifenExterne Funktionen können nicht auf Parameter und Variablen eingebetteter Funktionen zugreifen

Eingebettete Funktionen können jedoch auf Parameter und Variablen externer Funktionen zugreifen

Mit anderen Worten: Eingebettete Funktionen enthalten den Umfang der externe Funktion

Schauen wir uns das zuvor erwähnte Beispiel einer Bereichskette an, dieses Mal aus der Perspektive des Abschlusses:

Code kopieren

Der Code lautet wie folgt:

var Scope = 0, Zero = "global-scope";
(function(){
var Scope = 1, one = "scope-1";
(function() {
var Scope = 2, Two = "scope-2";
(function(){
var Scope = 3, Three = "scope-3";
// Scope-3 Scope -2 Scope-1 Global-Scope
console.log([drei, zwei, eins, null].join(" "));
console.log(scope) // 3
}) ();
console.log(typeof three); // undefiniert
console.log(scope); // 2
})();
console.log(typeof two); / / undefiniert
console.log(scope); // 1
})();
console.log(typeof one); // undefiniert
console.log(scope);

Die innerste Funktion kann auf alle intern und extern definierten Variablen zugreifen. Die vorletzte Funktion kann nicht auf die innerste Variable zugreifen. Gleichzeitig hat die Zuweisungsoperation von Scope = 3 in der innersten Ebene keinen Einfluss auf die gleichnamige externe Variable.

Lassen Sie uns den Abschluss aus einem anderen Blickwinkel verstehen:

Jedes Mal, wenn eine externe Funktion aufgerufen wird, wird die eingebettete Funktion einmal erstellt.
Beim Erstellen wird der Umfang der externen Funktion (einschließlich aller lokalen Variablen, Parameter usw. im Kontext) zu jeder eingebetteten Funktion Objekt. Teil des internen Zustands, auch nachdem die externe Funktion die Ausführung abgeschlossen und beendet hat
Siehe das folgende Beispiel:

Code kopieren Der Code lautet wie folgt:

var i, list = [];
for (i = 0; i < 2; i = 1) {
list.push(function(){
console.log(i);
});
}
list .forEach(function(func){
func();
});

Wir erhalten zweimal „2“ anstelle der erwarteten „1“ und „2“. Dies liegt daran, dass die Variable, auf die die beiden Funktionen in der Liste zugreifen, dieselbe Variable im oberen Bereich ist.

Ändern wir den Code, um Schließungen zu verwenden, um dieses Problem zu lösen:

Code kopieren Der Code lautet wie folgt:

var i, list = [];
for (i = 0; i < 2; i = 1) {
list.push((function(j){
) return function(){
console.log(j);
} ;
})(i));
}
list.forEach(function(func){
func();
});

Die äußere „Funktion zur sofortigen Ausführung“ erhält eine Parametervariable i, die in der Form des Parameters j innerhalb ihrer Funktion vorhanden ist. Sie verweist auf dieselbe Referenz wie der Name j in der zurückgegebenen inneren Funktion. Nachdem die äußere Funktion ausgeführt und beendet wurde, wird der Parameter j (sein Wert ist zu diesem Zeitpunkt der aktuelle Wert von i) Teil des Status seiner inneren Funktion und wird gespeichert.