Kurs obiektowego JavaScript (15)

Autor: Damian Chodorek • Opublikowany: 1 października 2014 • Ostatnia aktualizacja: 9 lipca 2015 • Kategoria: javascript, kursy

Wstęp do obiektów. Omówienie pól i metod. Konstruktory i słowo kluczowe new.

Opanowałeś typy prymitywne w JS, funkcje i tablice. Czas na kolejny etap, którym są obiekty.

Jak pamiętasz, tablica to uporządkowany zbiór wartości, różnych lub tych samych typów. Każda wartość ma swój indeks (numer porządkowy), dzięki któremu możesz się do niej odnieść. Indeks możemy nazwać kluczem, pod którym kryje się dana wartość.

var arr=['a', 'b', 'c', 'd'];

//pod kluczem 0 jest wartość 'a'
arr[0]; //'a'

//pod kluczem 3 jest wartość 'd'
arr[3]; //'d'

Obiekt w JavaScript jest czymś podobnym do tablicy. Różnica polega na tym, że Ty tworzysz klucze. Nie jesteś ograniczony wyłącznie do kluczy numerycznych. Poniżej przykład definicji obiektu w JS.

var miasto={
  nazwa: 'Kraków',
  wojewodztwo: 'małopolskie'
};

Oto jakie wnioski, możemy wyciągnąć z powyższej konstrukcji:

  • zmienna, która przechowuje obiekt, nazywa się miasto,
  • zamiast nawiasów [], przy pomocy których tworzysz tablicę, użyto nawiasów {},
  • elementy składowe obiektu (pola) rozdzielone są przecinkiem,
  • pary klucz-wartość są rozdzielone dwukropkiem klucz: wartosc.

Nazwy kluczy mogą być umieszczone w "".

var o={k: 1};
var o2={"k": 1};
var o3={'k': 1};

Dobrą praktyką jest nie umieszczać nazw pól w "", poza kilkoma wyjątkami:

  • jeśli nazwa pola jest zarezerwowanym dla JS słowem kluczowym,
  • jeśli nazwa pola jest niedozwoloną nazwą zmiennej (przykładowo zawiera spacje lub rozpoczyna się od cyfry).

Ogólnie powinno się unikać powyższych sytuacji, ale oczywiście czasem się nie da.

Obiekty, tak jak tablice, mogą posiadać funkcje składowe. Nazywamy je metodami. Z punktu widzenia JS nie ma wielkiej różnicy pomiędzy zmienną lub funkcją w tablicy i w obiekcie. Używa się natomiast innych nazw, jest to przyzwyczajenie z innych języków programowania. Poniżej przykład obiektu zawierającego metodę.

var pies={
  imie: 'Azor',
  szczekaj: function(){
    alert('Woof!');
    alert('Woof!');
  }
};

Tablice indeksowane i asocjacyjne w JS

W innych językach programowania można się spotkać ze zwykłymi tablicami indeksowanymi oraz z tablicami asocjacyjnymi, w których kluczem jest wartość tekstowa. W JS jeśli chcesz uzyskać tablicę asocjacyjną należy użyć do tego celu obiektu.

Dostęp do elementów obiektu

Wiesz już jak zdefiniować obiekt, stworzyć wewnątrz niego elementy i nadać im wartości. Pozostaje kwestia dostępu do poszczególnych elementów. Możliwości są dwie: operator kropki . lub nawiasów [].

Operator kropki jest najpopularniejszym sposobem dostępu, ale w niektórych przypadkach nie można go użyć. Wtedy należy skorzystać z nawiasów. Spójrz na poniższy obiekt.

var pies={
  imie: "Azor",
  'postrasz': function(){ alert("Wrrr!"); },
  "daj glos": function(){ alert("Woof!"); }
};

Jeśli element jest poprawną nazwą zmiennej to można się do niego odnieść poprzez operator kropki. Niezależnie czy została zdefiniowana w "" czy nie.

pies.imie; //Azor
pies.postrasz(); //komunikat: "Wrrr!"

Ten sam efekt można uzyskać korzystając z nawiasów, umieszczając w nich nazwę elementu zawartą w znaku cudzysłowu.

pies["imie"]; //Azor
pies["postrasz"](); //komunikat: "Wrrr!"

Niestety, element "daj glos" zawiera spację. Nie można skorzystać z operatora kropki i jedyną możliwością są nawiasy.

pies["daj glos"](); //komunikat: "Woof!"

Nic nie stoi na przeszkodzie temu, aby obiekt zawierał inny obiekt.

var ksiazka={
  tytul: 'Ręka mistrza',
  premiera: 2008,
  autor: {
    imie: 'Stephen',
    nazwisko: 'King'
  }
};

ksiazka.premiera; //2008
ksiazka.autor.imie; //'Stephen'

//poniższy sposób możliwy TYLKO z nawiasami
var klucz1='autor';
var klucz2='nazwisko';
ksiazka[klucz1][klucz2]; //King

Jak zapewne zauważyłeś, aby dostać się do elementów obiektu w obiekcie, należy jeszcze raz użyć operatora kropki lub nawiasów.

Edycja pól i metod

W JS bez problemów możesz dodawać lub usuwać pola i metody.

var pies={}; //pusty obiekt
//gdy pola nie istnieją:
typeof pies.imie; //"undefined"

//dodajemy pole i metodę
pies.imie="Azor"; //dodano pole imie o wartości "Azor"
pies.szczekaj=function(){ alert("Woof!"); };

typeof pies.imie; //"string"
pies.szczekaj(); //komunikat: "Woof!"

//kasujemy pole:
delete pies.imie;
typeof pies.imie; //"undefined"

Wartość this

Chcemy utworzyć metodę, która pozwoli obiektowi pies wymówić swoje imię. Możemy to zrobić jak poniżej.

var pies={
  imie: "Azor",
  powiedzImie: function(){
    alert("Mam na imię "+pies.imie);
  }
}

Jak więc widzisz, aby funkcja powiedzImie() pobrała imię psa ze zmiennej, należy odnieść się do niej po nazwie obiektu. Jest jeszcze inny, preferowany sposób. Polega na użyciu wartości this.

var pies={
  imie: "Azor",
  powiedzImie: function(){
    alert("Mam na imię "+this.imie);
  }
}

pies.powiedzImie();

Wartość this oznacza dosłownie ten obiekt. Dzięki temu nie musisz znać nazwy zmiennej, do której przypisano obiekt. Możesz wewnątrz niego odnosić się do pól i metod, korzystając z this.

Konstruktor

Być może jest to pojęcie, które znasz z innych języków programowania. Przykładowo w Java lub C++, konstruktor to specjalna funkcja, która jest wywoływana w momencie tworzenia obiektu. W JS jest podobnie, ale trochę inaczej. Tutaj nie ma klas, a więc nie tworzymy ich instancji. Zamiast tego możemy utworzyć funkcję, na podstawie której wyprodukujemy kolejne obiekty.

Tworzenie obiektu na podstawie funkcji wymaga użycia specjalnego słowa kluczowego new. Przykład poniżej.

function Pies(){
  this.imie="Azor";
}

pies=new Pies();
pies.imie; //Azor

Jaki z tego pożytek? Konstruktory mogą przyjmować parametry, a więc ustawiać wartości początkowe obiektu, w momencie jego tworzenia. Dzięki temu, każdy obiekt stworzony na podstawie funkcji Pies() może mieć inną wartość pola imie.

function Pies(imie){
  this.imie=imie;
  this.powiedzImie=function(){
    alert("Mam na imie "+this.imie);
  };
}

azor=new Pies("Azor");
rex=new Pies("Rex");

azor.powiedzImie(); //komunikat: "Mam na imię Azor";
rex.powiedzImie(); //komunikat: "Mam na imię Rex";

Zauważ, że w ciele funkcji nie korzystamy z dwukropka, ale z operatora przypisania. To dlatego, że nie definiujemy obiektu, a funkcję.

Co gdy zapomnisz o new?

Funkcję będącą konstruktorem powinieneś nazywać z dużej litery, aby odróżniała się od pozostałych funkcji. Co się stanie gdy zapomnisz słowa kluczowego new? Funkcja wywoła się jak każda inna oraz zwróci wartość. Jak pamiętasz, jeśli nie ma nigdzie słowa return, to niejawnie zostanie zwrócona wartość undefined.

var azor=Pies(); //brak new

typeof azor; //undefined

Do czego więc odnosi się this użyte w funkcji, jeśli zabraknie new? Do obiektu globalnego, ale o tym w kolejnej lekcji.

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

Kurs obiektowego JavaScript (16)

Zobacz również
Kurs obiektowego JavaScript (13)Wywołanie funkcji przy definicji, zagnieżdżanie, zwracanie i nadpisywanie funkcji.
Kurs obiektowego JavaScript (14)Łańcuch zasięgu i jego przerywanie. Gettery, settery.
Kurs obiektowego JavaScript (16)Obiekt globalny. Pole constructor. Operator instanceof. Przekazywanie i porównywanie obiektów.
Kurs obiektowego JavaScript (17)Obiekt console i jego metody.

1 komentarz

  • Megi napisał(a):

    Jestem na początku nauki JavaScript. Materiały, które przedstawiasz są napisane w bardzo zrozumiałym języku. Przykłady pomagają dokładnie zrozumieć znaczenie danych funkcji, znaków itp.

  • Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany.