Detaillierte Erläuterung des JS-Bereichs und der Bereichskette_Grundkenntnisse

(1) Geltungsbereich

Der Bereich einer Variablen ist der Bereich der Variablen, der im Programmquellcode definiert ist.

1. Der lexikalische Bereich wird in JS verwendet

Variablen, die in keiner Funktion deklariert sind (var wird in einer Funktion weggelassen, gelten ebenfalls als global) werden als globale Variablen (globaler Gültigkeitsbereich)

bezeichnet

Innerhalb einer Funktion deklarierte Variablen haben einen Funktionsumfang und sind lokale Variablen

Lokale Variablen haben eine höhere Priorität als globale Variablen

Code kopieren Der Code lautet wie folgt:

var name="one";
Funktionstest(){
var name="two";
console.log(name); //two
}
test();

Das Weglassen von var in der Funktion wirkt sich auf die globale Variable aus, da diese tatsächlich in eine globale Variable umgeschrieben wurde

Code kopieren Der Code lautet wie folgt:

var name="one";
Funktionstest(){
name="zwei";
}
test();
console.log(name); //two

Funktionsbereich, das heißt, Funktion ist die Grundeinheit eines Bereichs js hat keinen Bereich auf Blockebene wie c/c, wie z. B. if for usw.

Code kopieren Der Code lautet wie folgt:

Funktionstest(){
for(var i=0;i<10;i ){
If(i==5){
      var name = "one";
}
}
console.log(name); //one
}
test(); //Da es sich um einen Bereich auf Funktionsebene handelt, können Sie auf name="one"
zugreifen

Natürlich werden in js auch Funktionen höherer Ordnung verwendet, die tatsächlich als verschachtelte Funktionen verstanden werden können

Code kopieren Der Code lautet wie folgt:

Funktion test1(){
var name = "one";
Rückgabefunktion (){
console.log(name);
}
}
test1()();

Nach test1() wird die äußere Funktion aufgerufen und eine innere Funktion zurückgegeben. Anschließend wird continue() aufgerufen und die innere Funktion entsprechend aufgerufen und ausgeführt, sodass „one“

ausgegeben wird.

Verschachtelte Funktionen beinhalten Abschlüsse, über die wir später sprechen werden. Hier kann die innere Funktion auf den in der äußeren Funktion deklarierten Variablennamen zugreifen, was den Bereichskettenmechanismus beinhaltet

2. Erklärung im JS vorab

Der Funktionsumfang in js bedeutet, dass alle innerhalb der Funktion deklarierten Variablen immer im Funktionskörper sichtbar sind. Darüber hinaus kann die Variable verwendet werden, bevor sie deklariert wird. Diese Situation wird als Heben bezeichnet

Tipp: Die Vorabdeklaration wird durchgeführt, wenn die js-Engine vorkompiliert wird. Das Phänomen der Vorabdeklaration tritt auf, bevor der Code ausgeführt wird

Zum Beispiel

Code kopieren Der Code lautet wie folgt:

var name="one";
Funktionstest(){
console.log(name); //undefiniert
var name="two";
console.log(name); //two
}
test();

Das oben Genannte erzielt den folgenden Effekt

Code kopieren Der Code lautet wie folgt:

var name="one";
Funktionstest(){
Var-Name;
console.log(name); //undefiniert
name="zwei";
console.log(name); //two
}
test();

Var noch einmal entfernen? Dies ist der Name innerhalb der Funktion, der zu einer globalen Variablen geworden ist und daher nicht mehr undefiniert ist

Code kopieren Der Code lautet wie folgt:

var name="one";
Funktionstest(){
console.log(name); //one
name="zwei";
console.log(name); //two
}
test();

3. Es ist zu beachten, dass keiner der oben genannten Parameter übergeben wird. Was ist, wenn der Test Parameter hat?

Code kopieren Der Code lautet wie folgt:

Funktionstest(Name){
console.log(name); //one
name="zwei";
console.log(name); //two
}
var name = "one";
test(name);
console.log(name); // one

Wie bereits erwähnt, werden Basistypen als Wert übergeben, sodass der an den Test übergebene Name eigentlich nur eine Kopie ist. Diese Kopie wird gelöscht, nachdem die Funktion zurückgegeben wurde.
Denken Sie nicht, dass name="two" in der Funktion den globalen Namen ändert, da es sich um zwei unabhängige Namen handelt

(2) Scope-Kette

Die oben genannten erweiterten Funktionen beinhalten die Bereichskette

Code kopieren Der Code lautet wie folgt:

Funktion test1(){
var name = "one";
Rückgabefunktion (){
console.log(name);
}
}
test1()();

1. Führen Sie einen großen Absatz ein, um Folgendes zu erklären:
Jedem Teil des JavaScript-Codes (globaler Code oder Funktion) ist eine Bereichskette zugeordnet.

Diese Bereichskette ist eine Liste oder verknüpfte Liste von Objekten. Diese Gruppe von Objekten definiert die Variablen „im Gültigkeitsbereich“ in diesem Code.

Wenn js den Wert der Variablen x ermitteln muss (dieser Vorgang wird als Variablenauflösung bezeichnet), beginnt er beim ersten Objekt in der Kette. Wenn dieses Objekt ein Attribut mit dem Namen x hat, lautet der Wert dieses Attributs Wenn das erste Objekt kein Attribut mit dem Namen x enthält, sucht js weiterhin nach dem nächsten Objekt in der Kette. Wenn das zweite Objekt immer noch kein Attribut mit dem Namen x hat, sucht es weiter nach dem nächsten und so weiter. Wenn kein Objekt in der Gültigkeitsbereichskette das Attribut x enthält, wird davon ausgegangen, dass x nicht in der Gültigkeitsbereichskette dieses Codes vorhanden ist, und schließlich wird eine ReferenceError-Ausnahme ausgelöst.

2. Beispiel für eine Scope-Kette:

Im Code der obersten Ebene von js (d. h. dem Code, der keine Funktionsdefinition enthält) besteht die Bereichskette aus einem globalen Objekt.

In einem Funktionskörper, der keine Verschachtelung enthält, gibt es zwei Objekte in der Bereichskette. Das erste ist das Objekt, das Funktionsparameter und lokale Variablen definiert, und das zweite ist das globale Objekt.

In einem verschachtelten Funktionskörper befinden sich mindestens drei Objekte im Gültigkeitsbereich.

3. Regeln für die Erstellung der Scope-Kette:

Wenn eine Funktion definiert wird (beachten Sie, dass sie startet, wenn sie definiert wird), speichert sie tatsächlich eine Bereichskette.

Wenn diese Funktion aufgerufen wird, erstellt sie ein neues Objekt zum Speichern ihrer Parameter oder lokalen Variablen, fügt das Objekt dieser Bereichskette hinzu und erstellt eine neue, längere Darstellung des Funktionsaufrufbereichs, der „Kette“.

Bei verschachtelten Funktionen ändert sich die Situation erneut: Bei jedem Aufruf der externen Funktion wird die interne Funktion erneut neu definiert. Denn jedes Mal, wenn eine externe Funktion aufgerufen wird, ist die Bereichskette anders. Innere Funktionen müssen bei jeder Definition geringfügig unterschiedlich sein – der Code der inneren Funktion ist bei jedem Aufruf der äußeren Funktion derselbe, und die mit diesem Code verbundene Bereichskette ist ebenfalls unterschiedlich.

(Tipp: Verstehen Sie die oben genannten drei Punkte gut und merken Sie sich diese. Am besten sagen Sie es mit Ihren eigenen Worten, sonst müssen Sie es sich merken, denn der Interviewer wird Sie direkt fragen: Bitte beschreiben Sie die Scope-Kette.) . )

Ein praktisches Beispiel für Bereichsverkettung:

Code kopieren Der Code lautet wie folgt:

var name="one";
Funktionstest(){
var name="two";
Funktion test1(){
var name="drei";
console.log(name); //drei
}
Funktion test2(){
console.log(name); // two
}
test1();
test2();
}
test();

Das Obige ist eine verschachtelte Funktion, dementsprechend sollten sich drei Objekte in der Bereichskette befinden
Wenn Sie dann anrufen, müssen Sie den Wert des Namens ermitteln. Suchen Sie einfach nach

in der Bereichskette

Wenn test1() erfolgreich aufgerufen wird, ist die Reihenfolge test1()->test()-> Da der Wert drei von name in test1() gefunden wird, ist die Suche abgeschlossen und gibt Wenn test1() erfolgreich aufgerufen wird, lautet die Reihenfolge test2()->test()->globales Objektfenster. Da der Wert von name in test2() nicht gefunden wird, suchen wir ihn in test(. ) und finden Sie es. Wenn der Wert von name zwei ist, wird die Suche abgeschlossen und

zurückgegeben

Ein weiteres Beispiel ist, dass wir manchmal Fehler machen und bei Vorstellungsgesprächen oft betrogen werden.

Code kopieren Der Code lautet wie folgt:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">




Bouton1
Bouton2
Bouton3

为什么？
根据作用域链中变量的寻找规则：

复制代码 代码如下 :

b.addEventListener("click",function(){
            alert("Bouton" i);
        },faux);

这里有一个函数，它是匿名函数，既然是函数，那就在作用域链上具有一个对象，这个函数里边使用到了变量i，它自然会在作用域上寻找它。
查找顺序是 这个匿名函数 -->外部的函数buttonInit() -->全局对象window

匿名函数中找不到i,自然跑到了buttonInit(), ok,在for中找到了，

对作用域内是一直可见的，就是说会保持到最后的状态

当匿名函数要使用i的时候，注册事件完了，i已经变成了4，所以都是Button4

那怎么解决呢？

给它传值进去吧，每次循环时，再使用一个匿名函数，把for 里边的i传进去，匿名函数的规则如代码

复制代码 代码如下 :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">




Bouton1
Bouton2
Bouton3

这样就可以 Button1..2..3了

4.上述就是作用域链的基本描述，另外，with语句可用于临时拓展作用域链（不推荐使用with）

语法形如：

avec(objet)

déclaration

简单用法：

比如给表单中各个项的值value赋值

一般可以我们直接这样

复制代码 代码如下 :

var f = document.forms[0];
f.name.value = "";
f.age.value = "";
f.email.value = "";

Après avoir introduit with (car utiliser with entraînera une série de problèmes, utilisons donc le formulaire ci-dessus)

Copier le code Le code est le suivant :

avec(document.forms[0]){
f.name.value = "";
f.age.value = "";
f.email.value = "";
>

De plus, si un objet o possède un attribut x, o.x = 1;
Alors utilisez

Copier le code Le code est le suivant :

avec(o){
x = 2;
>

peut être converti en o.x = 2;
Si o ne définit pas l'attribut x, sa fonction est simplement équivalente à x = 2 une variable globale ;

Parce que with fournit un raccourci pour lire les attributs de o, mais il ne peut pas créer d'attributs que o lui-même n'a pas.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tous ceux qui apprennent le javascript.