Ausführliche Erklärung der Schließungen in JavaScript

Was ist ein Abschluss?

In JavaScript ist der Abschluss ein Konzept, das schwer zu verstehen ist. Die Definition von Abschluss in ECMAScript lautet: Abschluss bezieht sich auf die lexikalische Darstellung einer Funktion, die nicht berechnete Variablen enthält. Mit anderen Worten, die Funktion kann außerhalb der Funktion definierte Variablen verwenden.

Sind Sie verwirrter, nachdem Sie diese Definition gelesen haben? Machen Sie sich keine Sorgen, lassen Sie es uns analysieren.

• Ein Abschluss ist eine Funktion

• Ein Abschluss kann außerhalb davon definierte Variablen verwenden

• A Der Abschluss existiert in dem Bereich, in dem die Variable definiert ist.

Es scheint etwas klarer zu sein, aber was bedeutet es, eine außerhalb davon definierte Variable zu verwenden? Schauen wir uns zunächst den Variablenbereich an.

Variablenbereich

Variablen können in globale Variablen und lokale Variablen unterteilt werden. Der Umfang globaler Variablen ist global und globale Variablen können überall in js verwendet werden. Verwenden Sie das Schlüsselwort var, um eine Variable in einer Funktion zu deklarieren. Ihr Gültigkeitsbereich liegt nur innerhalb der Funktion, in der die Variable deklariert ist, und auf die Variable kann nicht außerhalb der Funktion zugegriffen werden.

var func = function(){
    var a = 'linxin';
    console.log(a);         
    // linxin}func();console.log(a);             
    // Uncaught ReferenceError: a is not defined

Der Umfang ist relativ einfach. Wir werden nicht auf Details eingehen, die eng mit Schließungen zusammenhängen.

Variabler Lebenszyklus

Globale Variablen, der Lebenszyklus ist dauerhaft. Lokale Variablen: Wenn der Funktionsaufruf, der die Variable definiert, endet, wird die Variable vom Garbage-Collection-Mechanismus recycelt und zerstört. Bei einem erneuten Aufruf der Funktion wird eine neue Variable neu definiert.

var func = function(){
    var a = 'linxin';
    console.log(a);}func();

a ist eine lokale Variable, nachdem func aufgerufen wurde, wird a zerstört.

var func = function(){
    var a = 'linxin';
    var func1 = function(){
        a += ' a';
        console.log(a);
    }
    return func1;}var func2 = func();func2();                    
    // linxin afunc2();                    
    // linxin a afunc2();                   
    // linxin a a a

Es ist ersichtlich, dass nach dem ersten Aufruf von func2 die Variable a in func zu „linxin a“ wird, ohne zerstört zu werden. Da func1 zu diesem Zeitpunkt einen Abschluss bildet, wird der Lebenszyklus von a fortgesetzt.

Jetzt ist der Abschluss klarer.

• Ein Abschluss ist eine Funktion, wie die obige Funktion func1

• Ein Abschluss verwendet Variablen, die von anderen Funktionen definiert wurden, damit sie nicht zerstört werden . Beispielsweise ruft func1 oben die Variable a

• auf und der Abschluss existiert in dem Bereich, in dem die Variable definiert ist. Wenn die Variable a im Bereich von func existiert, muss auch func1 existieren in diesem Umfang.

Nun kann man sagen, dass der Abschluss derjenige ist, der diese drei Bedingungen erfüllt.

Machen wir uns anhand eines einfachen und klassischen Beispiels mit Verschlüssen vertrauter.

for (var i = 0; i < 4; i++) {
    setTimeout(function () {
        console.log(i)    
     }, 0)
}

Wir denken vielleicht einfach, dass die Konsole 0 1 2 3 ausgibt, aber tatsächlich gibt sie 4 4 ​​4 4 aus. Warum ist das so? Wir haben festgestellt, dass die Funktion setTimeout asynchron ist, wenn die for-Schleife zu diesem Zeitpunkt beendet ist. Daher sucht function() { console.log(i) } nach der Variablen i und kann nur 4 bekommen.

Wir erinnern uns, dass im vorherigen Beispiel der Abschluss den Wert der Variablen a gespeichert hat, sodass wir den Abschluss hier auch zum Speichern von 0 1 2 3 verwenden können.

for (var i = 0; i < 4; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i)        
        }, 0)   
     })(i)
 }

Wenn i=0, übergeben Sie 0 als Parameter an die anonyme Funktion. Zu diesem Zeitpunkt ist function(i){} der Wert von i anonyme Funktion. Es ist 0. Wenn setTimeout ausgeführt wird, geht es entlang der äußeren Ebene, um i zu finden, und kann dann 0 erhalten. Durch Wiederholen dieses Zyklus erhalten Sie die gewünschte Zahl 0 1 2 3.

Speicherverwaltung

Der Aufruf einer lokalen Variablen in einem Abschluss führt dazu, dass die lokale Variable nicht rechtzeitig zerstört werden kann, was einer globalen Variablen entspricht, die immer Speicher belegt. Wenn Sie den von diesen Variablen belegten Speicher zurückgewinnen müssen, können Sie die Variablen manuell auf Null setzen.

Bei der Verwendung von Abschlüssen ist es jedoch einfacher, Zirkelverweise zwischen JavaScript-Objekten und DOM-Objekten zu bilden, was zu Speicherverlusten führen kann. Dies liegt daran, dass im Garbage-Collection-Mechanismus des Browsers ein Zirkelverweis zwischen zwei Objekten nicht recycelt werden kann.

function func() {
    var test = document.getElementById('test');
    test.onclick = function () {
        console.log('hello world');
    }
    }

Im obigen Beispiel wird ein Abschluss mithilfe einer anonymen Funktion in der Funktion func erstellt. Die Variable test ist ein JavaScript-Objekt, das auf das DOM-Objekt mit der ID test verweist. Das onclick-Attribut des DOM-Objekts verweist auf den Abschluss, und der Abschluss kann test aufrufen und so einen Zirkelverweis bilden, was dazu führt, dass beide Objekte nicht funktionieren recycelt werden. Um dieses Problem zu lösen, setzen Sie einfach die Variable im Zirkelverweis auf null.

function func() {
    var test = document.getElementById('test');
    test.onclick = function () {
        console.log('hello world');
    }
    test = null;}

Wenn Sie zum Erstellen eines Abschlusses in der Funktion func keine anonyme Funktion verwenden, sondern stattdessen auf eine externe Funktion verweisen, tritt kein Zirkelverweisproblem auf.

function func() {
    var test = document.getElementById('test');
    test.onclick = funcTest;}function funcTest(){
    console.log('hello world');
 }

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Schließungen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!