Was ist ein js-Abschluss? JS-Verschlüsse verstehen (mit Code)

Der Abschluss in js bedeutet, dass Funktionsvariablen im Funktionsbereich gespeichert werden können, sodass es den Anschein hat, dass die Funktion die Variable „umschließt“. Gemäß der Definition ist die Funktion, die die Variable enthält, ein Abschluss.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Anfängliche Definition

闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来。
//根据定义，包含变量的函数就是闭包
function foo() {
    var a = 0;
}
cosole.log(a) 
// Uncaught ReferenceError: a is not defined

„JavaScript Advanced Programming“-Definition des Abschlusses

Ein Abschluss bezieht sich auf die richtigen Funktionen, auf die zugegriffen wird Variablen im Gültigkeitsbereich einer anderen Funktion

 //根据《JavaScript高级程序设计》，访问上层函数的作用域的内层函数就是闭包
function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    bar();
}
foo();

„The Definitive Guide to JavaScript“ definiert Abschlüsse

Funktionsobjekte können über Gültigkeitsbereichsketten miteinander in Beziehung gesetzt werden. Variablen innerhalb der Der Funktionskörper kann im Funktionsumfang gespeichert werden, der als Abschluss bezeichnet wird.

 var global = "global scope"; //全局变量
function checkscope() {
    var scope = "local scope"; //局部变量
    function f() {
        return scope; //在作用域中返回这个值
    };
    return f();
}
checkscope(); // 返回 "local scope"

Genau genommen müssen Abschlüsse drei Bedingungen erfüllen:

[1] Zugriff auf den Bereich

[2] Funktionsverschachtelung; ] Außerhalb des Geltungsbereichs aufgerufen werden

Schauen wir uns zunächst an ein Beispiel. Lassen Sie uns einen Zähler implementieren.

var counter = 0;
function add() {
   return counter += 1;
}
add();
add();
add();// 计数器现在为 3

Jetzt haben wir unser Ziel erreicht, aber hier kommt das Problem. Jede Funktion im Code kann den Wert des Zählers nach Belieben ändern, daher ist dieser Zähler nicht perfekt. Wäre es dann nicht besser, wenn wir den Zähler in die Add-Funktion einfügen würden?

function add() {
    var counter = 0;
    return counter += 1;
} 
add();
add();
add();// 本意是想输出 3, 但输出的都是 1

Wenn wir das also tun, wird der Wert des Zählers bei jedem Aufruf der Add-Funktion auf 0 initialisiert, was unseren Zweck immer noch nicht erfüllt.

Zu diesem Zeitpunkt müssen wir also Abschlüsse verwenden, um dieses Problem zu lösen.

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();// 计数器为 3

Zu diesem Zeitpunkt haben wir den Zähler perfekt umgesetzt. Dieser Abschnitt ist sehr prägnant und kann in den folgenden äquivalenten Code unterteilt werden.

function outerFunction () {
     var counter = 0;
     function innerFunction (){
         return counter += 1;
     }
     return innerFunction;
}
var add = outerFunction();
add();
add();
add();// 计数器为 3

Das Hinzufügen zu diesem Zeitpunkt bildet einen Abschluss. Ein Abschluss besteht aus zwei Teilen, einer Funktion und der Umgebung, in der die Funktion erstellt wird. Die Umgebung besteht aus lokalen Variablen in der Umgebung. Für den Abschluss add besteht es aus der Funktion innerFunction und dem Variablenzähler, sodass add zu diesem Zeitpunkt auf den Variablenzähler zugreifen kann.

Da Abschlüsse den Umfang der Funktion haben, die sie enthält, belegen sie mehr Speicher als andere Funktionen. Daher ist es möglich, die anonyme Funktion manuell zu dereferenzieren, um den Speicher freizugeben.

function f2(){
    var n=22;
    var nAdd=function(){n++};
    return function(){
        return {
            n:n,
            nAdd:nAdd
        }
    }
}
//result2就是创建了一个匿名函数
var result2=f2();
//调用函数
console.log(result2());
result2().nAdd();
console.log(result2());
//解除对匿名函数的引用，以便释放内存
result2=null;

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonWas ist ein js-Abschluss? JS-Verschlüsse verstehen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!