Quand j'ai découvert le front-end pour la première fois, j'étais toujours confus lorsque j'ai vu le mot fermeture. Lors de l'entretien, lorsqu'on m'a posé cette question, ma réponse était vague et j'ai toujours ressenti. qu'il y avait une couche de confusion. Diaphragme, je pense que ce concept est très magique si vous parvenez à le maîtriser, vos compétences seront grandement améliorées. En fait, la fermeture n’est pas si mystérieuse, elle est partout.
Tout d’abord, regardons une question.
Veuillez décrire ce qu'est une fermeture en une phrase et écrire le code pour illustrer.
Si vous pouvez le dire sans hésitation et donner une explication, alors vous n'avez pas besoin de lire plus loin.
Concernant ce problème, combiné aux informations et à l'expérience que j'ai examinées, j'en parlerai brièvement ici. S'il y a quelque chose qui ne va pas, veuillez me corriger.
Répondez d’abord à la question ci-dessus, qu’est-ce qu’une fermeture.
La fermeture est un concept qui décrit le phénomène selon lequel une fonction réside toujours en mémoire après son exécution.
Description du code :
function foo() {
var a = 2;
function bar(){
console.log(a);
}
return bar;
}
var test = foo();
test(); //2Le code ci-dessus montre clairement la fermeture.
La portée lexicale de la fonction bar() a accès à la portée interne de foo(). Ensuite, nous passons la fonction bar() elle-même comme type valeur. Dans l'exemple ci-dessus, nous utilisons l'objet fonction lui-même référencé par bar() comme valeur de retour.
Après l'exécution de foo(), sa portée interne n'a pas été détruite car bar() conserve toujours une référence à la portée interne. Grâce à la position de bar(), elle couvre la fermeture foo(). de la portée interne, permettant à la portée de survivre pour que bar() puisse y faire référence à tout moment. Cette référence est en fait une clôture.
C'est pour cette raison que lorsque test est effectivement appelé, il peut accéder à la portée lexicale lorsqu'il est défini, il peut donc accéder à a.
Le transfert de fonction peut aussi être indirect :
var fn;
function foo(){
var a = 2;
function baz() {
console.log( a );
}
fn = baz; //将baz 分配给全局变量
}
function bar(){
fn();
}
foo();
bar(); //2Ainsi, quelle que soit la manière dont la fonction interne est transmise en dehors de sa portée lexicale, elle contiendra une référence à la portée de la définition d'origine. Autrement dit, partout où cette fonction est exécutée, la fermeture sera utilisée. C’est également pour cette raison que nous pouvons utiliser la fonction de rappel de manière très pratique sans nous soucier de ses détails spécifiques.
En fait, dans les minuteries, les écouteurs d'événements, les requêtes ajax, la communication entre fenêtres, les Web Workers ou toute autre tâche synchrone ou asynchrone, tant que vous utilisez des fonctions de rappel, vous utilisez en fait des fermetures. Sac.
À ce stade, vous avez peut-être déjà une compréhension générale des fermetures. Laissez-moi vous donner quelques exemples supplémentaires pour vous aider à approfondir votre compréhension des fermetures.
Tout d'abord, jetons un coup d'œil à la fonction dite d'exécution immédiate
var a = 2;
(function IIFE() {
console.log(a);
})();
//2Cette fonction d'exécution immédiate est généralement considérée. un exemple classique de package de fermeture, cela fonctionne bien, mais ce n'est pas strictement une fermeture.
Pourquoi ?
Parce que cette fonction IIFE n'est pas exécutée en dehors de son propre champ lexical. Il est exécuté dans le périmètre dans lequel il a été défini. De plus, la variable a est recherchée à travers la portée lexicale ordinaire, et non à travers des fermetures.
Un autre exemple utilisé pour illustrer les fermetures est une boucle.
<p class="tabs"> <li class="tab">some text1</li> <li class="tab">some text2</li> <li class="tab">some text3</li> </p>
var handler = function(nodes) {
for(var i = 0, l = nodes.length; i < l ; i++) {
nodes[i].onclick = function(){
console.log(i);
}
}
}
var tabs = document.querySelectorAll('.tabs .tab');
handler(tabs);Notre résultat attendu est log 0, 1, 2
Le résultat après exécution est trois 3
Pourquoi ce tissu en laine ?
Expliquez d'abord d'où vient ce 3.
Regardez le corps de la boucle. La condition de fin de la boucle est i < pour la première fois.
Par conséquent, la sortie affiche la valeur finale de i à la fin de la boucle. Selon le principe de fonctionnement de scope, bien que les fonctions de la boucle soient définies séparément à chaque itération, elles sont toutes enfermées dans une portée globale partagée, il n'y a donc en fait qu'un seul i.
handler L'intention initiale de la fonction consistait à transmettre le i unique au gestionnaire d'événements, mais elle a échoué.
Parce que la fonction de gestionnaire d'événements lie i elle-même, pas la valeur de i lorsque la fonction est construite
Après avoir connu cela, nous pouvons effectuer les ajustements correspondants :
var handler = function(nodes) {
var helper = function(i){
return function(e){
console.log(i); // 0 1 2
}
}
for(var i = 0, l = nodes.length; i < l ; i++) {
nodes[i].onclick = helper(i);
}
}Créer un. fonction auxiliaire en dehors de la boucle et laissez cette fonction auxiliaire renvoyer une fonction liée à la valeur actuelle de i, afin qu'il n'y ait pas de confusion.
Après avoir compris cela, vous constaterez que le traitement ci-dessus consiste à créer une nouvelle portée. En d'autres termes, nous avons besoin d'une portée de bloc pour chaque itération
a dit Pour la portée du bloc, nous avons. pour mentionner un mot, c'est let.
Donc, si vous ne voulez pas trop utiliser les fermetures, vous pouvez utiliser let:
var handler = function(nodes) {
for(let i = 0, l = nodes.length; i < l ; i++) {
//nodes[i].index = i;
nodes[i].onclick = function(){
console.log(i); // 0 1 2
}
}
}Regardons d'abord un exemple
var sel = $("#con");
setTimeout( function (){
sel.css({background:"gray"});
}, 2000);Le code ci-dessus utilise le sélecteur de jQuery pour trouver l'élément avec l'identifiant con, enregistrer une minuterie et après deux secondes, changer la couleur d'arrière-plan en gris.
La magie de cet extrait de code est qu'après avoir appelé la fonction setTimeout, con est toujours conservé à l'intérieur de la fonction. Après deux secondes, la couleur d'arrière-plan de l'élément p avec l'identifiant con est effectivement modifiée. Il convient de noter que setTimeout est revenu après l'appel, mais con n'a pas été libéré, car con fait référence à la variable con dans la portée globale.
Les exemples ci-dessus nous aident à comprendre plus de détails sur les fermetures. Approfondissons le monde des fermetures.
首先看一个概念－执行上下文（Execution Context）。
执行上下文是一个抽象的概念，ECMAScript 规范使用它来追踪代码的执行。它可能是你的代码第一次执行或执行的流程进入函数主体时所在的全局上下文。
在任意一个时间点，只能有唯一一个执行上下文在运行之中。
这就是为什么 JavaScript 是“单线程”的原因，意思就是一次只能处理一个请求。
一般来说，浏览器会用栈来保存这个执行上下文。
栈是一种“后进先出” (Last In First Out) 的数据结构，即最后插入该栈的元素会最先从栈中被弹出（这是因为我们只能从栈的顶部插入或删除元素）。
当前的执行上下文，或者说正在运行中的执行上下文永远在栈顶。
当运行中的上下文被完全执行以后，它会由栈顶弹出，使得下一个栈顶的项接替它成为正在运行的执行上下文。
除此之外，一个执行上下文正在运行并不代表另一个执行上下文需要等待它完成运行之后才可以开始运行。
有时会出现这样的情况，一个正在运行中的上下文暂停或中止，另外一个上下文开始执行。暂停的上下文可能在稍后某一时间点从它中止的位置继续执行。
一个新的执行上下文被创建并推入栈顶，成为当前的执行上下文，这就是执行上下文替代的机制。
当我们有很多执行上下文一个接一个地运行时——通常情况下会在中间暂停然后再恢复运行——为了能很好地管理这些上下文的顺序和执行情况，我们需要用一些方法来对其状态进行追踪。而实际上也是如此，根据ECMAScript的规范，每个执行上下文都有用于跟踪代码执行进程的各种状态的组件。包括：
代码执行状态：任何需要开始运行，暂停和恢复执行上下文相关代码执行的状态
函数：上下文中正在执行的函数对象（正在执行的上下文是脚本或模块的情况下可能是null）
Realm：一系列内部对象，一个ECMAScript全局环境，所有在全局环境的作用域内加载的ECMAScript代码，和其他相关的状态及资源。
词法环境：用于解决此执行上下文内代码所做的标识符引用。
变量环境：一种词法环境，该词法环境的环境记录保留了变量声明时在执行上下文中创建的绑定关系。
现在的开发都离不开模块化，下面说说模块是如何利用闭包的。
先看一个实际中的例子。
这是一个统计模块，看一下代码：
define("components/webTrends", ["webTrendCore"], function(require,exports, module) {
var webTrendCore = require("webTrendCore");
var webTrends = {
init:function (obj) {
var self = this;
self.dcsGetId();
self.dcsCollect();
},
dcsGetId:function(){
if (typeof(_tag) != "undefined") {
_tag.dcsid="dcs5w0txb10000wocrvqy1nqm_6n1p";
_tag.dcsGetId();
}
},
dcsCollect:function(){
if (typeof(_tag) != "undefined") {
_tag.DCSext.platform="weimendian";
if(document.readyState!="complete"){
document.onreadystatechange = function(){
if(document.readyState=="complete") _tag.dcsCollect()
}
}
else _tag.dcsCollect()
}
}
};
module.exports = webTrends;
})在主页面使用的时候，调用一下就可以了：
var webTrends = require("webTrends");
webTrends.init();在定义的模块中，我们暴露了webTrends对象，在外面调用返回对象中的方法就形成了闭包。
模块的两个必要条件：
必须有外部的封闭函数，该函数必须至少被调用一次
封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态。
如果一个任务不需要使用闭包，那最好不要在函数内创建函数。
原因很明显，这会 拖慢脚本的处理速度，加大内存消耗 。
举个例子，当需要创建一个对象时，方法通常应该和对象的原型关联，而不是定义到对象的构造函数中。 原因是 每次构造函数被调用， 方法都会被重新赋值 （即 对于每个对象创建），这显然是一种不好的做法。
看一个能说明问题，但是不推荐的做法：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}上面的代码并没有很好的利用闭包，我们来改进一下：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype = {
getName: function() {
return this.name;
},
getMessage: function() {
return this.message;
}
};好一些了，但是不推荐重新定义原型，再来改进下：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype.getName = function() {
return this.name;
};
MyObject.prototype.getMessage = function() {
return this.message;
};很显然，在现有的原型上添加方法是一种更好的做法。
上面的代码还可以写的更简练：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
(function() {
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}).call(MyObject.prototype);在前面的三个示例中，继承的原型可以由所有对象共享，并且在每个对象创建时不需要定义方法定义。如果想看更多细节，可以参考对象模型。
使用闭包可以在JavaScript中模拟块级作用域；
Les fermetures peuvent être utilisées pour créer des variables privées dans un objet.
Avantages :
Continuité logique, lorsque la fermeture est utilisée comme paramètre d'une autre fonction call Cela vous empêche de vous écarter de la logique actuelle et d'écrire une logique supplémentaire séparément.
Appelle facilement les variables locales du contexte.
Améliorez l'encapsulation et l'extension du point 2 peut réaliser la protection des variables.
Inconvénients :
Gaspillage de mémoire. Ce gaspillage de mémoire n'est pas seulement dû au fait qu'il réside en mémoire, mais une mauvaise utilisation des fermetures entraînera la génération d'une mémoire invalide.
J'ai donné quelques explications simples sur les fermetures. Enfin, je vais le résumer. En fait, il n'y a rien de spécial dans les fermetures. Ses caractéristiques sont : <.>
Veuillez décrire ce qu'est une fermeture en une phrase et écrire le code pour illustrer.Si vous pouvez le dire sans hésitation et donner une explication, alors vous n'avez pas besoin de lire plus loin.
Concernant ce problème, combiné aux informations et à l'expérience que j'ai examinées, j'en parlerai brièvement ici. S'il y a quelque chose qui ne va pas, veuillez me corriger.
La fermeture est un concept qui décrit le phénomène selon lequel une fonction réside toujours en mémoire après son exécution.Description du code :
function foo() {
var a = 2;
function bar(){
console.log(a);
}
return bar;
}
var test = foo();
test(); //2C'est pour cette raison que lorsque test est effectivement appelé, il peut accéder à la portée lexicale lorsqu'il est défini, il peut donc accéder à a.
var fn;
function foo(){
var a = 2;
function baz() {
console.log( a );
}
fn = baz; //将baz 分配给全局变量
}
function bar(){
fn();
}
foo();
bar(); //2En fait, dans les minuteries, les écouteurs d'événements, les requêtes ajax, la communication entre fenêtres, les Web Workers ou toute autre tâche synchrone ou asynchrone, tant que vous utilisez des fonctions de rappel, vous utilisez en fait des fermetures. Sac.À ce stade, vous avez peut-être déjà une compréhension générale des fermetures. Laissez-moi vous donner quelques exemples supplémentaires pour vous aider à approfondir votre compréhension des fermetures. Quelques exemples plus précisTout d'abord, jetons un coup d'œil à la fonction dite d'exécution immédiate
var a = 2;
(function IIFE() {
console.log(a);
})();
//2Pourquoi ?
<p class="tabs"> <li class="tab">some text1</li> <li class="tab">some text2</li> <li class="tab">some text3</li> </p>
var handler = function(nodes) {
for(var i = 0, l = nodes.length; i < l ; i++) {
nodes[i].onclick = function(){
console.log(i);
}
}
}
var tabs = document.querySelectorAll('.tabs .tab');
handler(tabs);Par conséquent, la sortie affiche la valeur finale de i à la fin de la boucle. Selon le principe de fonctionnement de scope, bien que les fonctions de la boucle soient définies séparément à chaque itération, elles sont toutes enfermées dans une portée globale partagée, il n'y a donc en fait qu'un seul i.
Parce que la fonction de gestionnaire d'événements lie i elle-même, pas la valeur de i lorsque la fonction est construite
var handler = function(nodes) {
var helper = function(i){
return function(e){
console.log(i); // 0 1 2
}
}
for(var i = 0, l = nodes.length; i < l ; i++) {
nodes[i].onclick = helper(i);
}
}在循环外创建一个辅助函数，让这个辅助函数在返回一个绑定了当前i的值的函数，这样就不会混淆了。
明白了这点，就会发现，上面的处理就是为了创建一个新的作用域，换句话说，每次迭代我们都需要一个块作用域.
说到块作用域，就不得不提一个词,那就是let.
所以，如果你不想过多的使用闭包，就可以使用let：
var handler = function(nodes) {
for(let i = 0, l = nodes.length; i < l ; i++) {
//nodes[i].index = i;
nodes[i].onclick = function(){
console.log(i); // 0 1 2
}
}
}先来看个例子
var sel = $("#con");
setTimeout( function (){
sel.css({background:"gray"});
}, 2000);上边的代码使用了 jQuery 的选择器，找到 id 为 con 的元素，注册计时器，两秒之后，将背景色设置为灰色。
这个代码片段的神奇之处在于，在调用了 setTimeout 函数之后，con 依旧被保持在函数内部，当两秒钟之后，id 为 con 的 p 元素的背景色确实得到了改变。应该注意的是，setTimeout 在调用之后已经返回了，但是 con 没有被释放，这是因为 con 引用了全局作用域里的变量 con。
以上的例子帮助我们了解了更多关于闭包的细节，下面我们就深入闭包世界探寻一番。
首先看一个概念－执行上下文（Execution Context）。
执行上下文是一个抽象的概念，ECMAScript 规范使用它来追踪代码的执行。它可能是你的代码第一次执行或执行的流程进入函数主体时所在的全局上下文。
在任意一个时间点，只能有唯一一个执行上下文在运行之中。
这就是为什么 JavaScript 是“单线程”的原因，意思就是一次只能处理一个请求。
一般来说，浏览器会用栈来保存这个执行上下文。
栈是一种“后进先出” (Last In First Out) 的数据结构，即最后插入该栈的元素会最先从栈中被弹出（这是因为我们只能从栈的顶部插入或删除元素）。
当前的执行上下文，或者说正在运行中的执行上下文永远在栈顶。
当运行中的上下文被完全执行以后，它会由栈顶弹出，使得下一个栈顶的项接替它成为正在运行的执行上下文。
除此之外，一个执行上下文正在运行并不代表另一个执行上下文需要等待它完成运行之后才可以开始运行。
有时会出现这样的情况，一个正在运行中的上下文暂停或中止，另外一个上下文开始执行。暂停的上下文可能在稍后某一时间点从它中止的位置继续执行。
一个新的执行上下文被创建并推入栈顶，成为当前的执行上下文，这就是执行上下文替代的机制。
当我们有很多执行上下文一个接一个地运行时——通常情况下会在中间暂停然后再恢复运行——为了能很好地管理这些上下文的顺序和执行情况，我们需要用一些方法来对其状态进行追踪。而实际上也是如此，根据ECMAScript的规范，每个执行上下文都有用于跟踪代码执行进程的各种状态的组件。包括：
代码执行状态：任何需要开始运行，暂停和恢复执行上下文相关代码执行的状态
函数：上下文中正在执行的函数对象（正在执行的上下文是脚本或模块的情况下可能是null）
Realm：一系列内部对象，一个ECMAScript全局环境，所有在全局环境的作用域内加载的ECMAScript代码，和其他相关的状态及资源。
词法环境：用于解决此执行上下文内代码所做的标识符引用。
变量环境：一种词法环境，该词法环境的环境记录保留了变量声明时在执行上下文中创建的绑定关系。
现在的开发都离不开模块化，下面说说模块是如何利用闭包的。
先看一个实际中的例子。
这是一个统计模块，看一下代码：
define("components/webTrends", ["webTrendCore"], function(require,exports, module) {
var webTrendCore = require("webTrendCore");
var webTrends = {
init:function (obj) {
var self = this;
self.dcsGetId();
self.dcsCollect();
},
dcsGetId:function(){
if (typeof(_tag) != "undefined") {
_tag.dcsid="dcs5w0txb10000wocrvqy1nqm_6n1p";
_tag.dcsGetId();
}
},
dcsCollect:function(){
if (typeof(_tag) != "undefined") {
_tag.DCSext.platform="weimendian";
if(document.readyState!="complete"){
document.onreadystatechange = function(){
if(document.readyState=="complete") _tag.dcsCollect()
}
}
else _tag.dcsCollect()
}
}
};
module.exports = webTrends;
})在主页面使用的时候，调用一下就可以了：
var webTrends = require("webTrends");
webTrends.init();在定义的模块中，我们暴露了webTrends对象，在外面调用返回对象中的方法就形成了闭包。
模块的两个必要条件：
必须有外部的封闭函数，该函数必须至少被调用一次
封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态。
如果一个任务不需要使用闭包，那最好不要在函数内创建函数。
原因很明显，这会 拖慢脚本的处理速度，加大内存消耗 。
举个例子，当需要创建一个对象时，方法通常应该和对象的原型关联，而不是定义到对象的构造函数中。 原因是 每次构造函数被调用， 方法都会被重新赋值 （即 对于每个对象创建），这显然是一种不好的做法。
看一个能说明问题，但是不推荐的做法：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}上面的代码并没有很好的利用闭包，我们来改进一下：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype = {
getName: function() {
return this.name;
},
getMessage: function() {
return this.message;
}
};好一些了，但是不推荐重新定义原型，再来改进下：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype.getName = function() {
return this.name;
};
MyObject.prototype.getMessage = function() {
return this.message;
};很显然，在现有的原型上添加方法是一种更好的做法。
上面的代码还可以写的更简练：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
(function() {
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}).call(MyObject.prototype);在前面的三个示例中，继承的原型可以由所有对象共享，并且在每个对象创建时不需要定义方法定义。如果想看更多细节，可以参考对象模型。
使用闭包可以在JavaScript中模拟块级作用域；
闭包可以用于在对象中创建私有变量。
优点：
逻辑连续，当闭包作为另一个函数调用的参数时，避免你脱离当前逻辑而单独编写额外逻辑。
方便调用上下文的局部变量。
加强封装性，第2点的延伸，可以达到对变量的保护作用。
缺点：
内存浪费。这个内存浪费不仅仅因为它常驻内存，对闭包的使用不当会造成无效内存的产生。
前面对闭包做了一些简单的解释，最后再总结下，其实闭包没什么特别的，其特点是：
函数嵌套函数
函数内部可以访问到外部的变量或者对象
避免了垃圾回收
更多闭包有话说 - 大前端相关文章请关注PHP中文网！
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
