Detaillierte Erläuterung des Umfangs und Abschlusses von js

Geltungsbereich

Es gibt zwei Arten von Geltungsbereich in JS: globaler Geltungsbereich | lokaler Geltungsbereich

Chestnut 1

console.log(name);      //undefined
var name = '波妞';
var like = '宗介'
console.log(name);      //波妞
function fun(){
    console.log(name);  //波妞
    console.log(eat)    //ReferenceError: eat is not defined
    (function(){
        console.log(like)   //宗介
        var eat = '肉'
    })()
}
fun();

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

1. Der Name ist global definiert und kann global aufgerufen werden, sodass (2) Drucken möglich ist korrekt gedruckt werden;

2. Wenn das Namensattribut nicht definiert ist, wird es in seinem übergeordneten Bereich gefunden, sodass (3) auch korrekt gedruckt werden kann.

3. Die interne Umgebung kann über die Bereichskette auf alle externen Umgebungen zugreifen, die externe Umgebung kann jedoch nicht auf Variablen und Funktionen der internen Umgebung zugreifen. Ähnlich wie bei Einseitige Transparenz handelt es sich hierbei um eine Bereichskette, sodass (4) nicht funktioniert, (5) jedoch.

Dann stellt sich die Frage, warum der erste Ausdruck „undefiniert“ ist statt „ReferenceError: name is not define“. Das Prinzip besteht einfach darin, dass die Variablenförderung

Variablenförderung von JS: Wenn JS den Code analysiert, werden alle Deklarationen an den Anfang des Bereichs verschoben

---

Chestnut 2

console.log(name);      //undefined
var name = '波妞';
console.log(name);      //波妞
function fun(){
    console.log(name)   //undefined
    console.log(like)   //undefined
    var name = '大西瓜';
    var like = '宗介'
}
fun();

entspricht

var name;
console.log(name);      //undefined
name = '波妞';
console.log(name);      //波妞
function fun(){
    var name;
    var like;
    console.log(name)   //undefined
    console.log(like)   //undefined
    name = '大西瓜';
    like = '宗介'
    console.log(name)   //大西瓜
    console.log(like)   //宗介
}
fun();

Hinweis: wird auf den aktuellen Umfang erweitert Die Vorderseite

---

Chestnut 3

printName();     //printName is not a function
var printName = function(){
    console.log('波妞')
}
printName();       //波妞

entspricht

var printName;
printName();     //printName is not a function
printName = function(){
    console.log('波妞')
}
printName();       //波妞

. Auf diese Weise ist der Funktionsausdruck einfacher zu verstehen ist in Wenn es deklariert wird, ist es nur eine Variable

---

Kastanie 4

{
    var name = '波妞';
}
console.log(name)   //波妞

(function(){
    var name = '波妞';
})()
console.log(name)   //ReferenceError: name is not defined

{
    let name = '波妞';
}
console.log(name)   //ReferenceError: name is not defined

Wie aus der obigen Kastanie ersichtlich ist, können Variablen, die in JS mit var deklariert werden, dies nicht Der Umfang ist der Anfangs- und Endbereich der geschweiften Klammern. ES5 hat keinen Bereich auf Blockebene, sondern ist im Wesentlichen ein Funktionsbereich. Erst nachdem die let- und const-Definitionen in ES6 eingeführt wurden, gab es einen Block -Ebenenbereich.

---

Kastanie 5

function p1() { 
    console.log(1);
}
function p2() { 
    console.log(2);
}
(function () { 
    if (false) {
        function p1() {
            console.log(3);
        }
    }else{
        function p2(){
            console.log(4)
        }
    }
    p2();
    p1()
})();       
//4
//TypeError: print is not a function

Dies ist eine sehr klassische Kastanie, die Deklaration erfolgt im Voraus, aber da die Beurteilungsbedingung nein ist, ist dies beim Funktionskörper nicht der Fall hingerichtet. Daher wird „TypeError: print is not a function“ angezeigt. Das Gleiche gilt für while, switch und für

Schließung

Die Funktion und der Verweis auf ihren Zustand, also die lexikalische Umgebung, bilden zusammen eine Schließung. Das heißt, Abschlüsse ermöglichen den Zugriff auf den äußeren Funktionsumfang von der inneren Funktion aus. In JavaScript generieren Funktionen bei jeder Erstellung Abschlüsse.

Die obige Definition stammt von MDN. Einfach ausgedrückt bezieht sich ein Abschluss auf eine Funktion, die Zugriff auf Variablen im Gültigkeitsbereich einer anderen Funktion hat.

---

● Der Schlüssel zum Abschluss liegt darin, dass sein variables Objekt nach dem Aufruf der externen Funktion hätte zerstört werden sollen, aber die Existenz des Abschlusses ermöglicht uns weiterhin den Zugriff auf das variable Objekt der externen Funktion Funktion. ,

//举个例子
function makeFunc() {
    var name = "波妞";
    function displayName() {
        console.log(name);
    }
    return displayName;
}

var myFunc = makeFunc();
myFunc();

Funktionen in JavaScript-Formularabschlüssen. Ein Abschluss besteht aus einer Funktion und der lexikalischen Umgebung, die die Funktion erstellt. Diese Umgebung enthält alle lokalen Variablen, auf die zugegriffen werden kann, wenn dieser Abschluss erstellt wird

Im Beispiel ist myFunc ein Verweis auf die displayName-Funktionsinstanz, die bei der Ausführung von makeFunc erstellt wird, und die displayName-Instanz kann weiterhin darauf zugreifen Seine lexikalischen Variablen im Bereich können auf den Namen zugreifen. Wenn also myFunc aufgerufen wird, kann auf den Namen weiterhin zugegriffen werden, und sein Wert „Ponyo“ wird an console.log übergeben. Die häufigste Art, einen Abschluss zu erstellen, besteht darin, eine weitere Funktion innerhalb einer Funktion zu erstellen

---

● Normalerweise endet der Gültigkeitsbereich einer Funktion und aller ihrer Variablen bei Ende der Funktionsausführung wurde später zerstört. Allerdings bleibt nach dem Erstellen eines Abschlusses der Umfang der Funktion erhalten, bis der Abschluss nicht mehr existiert

//例二
function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

//释放对闭包的引用
add5 = null;
add10 = null;

Im Wesentlichen ist makeAdder eine Funktionsfabrik – er erstellt die A-Funktion, die die Summe von a addiert angegebenen Wert und seine Argumente. Im obigen Beispiel haben wir die Funktionsfabrik verwendet, um zwei neue Funktionen zu erstellen – eine, die ihre Argumente plus 5 summiert, und eine andere, die 10 summiert.

add5 und add10 sind beide Schließungen. Sie haben dieselbe Funktionsdefinition, speichern jedoch unterschiedliche lexikalische Umgebungen. Im Kontext von add5 ist x 5. Und in add10 ist x 10.

Die Geltungsbereichskette eines Verschlusses enthält seinen eigenen Geltungsbereich sowie den Geltungsbereich seiner enthaltenden Funktion und den globalen Geltungsbereich.

---

● Der Abschluss kann nur den letzten Wert einer Variablen in der enthaltenden Funktion abrufen

//栗子1
function arrFun1(){
    var arr = [];
    for(var i = 0 ; i < 10 ; i++){
        arr[i] = function(){
            return i
        }
    }
    return arr
}
console.log(arrFun1()[9]());     //10
console.log(arrFun1()[1]());     //10

//栗子2
function arrFun2(){
    var arr = [];
    for(var i = 0 ; i < 10 ; i++){
        arr[i] = function(num){
            return function(){
                return num
            };
        }(i)
    }
    return arr
}
console.log(arrFun2()[9]());     //9
console.log(arrFun2()[1]());     //1

In Beispiel 1 enthält das arr-Array jeweils 10 Die anonyme Funktion kann auf die externe Variable i zugreifen. Ihr Gültigkeitsbereich ist jedoch weiterhin im Speicher vorhanden und kann von anonymen Funktionen in der Schleife aufgerufen werden >In Chestnut 2 gibt es eine anonyme Funktion im arr-Array und es gibt anonyme Funktionen innerhalb der anonymen Funktion. Die Nummer, auf die die innerste anonyme Funktion zugreift, wird von der anonymen Funktion der oberen Ebene im Speicher gespeichert, sodass dies möglich ist jedes Mal auf den Wert von i zugegriffen.

Dieser Artikel stammt aus der Kolumne JS-Tutorial, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Umfangs und Abschlusses von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!