Qu'est-ce qu'une fermeture js ? Comprendre les fermetures js (avec code)

La fermeture en js signifie que les variables de fonction peuvent être stockées dans la portée de la fonction, il semble donc que la fonction "enveloppe" la variable. Selon la définition, la fonction contenant la variable est une fermeture.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Définition initiale

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

Définition "JavaScript Advanced Programming" de la fermeture

La fermeture signifie une fonction qui a accès à une variable dans la portée d'une autre fonction

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

"Le guide définitif de JavaScript" définit les fermetures

Les objets de fonction peuvent passer par la chaîne de portée Liés à chacun d'autres, les variables à l'intérieur du corps de la fonction peuvent être enregistrées dans la portée de la fonction, qui est une fermeture.

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

À proprement parler, les fermetures doivent remplir trois conditions :

[1] Portée d'accès

[2] Imbrication de fonctions

【 3】Être appelé en dehors du champ d'application
Certaines personnes pensent que seule la condition 1 est remplie, donc IIFE est une fermeture ; certaines personnes pensent que les conditions 1 et 2 sont remplies, donc les fonctions imbriquées sont C'est une fermeture ; les trois conditions sont remplies, donc les fonctions appelées en dehors du champ d'application sont des fermetures

Pourquoi avons-nous besoin de fermetures Que sont les fermetures js

Tout d'abord, regardons un ? exemple. Implémentons un compteur.

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

Maintenant, nous avons atteint notre objectif, mais voici le problème. Toute fonction du code peut modifier la valeur du compteur à volonté, donc ce compteur n'est pas parfait. Alors ne serait-il pas préférable de mettre le compteur dans la fonction add ?

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

Donc, si nous faisons cela, la valeur du compteur sera initialisée à 0 à chaque fois que nous appellerons la fonction add, ce qui ne parvient toujours pas à atteindre notre objectif.

Comment utiliser les fermetures

Donc, à ce stade, nous devons utiliser des fermetures pour résoudre ce problème. Regardons d'abord le code.

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

À cette époque, nous avons parfaitement mis en place le compteur. Cette section est très concise et peut être divisée en code équivalent suivant.

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

L'ajout à ce moment forme une fermeture. Une fermeture se compose de deux parties, une fonction et l'environnement dans lequel la fonction est créée. L'environnement est composé de variables locales dans l'environnement. Pour la fermeture add, il se compose de la fonction innerFunction et du compteur variable, donc add peut accéder au compteur variable à ce moment.

Choses à noter lors de l'utilisation de fermetures

Étant donné que les fermetures portent la portée de la fonction qui les contient, elles occuperont plus de mémoire que les autres fonctions. Il est donc possible de déréférencer manuellement la fonction anonyme afin de libérer de la mémoire.

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;

Recommandations associées :

L'utilisation des fermetures JS

Une compréhension simple des fermetures JS

javascript compréhension approfondie des fermetures 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!