Um guia simples para o ajudar a compreender os encerramentos em JavaScript

By admin on

Acabamentos em JavaScript são um desses conceitos que muitos lutam para se entenderem. No artigo seguinte, explicarei em termos claros o que é um encerramento, e conduzirei o ponto para casa usando exemplos simples de código.

Um encerramento é uma característica em JavaScript onde uma função interna tem acesso às variáveis da função externa (envolvente) – uma cadeia de escopo.

O fecho tem três cadeias de âmbito:

  • tem acesso ao seu próprio âmbito – variáveis definidas entre os seus parênteses encaracolados
  • tem acesso às variáveis da função externa
  • tem acesso às variáveis globais

Para os não iniciados, esta definição pode parecer apenas um monte de jargão!

Mas o que é realmente um fecho?

Vejamos um exemplo de encerramento simples em JavaScript:

function outer() { var b = 10;
function inner() {
var a = 20; 
console.log(a+b);
}
return inner;
}

Aqui temos duas funções:

  • uma função externa outer que tem uma variável b, e devolve o inner function
  • an inner function inner que tem a sua variável chamada a, e acede a uma outer variável b, dentro do seu corpo funcional

O âmbito da variável b é limitado à função outer, e o âmbito da variável a é limitado à função inner.

Deixe-nos agora invocar a função outer(), e armazenar o resultado da função outer() numa variável X. Vamos então invocar a função outer() uma segunda vez e armazená-la na variável Y.

Vejamos passo a passo o que acontece quando a função outer() é invocada pela primeira vez:

  1. Variável b é criada, o seu âmbito é limitado à função outer(), e o seu valor é definido para 10.
  2. A linha seguinte é uma declaração de função, portanto nada a executar.
  3. Na última linha, return inner procura uma variável chamada inner, descobre que esta variável inner é de facto uma função, e assim retorna todo o corpo da função inner.
  4. O conteúdo devolvido pela declaração de retorno é armazenado em X.
    Thus, X irá armazenar o seguinte:
    function inner() {
    var a=20;
    console.log(a+b);
    }
  5. Função outer() termina a execução, e todas as variáveis no âmbito de outer() agora já não existem.

Esta última parte é importante de compreender. Quando uma função completa a sua execução, quaisquer variáveis que foram definidas dentro do âmbito da função deixam de existir.

A duração de uma variável definida dentro de uma função é a duração da execução da função.

O que isto significa é que em , a variável b só existe durante a execução da função outer(). Assim que a função outer tiver terminado a execução, a variável b já não existe.

Quando a função é executada pela segunda vez, as variáveis da função são criadas novamente, e vivem apenas até que a função termine a execução.

Assim, quando outer() é invocada pela segunda vez:

  1. Uma nova variável b é criada, o seu âmbito é limitado à função outer(), e o seu valor é definido para 10.
  2. A linha seguinte é uma declaração de função, portanto nada a executar.
  3. return inner devolve todo o corpo da função inner.
  4. O conteúdo devolvido pela declaração de retorno é armazenado em Y.
  5. Função outer() termina a execução, e todas as variáveis dentro do âmbito de outer() agora já não existem.

O ponto importante aqui é que quando a função outer() é invocada pela segunda vez, a variável b é criada de novo. Além disso, quando a função outer() termina a execução pela segunda vez, esta nova variável b deixa novamente de existir.

Este é o ponto mais importante a realizar. As variáveis dentro das funções só passam a existir quando a função está em execução, e deixam de existir quando as funções terminam a execução.

Agora, voltemos ao nosso exemplo de código e olhemos para X e Y. Uma vez que a função outer() na execução retorna uma função, as variáveis X e Y são funções.

Isso pode ser facilmente verificado adicionando o seguinte ao código JavaScript:

console.log(typeof(X)); //X is of type function
console.log(typeof(Y)); //Y is of type function

Desde que as variáveis X e Y são funções, podemos executá-las. Em JavaScript, uma função pode ser executada adicionando () após o nome da função, como X() e Y().

quando executamos X() e Y(), estamos essencialmente a executar o inner função.

Deixe-nos examinar passo a passo o que acontece quando X() é executado da primeira vez:

  1. Variável a é criado, e o seu valor é definido para 20.
  2. JavaScript tenta agora executar a + b. Aqui é onde as coisas ficam interessantes. O JavaScript sabe que a existe desde que acabou de o criar. No entanto, a variável b já não existe. Uma vez que b faz parte da função externa, b só existiria enquanto a função outer() estiver em execução. Uma vez que o outer() função terminou a execução muito antes de termos invocado X(), quaisquer variáveis no âmbito do outer função deixam de existir, e portanto a variável b já não existe.

Como é que o JavaScript lida com isto?

Closures

The inner function can access the variables of the enclosing function due to closures in JavaScript. Por outras palavras, a função inner preserva a cadeia de alcance da função envolvente no momento em que a função envolvente foi executada, e assim pode aceder às variáveis da função envolvente.

No nosso exemplo, a função inner tinha preservado o valor de b=10 quando a função outer() foi executada, e continuou a preservá-la (encerramento).

Refere-se agora à sua cadeia de âmbito e nota que tem o valor da variável b dentro da sua cadeia de âmbito, uma vez que tinha incluído o valor de b dentro de um fecho no ponto em que a função outer tinha sido executada.

assim, JavaScript sabe a=20 e b=10, e pode calcular a+b.

P>Pode verificar isto adicionando a seguinte linha de código ao exemplo acima:

Abrir o elemento Inspect no Google Chrome e ir para a Consola. Pode expandir o elemento para ver realmente o elemento Closure (mostrado na terceira à última linha abaixo). Note que o valor de b=10 é preservado no elemento Closure mesmo após a função outer() completar a sua execução.

div>

Variável b=10 é preservada no Encerramento, Encerramentos em Javascript

Deixe-nos agora revisitar a definição de encerramentos que vimos no início e ver se agora faz mais sentido.

Então a função interna tem três cadeias de escopo:

  • acesso ao seu próprio âmbito – variável a
  • acesso ao outer variáveis da função – variável b, que incluiu
  • acesso a quaisquer variáveis globais que possam ser definidas

Closures in Action

Para levar para casa o ponto de encerramento, vamos aumentar o exemplo adicionando três linhas de código:

Quando executar este código, verá a seguinte saída no código console.log:

a=20 b=10
a=20 b=11
a=20 b=12
a=20 b=10

Vamos examinar este código passo a passo para ver o que está exactamente a acontecer e para ver os encerramentos em Acção!

var X = outer(); // outer() invoked the first time

A função outer() é invocada pela primeira vez. Os passos seguintes têm lugar:

  1. Variável b é criado, e é definido para 10
    Variável c é criado, e definir para 100br> Chamemos a isto b(first_time) e c(first_time) para nossa própria referência.
  2. O inner função é devolvido e atribuído a X
     neste ponto, a variável b está incluída no inner cadeia de âmbito da função como um fecho com b=10, uma vez que inner utiliza a variável b.
  3. A função outer completa a execução, e todas as suas variáveis deixam de existir. A variável c já não existe, embora a variável b exista como um fecho dentro de inner.
var Y= outer(); // outer() invoked the second time
  1. Variável b é criada de novo e é definida para 10
    Variável c é criada de novo.
    Nota que embora outer() tenha sido executada uma vez antes das variáveis b e c tenha deixado de existir, uma vez que a função completou a execução são criadas como variáveis totalmente novas.
    Deixe-nos chamar estas b(second_time) e c(second_time) para nossa própria referência.
  2. A função inner é devolvida e atribuída a Y
     Neste ponto a variável b está incluído no inner cadeia de alcance da função como um fecho com b(second_time)=10, desde inner utiliza a variável b.
  3. A função outer completa a execução, e todas as suas variáveis deixam de existir.
    A variável c(second_time) já não existe, embora a variável b(second_time) exista como encerramento dentro de inner.

Agora vamos ver o que acontece quando as seguintes linhas de código são executadas:

X(); // X() invoked the first time
X(); // X() invoked the second time
X(); // X() invoked the third timeY(); // Y() invoked the first time

Quando X() é invocado pela primeira vez,

  1. variável a é criado, e definido para 20
  2. o valor de a=20, o valor de b é do valor de fecho. b(first_time), so b=10
  3. variables a e b são incrementadas por 1
  4. X() completa execução e todas as suas variáveis internas – variável a – deixam de existir.
    No entanto, b(first_time) foi preservada como o encerramento, portanto b(first_time) continua a existir.

Quando X() é invocado pela segunda vez,

  1. variable a é criado de novo, e definido para 20
     Qualquer valor anterior da variável a já não existe, uma vez que deixou de existir quando X() completou a execução na primeira vez.
  2. o valor de a=20
     o valor de b é retirado do valor de fecho – b(first_time)
    Notemos também que tínhamos aumentado o valor de b por 1 desde a execução anterior, so b=11
  3. variables a e b são incrementados por 1 novamente
  4. X() completa execução e todas as suas variáveis internas – variável a – deixam de existir
    No entanto, b(first_time) é preservado uma vez que o encerramento continua a existir.

Quando X() é invocado pela terceira vez,

    1. variável a é criado de novo, e definido para 20
      Um valor anterior da variável a já não existe, uma vez que deixou de existir quando X() completou a execução na primeira vez.
    2. o valor de a=20, o valor de b é do valor de fecho – b(first_time)br> Também note-se que tínhamos incrementado o valor de b por 1 na execução anterior, so b=12
    3. variables a e b são incrementados por 1 novamente
    4. X() completa execução, e todas as suas variáveis internas – variável a – deixam de existir
      No entanto, b(first_time) é preservada à medida que o fecho continua a existir

    quando Y() é invocado pela primeira vez,

    1. variável a é criado de novo, e definido para 20
    2. o valor de a=20, o valor de b é do valor de fecho – b(second_time), so b=10
    3. variables a e b são incrementados por 1
    4. Y() completa execução, e todas as suas variáveis internas – variável a – deixam de existir
      No entanto, b(second_time) foi preservada como o fecho, por isso b(second_time) continua a existir.

    Observações finais

    Acabamentos são um daqueles conceitos subtis em JavaScript que são difíceis de apreender no início. Mas uma vez entendidos, apercebemo-nos de que as coisas não poderiam ter sido de outra forma.

    Esperemos que estas explicações passo-a-passo nos ajudem a compreender realmente o conceito de encerramento em JavaScript!

    Outros Artigos:

  • Um guia rápido para funções “auto-invocatórias” em Javascript
  • Escopo da Função vs. Escopo do Bloco em Javascript
  • Como usar Promessas em JavaScript
  • Como construir uma animação Sprite simples em JavaScript

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *