Dove vive una chiusura JavaScript?

Question

Ho scritto questo codice per insegnare a me stesso su chiusure JavaScript:

function1 = function(){ 
    var variable = "foo" 
    var function2 = function(argument){ 
    console.log(variable + argument); 
    } 
    return function2 
} 

function3 = function1(); 
function3("bar"); 

Questa stampe "foobar", come previsto. Ma dove vive la variabile?

Diventa una proprietà di function3 o memorizzata da qualche altra parte in function3? JavaScript attraversa una sorta di catena di chiusura, in modo simile a come attraversa la catena del prototipo? È archiviato in memoria da qualche altra parte?

Sto cercando di capire questo più profondamente.

Answer 1

tl; dr:

where does the variable live?

Nell'ambiente è stato definito in

Does it become a property of function3, or stored somewhere else in function3?

No.

Does JavaScript traverse some kind of closure chain, similarly to how it traverses the prototype chain?

Sì..

Is it stored in memory somewhere else?

Sì.

---

tl; dr. 2:

Funzioni mantenere un riferimento all'ambiente in cui vengono creati in Quando una funzione viene chiamata crea un nuovo ambiente il cui genitore è l'ambiente la funzione mantenuto il riferimento a.

---

più lunga spiegazione:

Ogni volta che viene eseguita una funzione di un nuovo lexical environment viene creato. L'ambiente ha due "campi": uno environment record in cui vengono tracciate tutte le variabili e un ambiente lessicale che fa riferimento, come suggerisce il nome, all '"ambiente lessicale genitore".

Così, quando il vostro esempio di codice viene valutata, lo stato iniziale della memoria (prima di eseguire qualsiasi cosa) potrebbe essere simile a questo (semplificato):

+-(Global) lexical environment-+  +-Environment Record-+ 
+-------------+----------------+  +---------+----------+ 
| Environment |  *--------+---> |function1|undefined | 
| Record |    |  +---------+----------+ 
+-------------+----------------+  |function3|undefined | 
| Outer |    |  +---------+----------+ 
| lexical | (empty)  | 
| environment |    | 
+-------------+----------------+ 

L'ambiente globale non dispone qualsiasi ambiente esterno perché è in cima. function1 e function3 sono due collegamenti non ancora inizializzati (l'assegnazione non è stata ancora valutata).

Dopo aver creato la funzione (valutare function1 = function() { ... }), la memoria aspetto:

  +------------------------------------------------------------------------+ 
      |                  | 
      v                  | 
+-(Global) lexical environment-+ +-Environment Record-+  +-----Function Object-+---+ 
+-------------+----------------+ +---------+----------+  +---------------+-----+---+ 
| Environment |  *--------+--->|function1| *-----+---->|[[Environment]]|  * | 
| Record |    | +---------+----------+  +---------------+---------+ 
+-------------+----------------+ |function3|undefined |  |  name  |function1| 
| Outer |    | +---------+----------+  +---------------+---------+ 
| lexical | (empty)  | 
| environment |    | 
+-------------+----------------+ 

Ora function1 ha un valore, un oggetto funzione. Gli oggetti funzione hanno proprietà interne multiple (ad esempio [[Environment]]) ed esterne (ad esempio name). Come suggerisce il nome, non è possibile accedere alle proprietà interne dal codice utente. La proprietà [[Environment]] è molto importante.Nota come si fa riferimento all'ambiente lessicale in cui è stata creata la funzione!

Il passaggio successivo è in esecuzione function3 = function1(), ovvero chiamando function2. Come ho detto all'inizio, ogni volta che viene eseguita una funzione viene creato un nuovo ambiente lessicale. Diamo un'occhiata alla memoria subito dopo aver inserito la funzione:

   +------------------------------------------------------------------------+ 
       |                  | 
       v                  | 
    +-(Global) lexical environment-+ +-Environment Record-+  +-----Function Object-+---+ 
    +-------------+----------------+ +---------+----------+  +---------------+-----+---+ 
    | Environment |  *--------+--->|function1|   +---->|[[Environment]]|  * | 
    | Record |    | +---------+----------+  +---------------+---------+ 
+> +-------------+----------------+ |function3|undefined |  |  name  |function1| 
| | Outer |    | +---------+----------+  +---------------+---------+ 
| | lexical | (empty)  | 
| | environment |    | 
| +-------------+----------------+ 
| 
| 
| 
| +-----lexical environment------+ +-Environment Record-+ 
| +-------------+----------------+ +---------+----------+ 
| | Environment |  *--------+--->|variable |undefined | 
| | Record |    | +---------+----------+ 
| +-------------+----------------+ |function2|undefined | 
| | Outer |    | +---------+----------+ 
| | lexical |  *  | 
| | environment |  |  | 
| +-------------+--------+-------+ 
|       | 
+-------------------------+ 

Questo sembra molto simile alla struttura dell'ambiente globale! Abbiamo un ambiente lessicale con un record di ambiente con due binding non personalizzati. Ma la grande differenza ora è che "l'ambiente lessicale esterno" punta all'ambiente lessicale globale. Come è possibile?

Quando si chiama function1 e si crea un nuovo ambiente lessicale, si imposta il valore del campo "ambiente lessicale esterno" dei nuovi ambienti sul valore del campo [[Environment]]function1. Questo è il caso in cui è stata creata la catena di portata .

Ora, dopo l'esecuzione function1, la memoria ha questa struttura:

   +------------------------------------------------------------------------+ 
       |                  | 
       v                  | 
    +-(Global) lexical environment-+ +-Environment Record-+  +-----Function Object-+---+ 
    +-------------+----------------+ +---------+----------+  +---------------+-----+---+ 
    | Environment |  *--------+--->|function1| *-----+---->|[[Environment]]|  * | 
    | Record |    | +---------+----------+  +---------------+---------+ 
+> +-------------+----------------+ |function3| |  |  |  name  |function1| 
| | Outer |    | +---------+---+------+  +---------------+---------+ 
| | lexical | (empty)  |     | 
| | environment |    |     | 
| +-------------+----------------+     +-------------------------+ 
|                    | 
|    +----------------------------------------------------------------+--------+ 
|    v                |  | 
| +-----lexical environment------+ +-Environment Record-+     v  | 
| +-------------+----------------+ +---------+----------+       | 
| | Environment |  *--------+--->|variable | 'foo' |  +-----Function Object-+---+ 
| | Record |    | +---------+----------+  +---------------+-----+---+ 
| +-------------+----------------+ |function2| *-----+---->|[[Environment]]|  * | 
| | Outer |    | +---------+----------+  +---------------+---------+ 
| | lexical |  *  |        |  name  |function2| 
| | environment |  |  |        +---------------+---------+ 
| +-------------+--------+-------+ 
|       | 
+-------------------------+ 

simili come function1, function2 ha un riferimento per l'ambiente creato da chiamando function2. Inoltre, function3 fa riferimento alla funzione che abbiamo creato perché la restituiamo da function1.

Ultimo passo: chiamando function3('bar'):

   +------------------------------------------------------------------------+ 
       |                  | 
       v                  | 
    +-(Global) lexical environment-+ +-Environment Record-+  +-----Function Object-+---+ 
    +-------------+----------------+ +---------+----------+  +---------------+-----+---+ 
    | Environment |  *--------+--->|function1| *-----+---->|[[Environment]]|  * | 
    | Record |    | +---------+----------+  +---------------+---------+ 
+> +-------------+----------------+ |function3| |  |  |  name  |function1| 
| | Outer |    | +---------+---+------+  +---------------+---------+ 
| | lexical | (empty)  |     | 
| | environment |    |     | 
| +-------------+----------------+     +-------------------------+ 
|                    | 
|    +----------------------------------------------------------------+--------+ 
|    v                |  | 
| +-----lexical environment------+ +-Environment Record-+     v  | 
| +-------------+----------------+ +---------+----------+       | 
| | Environment |  *--------+--->|variable | 'foo' |  +-----Function Object-+---+ 
| | Record |    | +---------+----------+  +---------------+-----+---+ 
|+>+-------------+----------------+ |function2| *-----+---->|[[Environment]]|  * | 
|| | Outer |    | +---------+----------+  +---------------+---------+ 
|| | lexical |  *  |        |  name  |function2| 
|| | environment |  |  |        +---------------+---------+ 
|| +-------------+--------+-------+ 
++------------------------+ 
| 
| +-----lexical environment------+ +-Environment Record-+ 
| +-------------+----------------+ +---------+----------+ 
| | Environment |  *--------+--->|argument | 'bar' | 
| | Record |    | +---------+----------+ 
| +-------------+----------------+ 
| | Outer |    | 
| | lexical |  *  | 
| | environment |  |  | 
| +-------------+--------+-------+ 
+------------------------+ 

simile qui, un nuovo ambiente è stato creato e le sue "ambiente esterno lessicale" punti sul campo per l'ambiente creato quando function1 è stato chiamato.

Ora, cercare il valore di argument è semplice, perché esiste nel record proprio dell'ambiente. Ma quando si guarda su variable, accade quanto segue: Poiché non esiste nel record proprio dell'ambiente, guarda al suo record "ambiente lessicale esterno". Può farlo perché ha un riferimento ad esso.

Answer 2

Le variabili vivono nello scope in cui sono dichiarate, che è globale o una funzione.

La parola chiave qui è scope.

Come explained brilliantly nel sito Web MSDN:

A variable that is declared inside a function definition is local. It is created and destroyed every time the function is executed, and it cannot be accessed by any code outside the function. JavaScript does not support block scope (in which a set of braces {. . .} defines a new scope), except in the special case of block-scoped variables.

EDIT:

In realtà è un po 'più complicato di questo, vedere toddmotto s' post su ambiti di JS.

Answer 3

La chiusura è decentemente spiegata sul sito Web MDN. Ma raccomanderei di passare attraverso this awesome explanation in a Stack Overflow answer, a precise answer to your question.

Non è la proprietà. Solo che l'ambiente è ricordato nella memoria. Ambiente indica la funzione e i membri dell'ambito e dell'ambito. Spero che illumini il percorso.

Answer 4

Per una spiegazione su come funzionano le chiusure, vedere questa risposta.

How do JavaScript closures work?

A livello di macchina virtuale, ogni funzione ha la propria lexical environment che tiene traccia di queste informazioni. La macchina virtuale trova quali variabili sono accessibili nelle chiusure e le memorizza nell'heap e vivono fino a quando una chiusura potrebbe averne bisogno.

Per ulteriori approfondimenti si veda per esempio questi due grandi pezzi:

• Grokking V8 closures for fun (and profit?)

• How do JavaScript closures work under the hood

Answer 5

Ogni volta JavaScript esegue la funzione funzione3, un oggetto 'scope' è c raggiato per contenere la variabile locale chiamata da te come variabile ("pippo"). Nota che il tuo codice JavaScript non può accedere direttamente a questo oggetto scope. E quindi il valore "pippo" è disponibile per la funzione interiore, sebbene la funzione esterna sia ritornata.

Does JavaScript traverse some kind of closure chain, similarly to how it traverses the prototype chain?

Sì."Gli oggetti di ambito formano una catena chiamata catena dell'ambito, simile alla catena di prototipi utilizzata dal sistema di oggetti di JavaScript

Una chiusura è la combinazione di una funzione e l'oggetto ambito in cui è stata creata. come tali, spesso possono essere utilizzati al posto degli oggetti"

per saperne di più qui:

• A re-introduction to JavaScript (JS tutorial)
• How do JavaScript closures work?