Guide de fermeture JavaScript

Introduction

Les fermetures sont un concept quelque peu abstrait de langue javascript et se faufilant sur le cÎté du compilateur de la programmation. Cependant, comprendre comment JavaScript interprÚte les fonctions, les fonctions imbriquées, les zones et les environnements lexicaux est essentielle pour tirer parti de son plein potentiel.

Dans cet article, nous allons essayer de démystifier de tels concepts et de fournir un guide simple pour le Fermetures JavaScript

Qu’est-ce qu’une fermeture?

Tout d’abord, regardons la dĂ©finition officielle de la fermeture de MDN:

Une fermeture est la combinaison d’une fonction groupĂ©e ( verrouillĂ©) avec des rĂ©fĂ©rences Ă  son Ă©tat environnant (l’environnement lexical). En d’autres termes, une fermeture donne accĂšs Ă  la portĂ©e d’une fonction externe Ă  partir d’une fonction interne.

en termes simples, une fermeture est une fonction qui a accĂšs Ă  la portĂ©e d’une fonction externe. Pour comprendre cela, jetons un coup d’Ɠil Ă  la façon dont les zones fonctionnent dans JavaScript.

Portée dans JavaScript

Scope dĂ©termine quelles variables sont visibles ou peuvent ĂȘtre rĂ©fĂ©rencĂ©es dans un contexte donnĂ©. La portĂ©e est largement divisĂ©e en deux types: portĂ©e globale et portĂ©e locale:

  • gamme globale – variables dĂ©finies en dehors d’une fonction. Les variables peuvent ĂȘtre consultĂ©es dans ce champ et les modifier de n’importe oĂč dans le programme, d’oĂč le nom « Global ».
  • Plage local – Variables dĂ©finies dans une fonction. Ces variables sont spĂ©cifiques Ă  la fonction de la fonction. C’est dĂ©fini, alors ils sont appelĂ©s « local ».

regardons une variable globale et locale en JavaScript:

let name = "Joe";function hello(){ let message = "Hello"; console.log(message + " " +name);}

Dans l’exemple prĂ©cĂ©dent, la portĂ©e de name est globale, c’est-Ă -dire que vous pouvez y accĂ©der de n’importe oĂč. D’autre part, message est dĂ©fini dans une fonction, sa plage est locale Ă  la hello()

JavaScript il utilise la portĂ©e lexicale lorsqu’il s’agit de zones de fonction. Ce qui signifie que la plage d’une variable est dĂ©finie par la position de sa dĂ©finition dans le code source. Cela nous permet de faire rĂ©fĂ©rence Ă  des variables globales dans des zones plus petites. Une variable locale peut utiliser une variable globale, mais vice versa n’est pas possible.

fr

function outer(){ let x = 10; function inner() { let y = 20; console.log(x); } inner(); console.log(y)}outer();

Ce code donne:

10error: Uncaught ReferenceError: y is not defined

L’ID

fonction peut rĂ©fĂ©rencexcomme il est dĂ©fini dans Laouter()fonction. Cependant, l’IDconsole.log(y)DĂ©claration dansouter()La fonction ne peut pas se rĂ©fĂ©rer Ă  layvariable parce qu’il est dĂ©fini dans lainner()plage de fonctions.

De plus, dans ce scénario:

let x = 10;function func1(){ console.log(x);}function func2() { let x = 20; func1();}func2();

La sortie sera:

10

lorsque nous appelons func1() de l’intĂ©rieur func2(), nous avons une variable locale x. Cependant, cette variable est totalement sans importance pour func1() car il n’est pas accessible dans func1()

donc, func1() VĂ©rifiez s’il existe une variable globale avec cet identifiant disponible et l’utiliser, ce qui entraĂźne la valeur de 10

Les fermetures sous le capot

Une fermeture est une fonction qui a accĂšs aux variables de vos parents, mĂȘme aprĂšs le retour de la fonction externe. En d’autres termes, une fermeture a trois domaines:

  • Gamme locale: AccĂšs aux variables Ă  votre portĂ©e de portĂ©e
  • PortĂ©e de la fonction principale: AccĂšs aux variables de votre principale
  • Global Reach: AccĂšs aux variables globales

Regardons une fermeture au travail, faisant une fonction qui retourne une autre fonction:

function outer() { let x = 3 return function inner(y) { return x*y }}let multiplyByThree = outer();console.log(multiplyByThree(2));

Il en résulte:

6

Si nous faisons:

console.log(multiplyByThree);

Nous sommes reçus avec:

function inner(y) { return x * y; }

examinons le code Ă©tape par Ă©tape pour voir ce qui se passe sous le capot:

  • l’ID

    La fonction est définie dans la portée globale.

  • outer() est invoquĂ© et retourne une fonction attribuĂ©e Ă  multiplyByThree.
  • est crĂ©Ă© un nouveau contexte d’exĂ©cution pour outer().
    • variable x est dĂ©fini sur 3.
  • renvoie une fonction appelĂ©e inner().
  • la rĂ©fĂ©rence Ă  inner() est attribuĂ© Ă  multiplyByThree.
  • Lorsque la fonction externe termine l’exĂ©cution, toutes les variables sont supprimĂ©es Ă  votre portĂ©e.
  • rĂ©sultat de l’appel Ă  la fonction multiplyByThree(2) est enregistrĂ© sur la console.
  • inner() Il est invoquĂ© avec 2 argument. Ensuite, y est dĂ©fini sur 2.
  • comme Conserve la chaĂźne de rĂ©action de sa fonction principale au moment de l’exĂ©cution, vous aurez toujours accĂšs Ă  la valeur de x.
  • retourne 6 qui est enregistrĂ© dans la console.

en conclusion, mĂȘme aprĂšs l’extĂ©rieur de la fonction cesse d’exister, l’intĂ©rieur La fonction a accĂšs aux variables dĂ©finies dans la PortĂ©e de la fonction extĂ©rieure.

Fermetures de visualisation

Les fermetures peuvent ĂȘtre affichĂ©es via la console de dĂ©veloppeur:

function outer() { let x = 3 return function inner(y) { return x*y }}let multiplyByThree = outside();console.dir(multiplyByThree);

Lors de l’exĂ©cution du code prĂ©cĂ©dent dans la console du dĂ©veloppeur, nous pouvons voir que nous avons accĂšs au contexte de inner(y). AprĂšs une inspection plus proche, nous pouvons voir que la partie de son contexte est une partie tableau, qui contient les trois domaines dont nous parlions.

et ici, La matrice d’Ă©tendue contient la portĂ©e de sa fonction principale, qui contient x = 3:

cas d’utilisation courante

Les fermetures sont utiles car elles Aidez-nous aux donnĂ©es de groupe avec des fonctions qui fonctionnent dans ces donnĂ©es. Cela pourrait sembler certains d’entre vous qui connaissent la programmation orientĂ©e objet (OOP). En consĂ©quence, nous pouvons utiliser des fermetures n’importe oĂč oĂč nous pouvons utiliser un objet.

Un autre cas d’utilisation importante des fermetures est lorsque nous avons besoin de nos variables pour ĂȘtre privĂ©es, car les variables dĂ©finies dans la portĂ©e d’une fermeture Ils sont hors des limites des fonctions en dehors de cela. Dans le mĂȘme temps, les fermetures ont accĂšs Ă  des variables dans la chaĂźne de leur gamme.

Voyons l’exemple suivant pour mieux comprendre cela:

const balance = (function() { let privateBalance = 0; return { increment: function(value){ privateBalance += value; return privateBalance; }, decrement: function(value){ privateBalance -= value; return privateBalance; }, show: function(){ return privateBalance; } }})()console.log(balance.show()); // 0console.log(balance.increment(500)); // 500console.log(balance.decrement(200)); // 300

Dans cet exemple, nous avons dĂ©fini une variable constante et la configure comme la valeur de retour de notre fonction anonyme. RĂ©aliser privateBalance ne peut ĂȘtre modifiĂ© qu’en appelant les mĂ©thodes de .

Conclusion

Bien que les fermetures soient un concept trĂšs spĂ©cialisĂ© dans JavaScript, ils constituent un outil important dans un bon ensemble d’outils pour les dĂ©veloppeurs JavaScript. Ils peuvent ĂȘtre utilisĂ©s pour mettre en Ɠuvre Ă©lĂ©gamment des solutions qui seraient autrement une tĂąche difficile.

Dans cet article, nous avons d’abord appris un peu sur les champs et comment ils sont mis en Ɠuvre dans JavaScript. Ensuite, nous utilisons ces connaissances pour comprendre comment les fermetures fonctionnent sous le travail de la hotte et comment les utiliser.

Leave a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *