Das Konzept des Abschlusses in js

Verschlüsse gibt es nicht nur bei JavaScript, die meisten Hochsprachen verfügen über diese Fähigkeit.

Was ist eine Schließung?

Ein Abschluss ist die Kombination einer gebündelten (eingeschlossenen) Funktion mit Verweisen auf ihren umgebenden Zustand (die lexikalische Umgebung).

dies Segment ist die Definition eines Abschlusses auf MDN, der wie folgt verstanden wird: Eine Funktion und ihre umgebenden Referenzen in der geschlossenen lexikalischen Umgebung bilden einen Abschluss. Vielleicht ist dieser Satz immer noch schwer zu verstehen:

function createAction() {
    var message = "封闭环境内的变量";
    
    return function() {
        console.log(message);
    }
}

const showMessage = createAction();
showMessage();    // output: 封闭环境内的变量

Dieses Beispiel ist ein typischer Abschluss. Es gibt mehrere Punkte zu beachten:

1. showMessage Ja 🎜>Eine createActionFunktion , die nach der Ausführung davon zurückgegeben wurde.
2. ist eine geschlossene lexikalische Umgebung im Inneren createAction, da eine Variable in dieser gekapselten Umgebung niemals direkt von außen zugänglich ist. message
3. wird außerhalb von showMessage ausgeführt, aber auf die darin definierte lokale Variable createAction wird während der Ausführung zugegriffen (erfolgreiche Ausgabe). Dies liegt daran, dass die Funktion, auf die durch message verwiesen wird (die anonyme Funktion in showMessage), bei ihrer Definition an die Referenzen (createAction usw.) in der lexikalischen Umgebung (in createAction) gebunden ist, in der sie sich befindet . message
Die an die interne Syntaxumgebung gebundene anonyme Funktion wird durch
4. zur Verwendung außerhalb der geschlossenen return-Umgebung gebracht, die einen Abschluss bildet. Wenn es innerhalb von createAction aufgerufen wird, gilt es nicht als Abschluss. createAction

Okay, ich glaube, 1, 2 und 4 sind alle leicht zu verstehen, aber es kann etwas schwierig sein, den wichtigsten Punkt 3 zu verstehen – die Schwierigkeit besteht darin, dass dies nichts ist, was Programmierer tun entscheiden kann.

Denken Sie also nicht, dass „Sie“ den Abschluss erstellt haben, denn Abschlüsse sind eine Sprachfunktion, Sie haben diese Funktion einfach ausgenutzt .

Wenn die Sprache keine Abschlüsse unterstützt, ähnlich wie im obigen Code, wird die Variable

bei der Ausführung von showMessage nicht gefunden. Ich möchte vor allem ein Beispiel finden, aber leider scheinen alle mir bekannten Hochsprachen Abschlüsse zu unterstützen, solange Funktionen innerhalb von Funktionen/Methoden definiert werden können. message

Lokal definierte Funktionen herausbringen

Wir haben bereits erwähnt, dass wir lokal definierte Funktionen durch

herausbringen können. return

Die Funktion ist hier zu einem „Gut“ geworden, nicht anders als andere Güter (Variablen). Solange es eine Möglichkeit gibt, Variablen herauszunehmen, gibt es eine Möglichkeit, Funktionen herauszunehmen. Verwenden Sie zum Beispiel ein „Container“-Objekt:

function encase(aCase) {
    const dog = "狗狗";
    const cat = "猫猫";
    aCase.show = function () {
        console.log(dog, cat);
    };
}

const myCase = {};
encase(myCase);
myCase.show();      // output: 猫猫 狗狗

Fällt Ihnen etwas ein?

Module und Verschlüsse

Ja, Exporte und module.exports. In dem von CJS (CommonJS) definierten Modul können Sie

verwenden, um Waren einzeln zu bringen, oder Sie können exports.something verwenden, um Waren zu verpacken, aber egal was passiert, module.exports = ... ist derjenige, der Waren bringt, aber Möglicherweise wurde das ursprünglich arrangierte exports durch eines unserer eigenen exports ersetzt. exports

ESM (ECMAScript-Modul) verwendet die Syntax

und import, was nur eine weitere Möglichkeit ist, Waren hervorzubringen. Der einzige Unterschied besteht darin, dass export Sie können nur eins mitbringen (es sei denn, es ist verpackt), return Sie können ein Bündel mitbringen. returnexportEs sollte auch hinzugefügt werden, dass das Modul unabhängig davon, ob es sich um CJS oder ESM handelt, eine gekapselte Umgebung ist und die darin definierten Dinge für außen nicht zugänglich sind, solange sie nicht herausgenommen werden. Dies unterscheidet sich von der standardmäßigen globalen Umgebung von Webskripten. Bitte beachten Sie den Unterschied.

Wenn es im Code ausgedrückt wird, ist das wahrscheinlich das, was ich gedacht habe, als ich das Modul definiert habe:

const var1 = "我是一个顶层变量吧";
function maybeATopFunction() { }

In der laufenden Umgebung sieht es tatsächlich so aus (Hinweis: nur zur Veranschaulichung):

// module factory
function createModule_18abk2(exports, module) {
    const var1 = "我是一个顶层变量吧";
    function maybeATopFunction() { }
}

// ... 遥远的生产线上，有这样的示意代码
const module = { exports: {} };
const m18abk2 = createModule_18abk2(module) ?? module;

// 想明白 createModule_18abk2 为什么会有一个随机后缀没？

Ist es immer noch die gleiche Funktion?

Wenn du zu weit gehst, bring es zurück. Denken Sie über eine Frage nach: Theoretisch ist eine Funktion ein statischer Codeblock. Wird die Abschlussfunktion zurückgegeben, indem die äußere Funktion mehrmals aufgerufen wird?

Versuchen Sie es mit:

function create() {
    function closure() { }
    return closure;
}

const a = create();
const b = create();

console.log(a === b);   // false

Wenn Sie überrascht sind, definieren Sie

auf andere Weise, um zu sehen, ob es leichter zu verstehen ist:

function create() {
    closure = function() { }
    return closure;
}

closure()Wenn Sie es noch können' Ich verstehe es nicht, versuche es noch einmal. Schau dir das an:

function create() {
    const a = function () { };
    const b = function () { };
    console.log(a === b);   // false
}

Verstehst du? Jedes Mal, wenn

eine neue Funktion definiert. Die Funktion ist neu und der Name ist nicht wichtig – Sie können sie Xiao Ming nennen, aber andere können sie auch Xiao Ming nennen.

functionAlso, um es zusammenzufassen:

Ein Abschluss besteht aus einer Funktion und verschiedenen Ressourcen (Referenzen) in der geschlossenen Umgebung, in der er definiert ist. Jeder Abschluss ist einzigartig, weil Die Umgebungsressourcen, die den Abschluss bilden, sind unterschiedlich (unterschiedliche lokale Umgebungen, unterschiedliche definierte lokale Variablen, unterschiedliche übergebene Parameter usw.).

---

Abschluss, dieses Mal habe ich es herausgefunden!

Empfohlenes Tutorial: „

---

JS-Tutorial

“

Das obige ist der detaillierte Inhalt vonDas Konzept des Abschlusses in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!