La fermeture est un concept important en JavaScript. Pour les débutants, la fermeture est un concept très abstrait, notamment la définition donnée par la spécification ECMA, il vous est difficile de la comprendre. Cet article ne décrira donc pas longuement le concept de fermeture, mais passera directement aux informations pratiques pour que vous puissiez apprendre la fermeture en quelques minutes !
1. Clôture - la première expérience de l'amour
Quand j'entre en contact avec une nouvelle technologie, la première chose que je fais est de chercher son code démo. Pour les codeurs, le code peut parfois mieux comprendre quelque chose que le langage naturel. En fait, les fermetures sont partout. Par exemple, les principaux codes de jQuery et de zepto sont tous inclus dans une grande fermeture. J'écrirai donc ci-dessous la démo de fermeture la plus simple et la plus primitive pour vous aider à générer des fermetures dans votre cerveau :
function A(){
function B(){
console.log("Hello Closure!");
}
return B;
}
var c = A();
c();//Hello Closure!
C'est la fermeture la plus simple de l'histoire. Cela ne peut pas être plus simple. Aussi simple soit-elle, ce n'est plus une fermeture !
Le code ci-dessus est traduit en langage naturel comme suit :
La fonction interne B de la fonction A est référencée par une variable c extérieure à la fonction A
Retraitez ces bêtises et cela devient la définition de la clôture :
Lorsqu'une fonction interne est référencée par une variable extérieure à sa fonction externe, une fermeture est formée.
N'essayez pas de vous souvenir de cette définition. Le but de vous donner cette définition est de vous faire comprendre que les 5 étapes ci-dessus visent à élaborer la définition de la fermeture.
Par conséquent, lorsque vous effectuez les 5 étapes ci-dessus, vous avez déjà défini une fermeture !
C'est la clôture.
2. Le rôle de la fermeture
Avant de comprendre le rôle de la fermeture, comprenons d'abord le mécanisme GC en JavaScript : En JavaScript, si un objet n'est plus référencé, alors l'objet sera recyclé par GC, sinon l'objet sera toujours stocké en mémoire au milieu. .Dans l'exemple ci-dessus, B est défini dans A, donc B dépend de A, et la variable externe c fait référence à B, donc A est indirectement référencé par c En d'autres termes, A ne sera pas recyclé par GC et le sera. toujours être Enregistré en mémoire. Pour prouver notre raisonnement, l'exemple ci-dessus est légèrement amélioré :
function A(){
var count = 0;
function B(){
count ++;
console.log(count);
}
return B;
}
var c = A();
c();// 1
c();// 2
c();// 3
C'est le rôle de la fermeture. Parfois, nous avons besoin de définir une telle variable dans un module : nous voulons que cette variable soit conservée en mémoire mais ne "pollue" pas la variable globale. Dans ce cas, nous pouvons utiliser la fermeture pour définir. ce module.
3. Écriture haut de gamme
La méthode d'écriture ci-dessus est en fait la méthode d'écriture la plus simple et la plus primitive, mais dans les applications réelles, personne ne le fait de cette façon, en particulier dans certains grands frameworks JS. La raison pour laquelle je vous parle de cette façon d’écrire est que moins il y a de distractions, plus il est facile de se concentrer sur une chose. Ci-dessous, j'utilise des méthodes d'écriture couramment utilisées pour écrire un composant de démonstration simple :
(function(document){
var viewport;
var obj = {
init:function(id){
viewport = document.querySelector("#"+id);
},
addChild:function(child){
viewport.appendChild(child);
},
removeChild:function(child){
viewport.removeChild(child);
}
}
window.jView = obj;
})(document);
La fonction de ce composant est d'initialiser un conteneur, puis d'ajouter des sous-conteneurs au conteneur, ou de supprimer un conteneur. La fonction est très simple, mais un autre concept entre ici en jeu : exécuter la fonction immédiatement. Comprenez-le simplement brièvement. L'essentiel est de comprendre comment cette méthode d'écriture implémente la fonction de fermeture.
Le processus d'exécution de ce code peut donc être décomposé comme suit :
var f = function(document){
var viewport;
var obj = {
init:function(id){
viewport = document.querySelector("#"+id);
},
addChild:function(child){
viewport.appendChild(child);
},
removeChild:function(child){
viewport.removeChild(child);
}
}
window.jView = obj;
};
f(document);
이 코드에는 클로저의 그림자가 보이는 것 같지만 f에는 반환 값이 없습니다. 클로저 조건을 충족하지 않는 것 같습니다.
window.jView = obj;
obj는 f에 정의된 객체이고 이 객체에는 일련의 메소드가 정의되어 있습니다. window.jView = obj를 실행한다는 것은 윈도우 전역 객체에 jView 변수를 정의하고 이 변수를 obj 객체, 즉 전역 객체를 가리키는 것을 의미합니다. 변수 jView는 obj를 참조합니다. obj 객체의 함수는 f의 변수 viewport를 참조하므로 f의 뷰포트는 GC에 의해 재활용되지 않고 메모리에 저장되므로 이 쓰기 방법은 클로저 조건을 충족합니다.
4. 간단 요약
이것은 클로저에 대한 가장 간단한 이해입니다. 물론 클로저는 더 깊은 이해를 갖고 있으며, 이는 훨씬 더 복잡합니다. JS 실행 컨텍스트(실행 컨텍스트), 활성 객체(호출 객체) 및 작동 메커니즘을 이해해야 합니다. 범위 및 범위 체인. 하지만 초보자로서 지금 당장은 이러한 내용을 이해할 필요는 없습니다. 간단한 이해를 한 후에는 실제 프로젝트에서 사용하면 자연스럽게 클로저에 대한 더 깊은 이해를 갖게 됩니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
