Widzę wielu front-end developerów, którzy nie są pewni jaki jest zakres, nawet jeśli korzystają z niego na co dzień w pracy. Postanowiłem uprościć termin „zakres” i zapewnić dobre zrozumienie tego ważnego terminu.

Zakresy

Omówimy 4 rodzaje zakresów.

Zakres lokalny

Wszelkie zmienne lub funkcje wewnątrz określonej funkcji nazywane są zasięgiem lokalnym określonej funkcji.

function localScope(){
  var name="David"; //Local scope of the function.
}

Zakres funkcji

Każda funkcja ma swój własny zakres — co to oznacza? Oznacza to, że wszystkie zmienne lub funkcje wewnątrz określonej funkcji nie są dostępne/widoczne dla funkcji zewnętrznych, są one lokalne dla funkcji.

//The variable 'name' can't be used here.
function innerScope(){
  //Start of function scope
  var name = "David";
  //Local scope.
  console.log(name); //Will print to the console "David".
  //End of function scope.
}
//The variable 'name' can't be used here.

W powyższym przykładzie widać, że zmienna name znajduje się w zakresie funkcji. Zmienna name jest dostępna tylko z samej funkcji i nie jest widoczna dla innych funkcji na zewnątrz, na przykład:

function innerScope(){ 
  var name = "David";
}
console.log(name); //Error, Uncaught ReferenceError: name is not defined

Wykonując console.log(name), otrzymamy błąd Uncaught ReferenceError: name is not defined. Dzieje się tak, ponieważ zmienna name nie znajduje się w zakresie funkcji.

Zakres globalny

Ten typ zakresu ma miejsce wtedy, gdy zmienne są deklarowane poza jakąkolwiek funkcją. W ten sposób dowolna funkcja może używać tej zmiennej. To właśnie sprawia, że ​​takie zmienne są obecne w Zakresie globalnym.

Gdy zmienna jest globalna, możesz jej użyć w dowolnym miejscu kodu.

var name="David"; //Global scope.
//The 'name' variable can be used here.
function printNameFromGlobalScope(){
  console.log(name); //Will print to the console "David".
}
//The 'name' variable can be used here.

Jak widać na powyższym przykładzie zmienna name jest zadeklarowana poza funkcją printNameFromGlobalScope(), więc mamy do niej dostęp nawet jeśli nie jest zadeklarowana wewnątrz funkcji. Jest to możliwe, ponieważ zostało to zadeklarowane w zasięgu globalnym.

Zaawansowana wskazówka

Jeśli zmienna lokalna i zmienna globalna mają tę samą nazwę, to nie będą się wzajemnie zastępować.

var name="David"; //Global scope.
function printName(){
  var name="Arik"; //Local scope.
  console.log(name); //Will print to the console "Arik".
}
console.log(name); //Will print to the console "David".

Automatycznie globalny

Ostatni typ zakresu, przez który przejdziemy, jest automatycznie globalny.

Automatycznie zasięg globalny ma miejsce, gdy następuje wywołanie funkcji zawierającej przypisanie do zmiennej, która nigdy nie została zadeklarowana w określonej funkcji.

function print automaticallyGlobalName(){
  name="David"; //No let, var or const before assignment a value.
  console.log(name); //Will print to the console "David".
}
automaticallyGlobalName();
console.log(name); //Will print to the console "David".

Zwróć uwagę na krok w powyższym przykładowym kodzie. Najpierw deklarowana jest funkcja. Po drugie, następuje przypisanie do zmiennej, która nigdy nie została zadeklarowana. Po trzecie, nazwaliśmy tę konkretną funkcję. Na koniec drukujemy zmienną name.

Trzeci krok jest ważny, ponieważ jeśli go pominiemy, otrzymamy undefined. Dzieje się tak, ponieważ nie możemy dodać name do zasięgu globalnego, jeśli przez niego nie przejdziemy. Kiedy więc wywołujemy funkcję automaticallyGlobalName, kompilator zauważa, że ​​zmienna name nigdy nie jest zadeklarowana i dodaje ją do zasięgu globalnego.

Dziękuję za dotychczasową lekturę. Jeśli podoba Ci się tego typu treść i chcesz wesprzeć mnie jako programistę i pisarza, abym tworzył więcej takich artykułów, podpisz do Medium jako członek (subskrypcja 5 USD/miesiąc) z moim linkiem, a uzyskasz nieograniczony dostęp do wszystkiego na Medium.

To na razie tyle, mam nadzieję, że artykuł przypadł Ci do gustu.

Obserwuj mnie, aby uzyskać więcej interesujących i pomocnych artykułów.

Więcej treści na PlainEnglish.io. Zapisz się na nasz „bezpłatny cotygodniowy biuletyn”. Śledź nas na Twitterze i LinkedIn. Sprawdź nasz Discord społeczności i dołącz do naszego Kolektywu talentów.