TLDR
JavaScript ma leksykalny (zwany także statycznym) zakres i zamknięcie. Oznacza to, że możesz określić zakres identyfikatora, patrząc na kod źródłowy.
Cztery zakresy to:
- Globalny - widoczny przez wszystko
- Funkcja - widoczna w obrębie funkcji (oraz jej podfunkcji i bloków)
- Blok - widoczny w bloku (i jego podblokach)
- Moduł - widoczny w module
Poza specjalnymi przypadkami zakresu globalnego i zakresu modułu, zmienne deklarowane są za pomocą var(zakres funkcji), let(zakres bloków) i const(zakres bloków). Większość innych form deklaracji identyfikatora ma zakres blokowy w trybie ścisłym.
Przegląd
Zakres to region bazy kodowej, dla którego ważny jest identyfikator.
Środowisko leksykalne to odwzorowanie między nazwami identyfikatorów a powiązanymi z nimi wartościami.
Zakres jest utworzony z połączonego zagnieżdżenia środowisk leksykalnych, przy czym każdy poziom w zagnieżdżeniu odpowiada środowisku leksykalnemu kontekstu wykonania przodka.
Te połączone środowiska leksykalne tworzą „łańcuch” zakresu. Rozpoznawanie identyfikatora to proces wyszukiwania w tym łańcuchu pasującego identyfikatora.
Rozpoznawanie identyfikatora odbywa się tylko w jednym kierunku: na zewnątrz. W ten sposób zewnętrzne środowiska leksykalne nie mogą „widzieć” wewnętrznych środowisk leksykalnych.
Istnieją trzy istotne czynniki w podejmowaniu decyzji zakres danego identyfikatora w JavaScript:
- Jak zadeklarowano identyfikator
- Gdzie zadeklarowano identyfikator
- Niezależnie od tego, czy jesteś w trybie ścisłym, czy nie ścisłym
Niektóre sposoby deklarowania identyfikatorów:
var, letaconst- Parametry funkcji
- Parametr bloku połowu
- Deklaracje funkcji
- Nazwane wyrażenia funkcyjne
- Niejawnie zdefiniowane właściwości obiektu globalnego (tj. Brak
varw trybie nieokreślonym)
import sprawozdaniaeval
Niektóre identyfikatory lokalizacji można zadeklarować:
- Kontekst globalny
- Ciało funkcyjne
- Zwykły blok
- Góra struktury kontrolnej (np. Pętla, jeśli, podczas itp.)
- Korpus struktury kontrolnej
- Moduły
Style deklaracji
var
Identyfikatory zadeklarowane za pomocą var mają zakres funkcji , oprócz tego, gdy są zadeklarowane bezpośrednio w kontekście globalnym, w którym to przypadku są dodawane jako właściwości do obiektu globalnego i mają zasięg globalny. Istnieją osobne zasady ich używania w evalfunkcjach.
let i const
Identyfikatory zadeklarowane przy użyciu leti const mają zasięg blokowy , z wyjątkiem przypadków, gdy są zadeklarowane bezpośrednio w kontekście globalnym, w którym to przypadku mają zasięg globalny.
Uwaga: let, consti var wszyscy podnieśli . Oznacza to, że ich logiczna pozycja definicji jest górą ich obejmującego zakresu (bloku lub funkcji). Jednak zmienne zadeklarowano jako używane leti constnie można ich odczytać ani przypisać, dopóki kontrola nie przekroczy punktu deklaracji w kodzie źródłowym. Okres przejściowy jest znany jako czasowa martwa strefa.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Nazwy parametrów funkcji
Nazwy parametrów funkcji mają zasięg do treści funkcji. Zauważ, że jest to nieco skomplikowane. Funkcje zadeklarowane jako domyślne argumenty zamykają listę parametrów , a nie treść funkcji.
Deklaracje funkcji
Deklaracje funkcji mają zakres blokowy w trybie ścisłym, a zakres funkcji w trybie niewymaganym. Uwaga: tryb nie ścisły to skomplikowany zestaw nowych reguł opartych na dziwacznych historycznych implementacjach różnych przeglądarek.
Nazwane wyrażenia funkcyjne
Nazwane wyrażenia funkcyjne mają zasięg do siebie (np. W celu rekurencji).
Niejawnie zdefiniowane właściwości obiektu globalnego
W trybie nieokreślonym niejawnie zdefiniowane właściwości obiektu globalnego mają zasięg globalny, ponieważ obiekt globalny znajduje się na początku łańcucha zasięgu. W trybie ścisłym są one niedozwolone.
eval
W evalciągach zmiennych zadeklarowane za pomocą varzostaną umieszczone w bieżącym zakresie lub, jeśli evalsą używane pośrednio, jako właściwości obiektu globalnego.
Przykłady
Poniższa rzuci ReferenceError ponieważ nazwy x, ya znie mają żadnego znaczenia poza funkcją 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)
Poniższe spowoduje zgłoszenie błędu ReferenceError dla yi z, ale nie dla x, ponieważ widoczność xnie jest ograniczona przez blok. Bloki, które definiują ciała struktur kontrolnych if, fori whilezachowują się podobnie.
{
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
Poniżej xwidoczny jest poza pętlą, ponieważ varma zasięg funkcji:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... z powodu tego zachowania należy zachować ostrożność przy zamykaniu zmiennych zadeklarowanych za pomocą varpętli. Jest xtu zadeklarowana tylko jedna instancja zmiennej , która logicznie leży poza pętlą.
Następujące wydruki 5, pięć razy, a następnie drukowane 5po raz szósty na console.logzewnątrz pętli:
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
Następujące drukuje undefinedponieważ xjest bloku o zakresie. Oddzwaniania są uruchamiane jeden po drugim asynchronicznie. Nowe zachowanie dla letzmiennych oznacza, że każda funkcja anonimowa zamknięty przez inną zmienną o nazwie x(inaczej byłoby to zrobić z var), a więc całkowite 0poprzez 4drukowane .:
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
Poniższe NIE rzuci a, ReferenceErrorponieważ widoczność xnie jest ograniczona przez blok; zostanie jednak wydrukowane, undefinedponieważ zmienna nie została zainicjowana (z powodu ifinstrukcji).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Zmienna zadeklarowana w górnej części forpętli za pomocą letjest kierowana do korpusu pętli:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
Następujące wyrzuci a, ReferenceErrorponieważ widoczność xjest ograniczona przez blok:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Zmienne zadeklarowane za pomocą var, letlub constsą zawężona do modułów:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
Poniższe elementy zadeklarują właściwość obiektu globalnego, ponieważ zmienne zadeklarowane przy użyciu varw kontekście globalnym są dodawane jako właściwości do obiektu globalnego:
var x = 1
console.log(window.hasOwnProperty('x')) // true
leta constw kontekście globalnym nie dodawaj właściwości do obiektu globalnego, ale nadal mają zasięg globalny:
let x = 1
console.log(window.hasOwnProperty('x')) // false
Parametry funkcji można uznać za zadeklarowane w treści funkcji:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Parametry bloku połowowego mają zasięg do korpusu bloku połowowego:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
Nazwane wyrażenia funkcyjne mają zasięg tylko do samego wyrażenia:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
W trybie nieokreślonym niejawnie zdefiniowane właściwości obiektu globalnego mają zasięg globalny. W trybie ścisłym pojawia się błąd.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
W trybie ścisłym deklaracje funkcji mają zakres funkcji. W trybie ścisłym mają zakres blokowy.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Jak to działa pod maską
Zakres jest zdefiniowany jako leksykalny region kodu, dla którego ważny jest identyfikator.
W JavaScript każda funkcja-obiekt ma ukryte [[Environment]]odniesienia, który stanowi odniesienie dla środowiska słownikowego z kontekstu wykonania (ramka stosu), w którym został utworzony.
Po wywołaniu funkcji wywoływana jest [[Call]]metoda ukryta . Ta metoda tworzy nowy kontekst wykonania i ustanawia połączenie między nowym kontekstem wykonania a środowiskiem leksykalnym obiektu funkcji. Robi to, kopiując [[Environment]]wartość na obiekcie funkcji do zewnętrznego pola referencyjnego w środowisku leksykalnym nowego kontekstu wykonania.
Zauważ, że to połączenie między nowym kontekstem wykonania a środowiskiem leksykalnym obiektu funkcji nazywa się zamknięciem .
Zatem w JavaScript zakres jest implementowany przez środowiska leksykalne połączone ze sobą w „łańcuch” zewnętrznymi odnośnikami. Ten łańcuch środowisk leksykalnych nazywany jest łańcuchem zasięgu, a rozpoznawanie identyfikatora następuje poprzez wyszukiwanie łańcucha w celu znalezienia pasującego identyfikatora.
Dowiedz się więcej .
