Le concept de fermeture en js

Les fermetures ne sont pas propres à JavaScript, la plupart des langages de haut niveau ont cette capacité.

Qu'est-ce qu'une fermeture ?

Une fermeture est la combinaison d'une fonction regroupée (enfermée) avec des références à son état environnant (l'environnement lexical).

ce Segment est la définition de la fermeture sur MDN, qui s'entend comme : une fonction et ses références environnantes dans l'environnement lexical fermé constituent une fermeture. Peut-être que cette phrase est encore difficile à comprendre. Jetez un œil à l'exemple :

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

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

Cet exemple est une fermeture typique. Il y a plusieurs points à noter :

1. showMessage Oui. 🎜> Une createAction fonction en est renvoyée après exécution.
2. est un environnement lexical fermé à l'intérieur createAction, en tant que variable au sein de cet environnement encapsulé, n'est jamais directement accessible de l'extérieur. message
3. est exécuté à l'extérieur de showMessage, mais la variable locale createAction définie à l'intérieur est accessible pendant l'exécution (sortie réussie). En effet, la fonction référencée par message (la fonction anonyme à l'intérieur de showMessage), lorsqu'elle est définie, est liée aux références (createAction, etc.) dans l'environnement lexical (à l'intérieur de createAction) où elle se trouve . message
La fonction anonyme liée à l'environnement syntaxique interne est apportée par
4. pour être utilisée en dehors de l'environnement return fermé, qui forme une fermeture. S'il est appelé à l'intérieur de createAction, cela n'est pas considéré comme une fermeture. createAction

D'accord, je crois que 1, 2 et 4 sont tous faciles à comprendre, mais il peut être un peu difficile de comprendre le point le plus important 3 - la difficulté est que ce n'est pas quelque chose que les programmeurs peut décider. Cela est déterminé par les caractéristiques linguistiques. Alors

ne pensez pas que « vous » avez créé la fermeture, car les fermetures sont une fonctionnalité du langage, vous venez de profiter de cette fonctionnalité .

Si le langage ne prend pas en charge les fermetures, similaires au code ci-dessus, lorsque

est exécuté, la variable showMessage ne sera pas trouvée. Je veux surtout trouver un exemple, mais malheureusement, tous les langages de haut niveau que je connais semblent prendre en charge les fermetures tant que les fonctions peuvent être définies dans les fonctions/méthodes. message

"Apporter" des fonctions définies localement

Nous avons mentionné plus tôt que nous pouvons faire ressortir des fonctions définies localement via

Existe-t-il un autre moyen ? return

La fonction est devenue ici un "bien", pas différent des autres biens (variables). Tant qu'il existe un moyen de supprimer des variables, il existe un moyen de supprimer des fonctions. Par exemple, utilisez un objet « conteneur » :

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

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

Êtes-vous inspiré ? Pensez-vous à quelque chose ?

Modules et fermetures

Oui, exports et module.exports. Dans le module défini par CJS (CommonJS), vous pouvez utiliser

pour amener les marchandises une par une, ou vous pouvez utiliser exports.something pour emballer les marchandises, mais quoi qu'il en soit, module.exports = ... est celui qui apporte les marchandises, mais il se peut que le exports initialement prévu ait été remplacé par l'un des nôtres exports. exports

ESM (ECMAScript Module) utilise la syntaxe

et import, qui n'est qu'une autre façon de faire ressortir les marchandises. C'est presque la même chose que export. seulement Vous pouvez en apporter un (sauf si emballé), return vous pouvez en apporter un tas. returnexportIl faut ajouter que qu'il s'agisse de CJS ou d'ESM, le module est un environnement encapsulé, et les éléments qui y sont définis ne sont pas accessibles de l'extérieur tant qu'ils ne sont pas retirés. Ceci est différent de l'environnement global par défaut des scripts Web. Veuillez faire attention à la différence.

Si exprimé en code, c'est probablement ce que je pensais lors de la définition du module :

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

Dans l'environnement d'exécution, cela ressemble en réalité à ceci (note : uniquement à titre d'illustration) :

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

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

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

C'est toujours la même fonction ?

Si vous allez trop loin, ramenez-le. Réfléchissez à une question : théoriquement, une fonction est un bloc de code statique. La fonction de fermeture renvoyée en appelant plusieurs fois la fonction externe est-elle la même ?

Essayez :

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

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

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

Si vous êtes surpris, alors définissez

d'une autre manière pour voir si ce sera plus facile à comprendre :

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

closure()Si vous pouvez toujours' Je n'ai pas compris, réessayez. Regardez ceci :

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

Comprenez-vous ? À chaque fois,

définit une nouvelle fonction. La fonction est nouvelle et le nom n'a pas d'importance - vous pouvez l'appeler Xiao Ming, mais d'autres peuvent aussi l'appeler Xiao Ming.

functionDonc, pour résumer :

Une fermeture est composée d'une fonction et de diverses ressources (références) dans l'environnement fermé où elle est définie. Chaque fermeture obtenue est toutes unique. les ressources environnementales qui constituent la fermeture sont différentes (différents environnements locaux, différentes variables locales définies, différents paramètres transmis, etc.).

---

Clôture, j'ai compris cette fois-ci !

Tutoriel recommandé : "

---

Tutoriel JS

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!