TLDR
JavaScript a une portée et des fermetures lexicales (également appelées statiques). Cela signifie que vous pouvez déterminer la portée d'un identifiant en consultant le code source.
Les quatre champs d'application sont les suivants:
- Global - visible par tout
- Fonction - visible dans une fonction (et ses sous-fonctions et blocs)
- Bloc - visible dans un bloc (et ses sous-blocs)
- Module - visible dans un module
En dehors des cas particuliers de portée globale et de module, les variables sont déclarées à l'aide de var(portée de fonction), let(portée de bloc) et const(portée de bloc). La plupart des autres formes de déclaration d'identifiant ont une portée de bloc en mode strict.
Aperçu
La portée est la région de la base de code sur laquelle un identifiant est valide.
Un environnement lexical est un mappage entre les noms d'identifiants et les valeurs qui leur sont associées.
La portée est formée d'une imbrication liée d'environnements lexicaux, chaque niveau de l'imbrication correspondant à un environnement lexical d'un contexte d'exécution d'ancêtre.
Ces environnements lexicaux liés forment une "chaîne" de portée. La résolution de l'identifiant est le processus de recherche le long de cette chaîne d'un identifiant correspondant.
La résolution de l'identifiant ne se produit que dans une seule direction: vers l'extérieur. De cette façon, les environnements lexicaux externes ne peuvent pas "voir" dans les environnements lexicaux internes.
Il y a trois facteurs pertinents pour décider de la portée d'un identifiant dans JavaScript:
- Comment un identifiant a été déclaré
- Où un identifiant a été déclaré
- Que vous soyez en mode strict ou en mode non strict
Certaines des façons dont les identifiants peuvent être déclarés:
var, letetconst- Paramètres de fonction
- Paramètre de bloc de capture
- Déclarations de fonctions
- Expressions de fonction nommées
- Propriétés définies implicitement sur l'objet global (c'est-à-dire manquant
varen mode non strict)
import déclarationseval
Certains des identifiants d'emplacements peuvent être déclarés:
- Contexte global
- Corps de fonction
- Bloc ordinaire
- Le sommet d'une structure de contrôle (par exemple, boucle, if, while, etc.)
- Corps de la structure de contrôle
- Modules
Styles de déclaration
var
Les identificateurs déclarés à l'aide var ont une portée de fonction , sauf lorsqu'ils sont déclarés directement dans le contexte global, auquel cas ils sont ajoutés en tant que propriétés sur l'objet global et ont une portée globale. Il existe des règles distinctes pour leur utilisation dans les evalfonctions.
let et const
Les identifiants déclarés utilisant letet const ont une portée de bloc , sauf lorsqu'ils sont déclarés directement dans le contexte global, auquel cas ils ont une portée globale.
Note: let, constet var sont tous hissés . Cela signifie que leur position logique de définition est au sommet de leur portée englobante (bloc ou fonction). Cependant, les variables ont déclaré utiliser letet constne peuvent pas être lues ou affectées jusqu'à ce que le contrôle ait passé le point de déclaration dans le code source. La période intérimaire est connue comme la zone morte temporelle.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Noms des paramètres de fonction
Les noms des paramètres de fonction sont étendus au corps de la fonction. Notez qu'il y a une légère complexité à cela. Les fonctions déclarées comme arguments par défaut se ferment sur la liste des paramètres et non sur le corps de la fonction.
Déclarations de fonctions
Les déclarations de fonctions ont une portée de bloc en mode strict et une portée de fonction en mode non strict. Remarque: le mode non strict est un ensemble compliqué de règles émergentes basées sur les implémentations historiques originales de différents navigateurs.
Expressions de fonction nommées
Les expressions de fonction nommées sont limitées à elles-mêmes (par exemple, à des fins de récursivité).
Propriétés définies implicitement sur l'objet global
En mode non strict, les propriétés définies implicitement sur l'objet global ont une portée globale, car l'objet global se trouve en haut de la chaîne de portée. En mode strict, ceux-ci ne sont pas autorisés.
eval
Dans les evalchaînes, les variables déclarées à l'aide varseront placées dans la portée actuelle ou, si elles evalsont utilisées indirectement, comme propriétés sur l'objet global.
Exemples
Ce qui suit lancera une ReferenceError parce que les noms x, yet zn'ont aucune signification en dehors de la fonction 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)
Ce qui suit lancera une ReferenceError pour yet z, mais pas pour x, car la visibilité de xn'est pas limitée par le bloc. Les blocs qui définissent les corps des structures de contrôle comme if, foret while, se comportent de manière similaire.
{
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
Dans ce qui suit, xest visible en dehors de la boucle car vara une portée de fonction:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... à cause de ce comportement, vous devez faire attention à ne pas fermer les variables déclarées à l'aide varde boucles in. Il n'y a qu'une seule instance de variable xdéclarée ici, et elle se trouve logiquement en dehors de la boucle.
Les impressions suivantes 5, cinq fois, puis 5une sixième fois pour l' console.logextérieur de la boucle:
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
Ce qui suit s'imprime undefinedcar xest de portée bloc. Les rappels sont exécutés un par un de manière asynchrone. Nouveau comportement pour des letmoyens variables que chaque fonction anonyme fermée sur une autre variable nommée x(contrairement à il l' aurait fait avec var), et ainsi entiers à 0travers 4sont imprimés .:
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
Ce qui suit ne lancera PAS un ReferenceErrorcar la visibilité de xn'est pas limitée par le bloc; il s'imprimera cependant undefinedcar la variable n'a pas été initialisée (à cause de l' ifinstruction).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Une variable déclarée en haut d'une forboucle à l'aide letest portée au corps de la boucle:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
Ce qui suit lancera un ReferenceErrorcar la visibilité de xest limitée par le bloc:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Les variables déclarées en utilisant var, letou constsont toutes étendues aux modules:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
Ce qui suit déclarera une propriété sur l'objet global, car les variables déclarées en utilisant vardans le contexte global, sont ajoutées en tant que propriétés à l'objet global:
var x = 1
console.log(window.hasOwnProperty('x')) // true
letet constdans le contexte global n'ajoutent pas de propriétés à l'objet global, mais ont toujours une portée globale:
let x = 1
console.log(window.hasOwnProperty('x')) // false
Les paramètres de fonction peuvent être considérés comme déclarés dans le corps de la fonction:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Les paramètres du bloc de capture sont limités au corps du bloc de capture:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
Les expressions de fonction nommées sont limitées à l'expression elle-même:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
En mode non strict, les propriétés définies implicitement sur l'objet global ont une portée globale. En mode strict, vous obtenez une erreur.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
En mode non strict, les déclarations de fonction ont une portée de fonction. En mode strict, ils ont une portée de bloc.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Comment ça marche sous le capot
La portée est définie comme la région lexicale du code sur laquelle un identifiant est valide.
En JavaScript, chaque objet-fonction a une [[Environment]]référence cachée qui est une référence à l' environnement lexical du contexte d'exécution (cadre de pile) dans lequel il a été créé.
Lorsque vous appelez une fonction, la [[Call]]méthode cachée est appelée. Cette méthode crée un nouveau contexte d'exécution et établit un lien entre le nouveau contexte d'exécution et l'environnement lexical de l'objet-fonction. Il le fait en copiant la [[Environment]]valeur sur l'objet-fonction, dans un champ de référence externe sur l'environnement lexical du nouveau contexte d'exécution.
Notez que ce lien entre le nouveau contexte d'exécution et l'environnement lexical de l'objet fonction est appelé fermeture .
Ainsi, en JavaScript, la portée est implémentée via des environnements lexicaux reliés entre eux dans une "chaîne" par des références externes. Cette chaîne d'environnements lexicaux est appelée la chaîne de portée, et la résolution de l'identifiant se produit en recherchant dans la chaîne un identifiant correspondant.
Apprenez-en plus .
