Qu’est-ce qu’une fermeture en javascript ? Comment utiliser la fermeture javascript ?

La soi-disant « fermeture » fait référence à une expression (généralement une fonction) qui a de nombreuses variables et un environnement lié à ces variables, donc ces variables font également partie de l'expression.
La description la plus simple des fermetures est que ECMAScript permet l'utilisation de fonctions internes - c'est-à-dire que la définition de fonction et l'expression de fonction sont situées dans le corps de fonction d'une autre fonction. De plus, ces fonctions internes ont accès à toutes les variables locales, paramètres et autres fonctions internes déclarées dans la fonction externe dans laquelle elles existent. Une fermeture est formée lorsqu'une de ces fonctions internes est appelée en dehors de la fonction externe qui les contient. Autrement dit, la fonction interne sera exécutée après le retour de la fonction externe. Lorsque cette fonction interne est exécutée, elle doit toujours accéder aux variables locales, paramètres et autres fonctions internes de sa fonction externe. Les valeurs de ces variables locales, paramètres et déclarations de fonction (initialement) sont les valeurs au retour de la fonction externe, mais sont également affectées par la fonction interne.
En bref, la fonction de la fermeture est qu'une fois la fonction out exécutée et renvoyée, la fermeture empêche le mécanisme de récupération de place de Javascript GC de récupérer les ressources occupées par la fonction out, car la fonction interne de la fonction interne de la fonction out L'exécution dépend des variables de la fonction out.
Deux caractéristiques des fermetures :
1. En tant que référence à une variable de fonction - elle est activée au retour de la fonction.
2. Une fermeture est une zone de pile qui ne libère pas de ressources lors du retour d'une fonction.
Exemple 1 :

<script type="text/javascript"> 
function setupSomeGlobals() { 
// Local variable that ends up within closure 
var num = 666; 
// Store some references to functions as global variables 
gAlertNumber = function() { alert(num); } 
gIncreaseNumber = function() { num++; } 
gSetNumber = function(x) { num = x; } 
} 
</script> 
<button onclick="setupSomeGlobals()">生成 - setupSomeGlobals()</button> 
<button onclick="gAlertNumber()">输出值 - gAlertNumber()</button> 
<button onclick="gIncreaseNumber()">增加 - gIncreaseNumber()</button> 
<button onclick="gSetNumber(5)">赋值5 - gSetNumber(5)</button>

Exemple 2 :

<script type="text/javascript"> 
function newClosure(someNum, someRef) { 
// Local variables that end up within closure 
var num = someNum; 
var anArray = [1,2,3]; 
var ref = someRef; 
return function(x) { 
num += x; 
anArray.push(num); 
alert(&#39;num: &#39; + num + 
&#39; nanArray &#39; + anArray.toString() + 
&#39; nref.someVar &#39; + ref.someVar); 
} 
} 
var closure1 = newClosure(40, {someVar:&#39; never-online&#39;}) 
var closure2 = newClosure(99, {someVar:&#39; BlueDestiny&#39;}) 
closure1(4) 
closure2(3) 
</script>

Exemple 3 :

<script language="javascript"> 
/* 声明一个全局变量 - getImgInPositionedDivHtml - 并将一次调用一个外部函数表达式返回的内部函数赋给它。 
这个内部函数会返回一个用于表示绝对定位的 DIV 元素包围着一个 IMG 元素 的 HTML 字符串，这样一来， 
所有可变的属性值都由调用该函数时的参数提供： 
*/ 
var getImgInPositionedDivHtml = (function(){ 
/* 外部函数表达式的局部变量 - buffAr - 保存着缓冲数组。这个数组只会被创建一次，生成的数组实例对内部函数而言永远是可用的 
因此，可供每次调用这个内部函数时使用。 
其中的空字符串用作数据占位符，相应的数据 
将由内部函数插入到这个数组中： 
*/ 
var buffAr = [ 
&#39;<div id="&#39;, 
&#39;&#39;, //index 1, DIV ID 属性 
&#39;" style="position:absolute;top:&#39;, 
&#39;&#39;, //index 3, DIV 顶部位置 
&#39;px;left:&#39;, 
&#39;&#39;, //index 5, DIV 左端位置 
&#39;px;width:&#39;, 
&#39;&#39;, //index 7, DIV 宽度 
&#39;px;height:&#39;, 
&#39;&#39;, //index 9, DIV 高度 
&#39;px;overflow:hidden;\"><img src=\"&#39;, 
&#39;&#39;, //index 11, IMG URL 
&#39;\" width=\"&#39;, 
&#39;&#39;, //index 13, IMG 宽度 
&#39;\" height=\"&#39;, 
&#39;&#39;, //index 15, IMG 调蓄 
&#39;\" alt=\"&#39;, 
&#39;&#39;, //index 17, IMG alt 文本内容 
&#39;\"><\/div>&#39; 
]; 
/* 返回作为对函数表达式求值后结果的内部函数对象。 
这个内部函数就是每次调用执行的函数 
- getImgInPositionedDivHtml( ... ) - 
*/ 
return (function(url, id, width, height, top, left, altText){ 
/* 将不同的参数插入到缓冲数组相应的位置： 
*/ 
buffAr[1] = id; 
buffAr[3] = top; 
buffAr[5] = left; 
buffAr[13] = (buffAr[7] = width); 
buffAr[15] = (buffAr[9] = height); 
buffAr[11] = url; 
buffAr[17] = altText; 
/* 返回通过使用空字符串（相当于将数组元素连接起来） 
连接数组每个元素后形成的字符串： 
*/ 
return buffAr.join(&#39;&#39;); 
}); //:内部函数表达式结束。 
})();//自调用 
alert(getImgInPositionedDivHtml);//显示返回的函数 
alert(getImgInPositionedDivHtml("img.gif","img",100,50,0,0,"Test")); 
</script>

Explication : L'astuce clé est d'exécuter une seule ligne Une expression de fonction (en ligne) crée un environnement d'exécution supplémentaire et utilise la fonction interne renvoyée par l'expression de fonction comme fonction à utiliser dans du code externe. À ce stade, le tableau tampon est défini comme une variable locale de l'expression de fonction. L'expression de fonction ne doit être exécutée qu'une seule fois, et le tableau est créé une seule fois et peut être réutilisé par les fonctions qui en dépendent.

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!