Partager des informations utiles : vous permet d'apprendre les fermetures javascript en quelques minutes_javascript skills

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 !

Après avoir eu une compréhension préliminaire, analysons brièvement en quoi elle diffère des fonctions ordinaires, afin que nous puissions la reconnaître d'un coup d'œil parmi la « foule immense ».

Le code ci-dessus est traduit en langage naturel comme suit :

• (1) définit une fonction ordinaire A
• (2) Une fonction ordinaire B est définie dans A
• (3) Retourner B dans A (pour être précis, renvoyer une référence à B dans A)
• (4) Exécuter A() et attribuer le résultat de retour de A à la variable c
• (5)Exécuter c()

Pour résumer ces 5 étapes en une phrase absurde :

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

count est une variable dans A, et sa valeur est modifiée dans B. Chaque fois que la fonction B est exécutée, la valeur de count augmentera de 1 en fonction de la valeur d'origine. Par conséquent, le décompte dans A est toujours conservé en mémoire.

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.

La structure de code ci-dessus peut être divisée en deux parties : (function(){})() La partie rouge est une expression, et cette expression elle-même est une fonction anonyme, donc ajouter () après cette expression signifie exécuter cet anonyme fonction.

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 실행 컨텍스트(실행 컨텍스트), 활성 객체(호출 객체) 및 작동 메커니즘을 이해해야 합니다. 범위 및 범위 체인. 하지만 초보자로서 지금 당장은 이러한 내용을 이해할 필요는 없습니다. 간단한 이해를 한 후에는 실제 프로젝트에서 사용하면 자연스럽게 클로저에 대한 더 깊은 이해를 갖게 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.