Gu铆a de peche de JavaScript

Introduci贸n

Os peche son un concepto un tanto abstracto de idioma de JavaScript e sneak no lado do compilador da programaci贸n. Non obstante, entender como interpreta as funci贸ns de Javascript, as funci贸ns ani帽adas, as 谩reas e os ambientes l茅xicos son esenciais para aproveitar o seu pleno potencial.

Neste artigo, trataremos de desmitificar estes conceptos e proporcionar unha gu铆a sinxela para o Closes de JavaScript

Que 茅 un peche?

Primeiro, imos ver a definici贸n oficial de pechar MDN:

Un peche 茅 a combinaci贸n dunha funci贸n agrupada ( bloqueado) con referencias ao seu estado circundante (o ambiente l茅xico). Noutras palabras, un peche d谩 acceso ao alcance dunha funci贸n externa desde unha funci贸n interna.

En termos m谩is simples, un peche 茅 unha funci贸n que ten acceso ao alcance dunha funci贸n externa. Para entender isto, imos botar unha ollada a que as 谩reas traballan en JavaScript.

Alcance en Javascript

Alcance determina que variables son visibles ou poden ser referenciadas nun determinado contexto. O alcance est谩 dividido en dous tipos: alcance global e alcance local:

  • gama global – variables definidas f贸ra dunha funci贸n. As variables p贸dense acceder a este campo e modific谩ndoas desde calquera parte do programa, de a铆 o nome “global”.
  • gama local – variables definidas dentro dunha funci贸n. Estas variables son espec铆ficas para a funci贸n do que est谩 definido, polo que son chamados “locais”.

Vexamos unha variable global e local en JavaScript:

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

No exemplo anterior, o alcance de 茅 global, 茅 dicir, pode acceder a ela desde calquera lugar. Por outra banda, message est谩 definido dentro dunha funci贸n, o seu intervalo 茅 local para a funci贸n hello().

JavaScript usa o alcance l茅xico cando se trata de 谩reas de funci贸n. O que significa que o rango dunha variable def铆nese pola posici贸n da s煤a definici贸n no c贸digo fonte. Isto perm铆tenos referirse a variables globais en 谩reas menores. Unha variable local pode usar unha variable global, pero o viceversa non 茅 posible.

en

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

Este c贸digo resulta en:

10error: Uncaught ReferenceError: y is not defined

a funci贸n

pode facer referenciaxcomo est谩 definido en a funci贸nouter(). Non obstante, a Declaraci贸nconsole.log(y)noouter()a funci贸n non pode referirse 谩 variable Porque est谩 definido no intervalo de funci贸ns

.

Ademais, neste escenario:

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

A sa铆da ser谩:

cando chamamos func1() desde o interior func2(), temos unha variable local x. Non obstante, esta variable 茅 totalmente irrelevante para func1() xa que non 茅 accesible en func1().

Ent贸n, func1() Comprobar se hai unha variable global con ese identificador dispo帽ible e usalo, que resulta no valor de 10.

Pechar baixo o cap贸

Un peche 茅 unha funci贸n que ten acceso 谩s variables dos seus pais mesmo despois de que a funci贸n externa volveu. Noutras palabras, un peche ten tres 谩reas:

  • gama local: acceso a variables ao seu alcance
  • Alcance da funci贸n principal: acceso 谩s variables dentro do seu principal
  • Alcance global: acceso a variables globais

Vexamos un peche no traballo, facendo unha funci贸n que devolve outra funci贸n:

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

Isto resulta en:

6

Se facemos un:

console.log(multiplyByThree);

Recibimos con:

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

imos revisar o c贸digo paso a paso para ver o que est谩 a suceder baixo o cap贸:

  • o outer() est谩 definido no 谩mbito global.
  • outer() 茅 invocado e devolve unha funci贸n que est谩 asignada a multiplyByThree.
  • cr茅ase un novo contexto de execuci贸n para outer().
    • variable x est谩 configurado en 3.
  • Devolve unha funci贸n chamada inner().
  • A referencia a inner() est谩 asignada a multiplyByThree.
  • Cando a funci贸n externa remata a execuci贸n, todas as variables son eliminadas ao seu alcance.
  • resultado da chamada 谩 funci贸n multiplyByThree(2) est谩 rexistrada na consola.
  • inner() 脡 invocado con 2 como argumento. Ent贸n, y est谩 definido como 2.
  • como inner() Conserva a cadea de reacci贸n da s煤a funci贸n principal, no momento da execuci贸n, a铆nda ter谩 acceso ao valor de x.
  • devolve 6 que est谩 rexistrado na consola.

En conclusi贸n, mesmo despois de que f贸ra a funci贸n deixa de existir, o interior a funci贸n ten acceso 谩s variables definidas no Alcance desde a funci贸n externa.

P贸dese mostrar a trav茅s da consola de desenvolvedores:

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

Ao executar o c贸digo anterior na consola do desarrollador, podemos ver que temos acceso ao contexto de inner(y). Despois dunha inspecci贸n m谩is pr贸xima, podemos ver que a parte do seu contexto 茅 unha matriz ], que cont茅n as tres 谩reas que falamos.

e aqu铆, A matriz de alcance cont茅n o alcance da s煤a funci贸n principal, que cont茅n x = 3:

Casos de uso com煤n

Os peche son 煤tiles porque eles Ax煤danos a agrupar datos con funci贸ns que operan neses datos. Isto poder铆a soar alg煤ns de vostedes que est谩n familiarizados coa programaci贸n orientada a obxectos (OOP). Como resultado, podemos usar peche en calquera lugar onde podemos usar un obxecto.

Outro caso de uso importante dos peche 茅 cando necesitamos as nosas variables para ser privadas, xa que as variables definidas no 谩mbito dun peche Est谩n f贸ra dos l铆mites das funci贸ns f贸ra dela. Ao mesmo tempo, os peche te帽en acceso a variables na s煤a cadea de gama.

Vexamos o seguinte exemplo para comprender mellor:

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

Neste exemplo, definimos unha variable constante balance e config煤raa como o valor de retorno da nosa funci贸n an贸nima. Realizar privateBalance s贸 se pode cambiar chamando aos m茅todos en balance

Conclusi贸n

A铆nda que os peche son un concepto moi especializado en JavaScript, son unha ferramenta importante nun bo conxunto de ferramentas para os desenvolvedores de JavaScript. P贸dense usar para implementar elegantemente soluci贸ns que doutro xeito ser铆an unha tarefa dif铆cil.

Neste artigo, primeiro aprendemos un pouco sobre os campos e como se implementan en JavaScript. Ent贸n usamos este co帽ecemento para entender como funcionan os peche baixo o traballo de capucha e como usalos.

Leave a Comment

O teu enderezo electr贸nico non se publicar谩 Os campos obrigatorios est谩n marcados con *