TLDR
JavaScript ha scopi e chiusure lessicali (chiamati anche statici). Ciò significa che puoi capire l'ambito di un identificatore guardando il codice sorgente.
I quattro ambiti sono:
- Globale - visibile da tutto
- Funzione: visibile all'interno di una funzione (e delle sue sotto-funzioni e blocchi)
- Blocco: visibile all'interno di un blocco (e dei suoi blocchi secondari)
- Modulo: visibile all'interno di un modulo
Al di fuori dei casi speciali di ambito globale e di modulo, le variabili vengono dichiarate utilizzando var(ambito funzione), let(ambito blocco) e const(ambito blocco). La maggior parte delle altre forme di dichiarazione dell'identificatore ha l'ambito del blocco in modalità rigorosa.
Panoramica
L'ambito è l'area della base di codice su cui è valido un identificatore.
Un ambiente lessicale è una mappatura tra i nomi degli identificatori e i valori ad essi associati.
L'ambito è formato da un annidamento collegato di ambienti lessicali, con ogni livello nell'annidamento corrispondente a un ambiente lessicale di un contesto di esecuzione degli antenati.
Questi ambienti lessicali collegati formano una "catena" di ambito. La risoluzione dell'identificatore è il processo di ricerca lungo questa catena per un identificatore corrispondente.
La risoluzione dell'identificatore si verifica solo in una direzione: verso l'esterno. In questo modo, gli ambienti lessicali esterni non possono "vedere" negli ambienti lessicali interni.
Esistono tre fattori pertinenti nel decidere l' ambito di un identificatore in JavaScript:
- Come è stato dichiarato un identificatore
- Dove è stato dichiarato un identificatore
- Che tu sia in modalità rigorosa o non rigorosa
Alcuni dei modi in cui gli identificatori possono essere dichiarati:
var, leteconst- Parametri di funzione
- Parametro blocco cattura
- Dichiarazioni di funzione
- Espressioni di funzioni denominate
- Proprietà definite implicitamente sull'oggetto globale (es. Perdita
varin modalità non rigorosa)
import dichiarazionieval
Alcuni identificatori di località possono essere dichiarati:
- Contesto globale
- Corpo funzione
- Blocco ordinario
- La parte superiore di una struttura di controllo (ad esempio loop, if, while etc)
- Corpo della struttura di controllo
- moduli
Stili di dichiarazione
var
Gli identificatori dichiarati utilizzando var hanno un ambito di funzione , a parte quando vengono dichiarati direttamente nel contesto globale, nel qual caso vengono aggiunti come proprietà sull'oggetto globale e hanno un ambito globale. Esistono regole separate per il loro utilizzo nelle evalfunzioni.
let e const
Gli identificatori dichiarati utilizzando lete const hanno un ambito di blocco , a parte quando vengono dichiarati direttamente nel contesto globale, nel qual caso hanno un ambito globale.
Nota: let, conste var sono tutti issato . Ciò significa che la loro posizione logica di definizione è la parte superiore del loro ambito di applicazione (blocco o funzione). Tuttavia, le variabili dichiarate in uso lete constnon possono essere lette o assegnate fino a quando il controllo non ha superato il punto di dichiarazione nel codice sorgente. Il periodo intermedio è noto come zona morta temporale.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Nomi dei parametri delle funzioni
I nomi dei parametri delle funzioni sono assegnati al corpo della funzione. Si noti che c'è una leggera complessità in questo. Le funzioni dichiarate come argomenti predefiniti si chiudono sull'elenco dei parametri e non sul corpo della funzione.
Dichiarazioni di funzione
Le dichiarazioni di funzione hanno ambito di blocco in modalità rigorosa e ambito di funzione in modalità non rigorosa. Nota: la modalità non rigorosa è un insieme complicato di regole emergenti basate sulle stravaganti implementazioni storiche di diversi browser.
Espressioni di funzioni denominate
Le espressioni di funzioni denominate sono mirate a se stesse (ad es. Ai fini della ricorsione).
Proprietà definite implicitamente sull'oggetto globale
In modalità non rigorosa, le proprietà implicitamente definite sull'oggetto globale hanno ambito globale, poiché l'oggetto globale si trova nella parte superiore della catena dell'ambito. In modalità rigorosa non sono consentiti.
eval
Nelle evalstringhe, le variabili dichiarate utilizzando varverranno inserite nell'ambito corrente o, se evalutilizzate indirettamente, come proprietà dell'oggetto globale.
Esempi
Quanto segue gettare un ReferenceError perché i nomi x, ye znon hanno alcun significato al di fuori della funzione f.
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
Quanto segue genererà un ReferenceError per ye z, ma non per x, perché la visibilità di xnon è limitata dal blocco. I blocchi che definiscono i corpi di strutture di controllo come if, fore while, allo stesso modo si comportano.
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
Di seguito, xè visibile al di fuori del ciclo perché varha ambito di funzione:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... a causa di questo comportamento devi stare attento a chiudere le variabili dichiarate usando var nei cicli. C'è solo un'istanza di variabile xdichiarata qui, e si trova logicamente fuori dal ciclo.
Le seguenti stampe 5, cinque volte, quindi stampa 5per la sesta volta per l' console.logesterno del ciclo:
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
Di seguito viene stampato undefinedperché xè a blocchi. I callback vengono eseguiti uno alla volta in modo asincrono. Un nuovo comportamento per le letvariabili significa che ogni funzione anonima si è chiusa su una diversa variabile denominata x(diversamente da come avrebbe fatto con var), e così vengono stampati gli interi 0attraverso 4.:
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
Quanto segue NON genererà a ReferenceErrorperché la visibilità di xnon è limitata dal blocco; verrà comunque stampato undefinedperché la variabile non è stata inizializzata (a causa ifdell'istruzione).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Una variabile dichiarata nella parte superiore di un forciclo che utilizza letè associata al corpo del ciclo:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
Quanto segue lancerà a ReferenceErrorperché la visibilità di xè limitata dal blocco:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Le variabili dichiarate utilizzando var, leto constsono tutti scope ai moduli:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
Quanto segue dichiarerà una proprietà sull'oggetto globale, poiché le variabili dichiarate usando varnel contesto globale, vengono aggiunte come proprietà all'oggetto globale:
var x = 1
console.log(window.hasOwnProperty('x')) // true
lete constnel contesto globale non aggiungere proprietà all'oggetto globale, ma hanno comunque portata globale:
let x = 1
console.log(window.hasOwnProperty('x')) // false
I parametri della funzione possono essere considerati dichiarati nel corpo della funzione:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
I parametri del blocco di cattura sono definiti nel corpo del blocco di cattura:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
Le espressioni di funzioni con nome hanno un ambito solo per l'espressione stessa:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
In modalità non rigorosa, le proprietà implicitamente definite sull'oggetto globale sono di ambito globale. In modalità rigorosa viene visualizzato un errore.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
In modalità non rigorosa, le dichiarazioni di funzione hanno ambito di funzione. In modalità rigorosa hanno ambito di blocco.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Come funziona sotto il cofano
L'ambito è definito come la regione lessicale del codice su cui è valido un identificatore.
In JavaScript, ogni oggetto-funzione ha un [[Environment]]riferimento nascosto che è un riferimento all'ambiente lessicale del contesto di esecuzione (stack frame) all'interno del quale è stato creato.
Quando si richiama una funzione, [[Call]]viene chiamato il metodo nascosto . Questo metodo crea un nuovo contesto di esecuzione e stabilisce un collegamento tra il nuovo contesto di esecuzione e l'ambiente lessicale dell'oggetto funzione. Lo fa copiando il [[Environment]]valore sull'oggetto funzione, in un riferimento esterno campo di nell'ambiente lessicale del nuovo contesto di esecuzione.
Si noti che questo collegamento tra il nuovo contesto di esecuzione e l'ambiente lessicale dell'oggetto funzione è chiamato chiusura .
Pertanto, in JavaScript, l'ambito viene implementato tramite ambienti lessicali collegati tra loro in una "catena" da riferimenti esterni. Questa catena di ambienti lessicali è chiamata catena dell'ambito e la risoluzione dell'identificatore si verifica cercando nella catena un identificatore corrispondente.
Per saperne di più .
