Kurs obiektowego JavaScript (11)

Autor: Damian Chodorek • Opublikowany: 27 września 2014 • Ostatnia aktualizacja: 29 marca 2016 • Kategoria: javascript, kursy

Zmienne globalne. Nietypowy zakres zmiennych lokalnych.

Zrozumienie zakresu zmiennych jest szczególnie ważne w przypadku JS. W tym dziwnym języku zmienne nie są zdefiniowane w zasięgu bloku kodu, ale w zasięgu funkcji. To znaczy, że zmienna zdefiniowana wewnątrz funkcji jest niewidoczna na zewnątrz. Z drugiej strony każda zmienna zdefiniowana wewnątrz bloku jak if lub for, jest widoczna poza nim.

Innymi słowy:

  • zmienna globalna – jest zdefiniowana w dowolnym miejscu poza funkcją,
  • zmienna lokalna – jest zdefiniowana wewnątrz funkcji,
  • kod wewnątrz funkcji ma dostęp do wszystkich zmiennych globalnych oraz własnych lokalnych
{
  var global=124;
}

function f(){
  var local=1;

  return global;
}

f();  //124
global;  //124

local; //BŁĄD

Ważne jest również zapamiętanie, że słówko kluczowe var użyte wewnątrz funkcji sprawia, że zmienna jest traktowana przez funkcję jako lokalna. Kiedy zostanie pominięte, funkcja spróbuje zmienną wyszukać w przestrzeni globalnej. Jeśli ją tam znajdzie to ok, jeśli nie, to nastąpi błąd.

var x=124;

function f(){
  var x=33; //funkcja widzi zmienną jako własną lokalną
  return x;
}

function f2(){
  x=88; //funkcja widzi zmienną jako globalną
  return x;
}

f(); //33
x; //124

f2(); //88
x; //88

Przydatna porada: staraj się używać jak najmniej zmiennych globalnych, korzystaj ze słówka var kiedy to tylko możliwe.

Ciekawy przypadek

Przemyśl działanie poniższego kodu.

var a=124;
function f(){
  alert(a);
  var a=1;
  alert(a);
}

f();

Prawdopodobnie spodziewasz się, iż pierwszy komunikat wyświetli 124, a drugi 1. Błąd. Pierwszy wyświetli undefined, a drugi 1. Dlaczego? Dla funkcji zakres lokalny jest dużo ważniejszy niż globalny. Lokalna zmienna przesłoni globalną o tej samej nazwie. Dla funkcji a jest więc lokalna, ale w momencie pierwszego użycia jeszcze nie zdefiniowana. Stąd wynika taki zachowanie.

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (12)

Zobacz również
Kurs obiektowego JavaScript (9)Komentowanie kodu i tworzenie dokumentacji.
Kurs obiektowego JavaScript (10)Omówienie funkcji, sposobów przekazywania parametrów oraz kilku przydatnych funkcji wbudowanych.
Kurs obiektowego JavaScript (12)Przedstawienie funkcji anonimowych i zwrotnych (callback).
Kurs obiektowego JavaScript (13)Wywołanie funkcji przy definicji, zagnieżdżanie, zwracanie i nadpisywanie funkcji.

2 komentarze

  • Andrzej napisał(a):

    Ostatni przykład „Prawdopodobnie spodziewasz się, iż pierwszy komunikat wyświetli 124”
    W ogóle się nie spodziewam, bo nie widzę nigdzie wewnątrz funkcji odwołania do zmiennej x.

  • Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany.