Kurs JavaScript - Obiekty  

Autor: Bożena Jurczyk

Opublikowano: 2011-12-14

W języku JavaScript tablice nie są jedynymi strukturami do gromadzenia danych. Jeżeli chcesz opisać, za pomocą zmiennych, pewną abstrakcję ze świata rzeczywistego, możesz w tym celu wykorzystać obiekt. Zmienne takiego obiektu nazywać będziesz polami obiektu. Oprócz poznanych do tej pory zmiennych o podstawowych typach, możesz także określić zachowanie obiektu poprzez funkcje, o których więcej dowiesz się w kolejnym samouczku - Funkcje.

Wykonanie zadań nie wymaga dodatkowej wiedzy.

Po wykonaniu zadań nauczysz się:

• jak tworzyć obiekty w języku JavaScript.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to sprawdź w encyklopedii zagadnienie pod hasłem Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, w jaki sposób posługiwać się obiektami w języku JavaScript.

Obiekty

Tworzenie obiektów w JavaScript jest podobne do tworzenia tablic asocjacyjnych. W określonych kluczach zapisywane są określone wartości o dowolnym typie.

1. Otwórz stronę internetową jTest.html, wciśnij przycisk F12 lub wybierz Tools­>F12 developer tools.
2. W oknie kliknij na zakładkę Script (oznaczoną 1 na Rys.1.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

var person = new Object();
person["name"] = "Jan Kowalski";
person.birthYear = 1990;
person.getAge = function(){
    return new Date().getFullYear() - this.birthYear;
};

alert("Name: " + person["name"] + "\nAge: " + person.getAge());

Rys. 1. Narzędzia programistyczne do języka JavaScript w Internet Explorer 9.

1. Wciśnij Enter
2. Na ekranie powinien pojawić się alert:

 

Informacja

Zwróć uwagę na to, że zapisanie wartości pod nieistniejące klucze nie powoduje błędu. Dodaje się wtedy do obiektu nowe pole o takiej samej nazwie jak nazwa klucza. W zadaniu utworzony został obiekt o nazwie person, który posiada dwa pola: name oraz birthYear oraz jedną metodę getAge(), zwracającą wiek osoby. Klucze mogą być dodawane, podobnie jak w tablicy asocjacyjnej (object["key"] = value), lub po znaku "." (notacja zbliżona do programowania obiektowego –object.key = value).

Obiekty – skrócona notacja

Istnieje jeszcze inny sposób na tworzenie nowego obiektu w JavaScript. Skrócona notacja zbliżona jest do formatu JSON (JavaScript Object Notation). W kolejnym zadaniu zmodyfikujesz wcześniejszy kod.

1. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:

var person = {
name : "Jan Kowalski",
birthYear : 1990,
getAge : function(){ return new Date().getFullYear() - this.birthYear;} 
};
alert("Name: " + person.name + "\nAge: " + person.getAge());

2. Wciśnij Enter.
3. W wyniku powinien pojawić się alert identyczny do tego z poprzedniego zadania.

Informacja

Dużą zaletą skróconej notacji jest uproszczenie kodu, czyli możliwość deklaracji całej struktury obiektu w szybki sposób (ostatecznie można tego dokonać nawet w jednej linii). Nie ma potrzeby wywoływania konstruktora bezpośrednio (ciekawym sposobem na utworzenie pustego obiektu jest wykonanie krótkiej instrukcji var o = {}). Łącząc kilka zmiennych w jeden obiekt, jednocześnie zmniejszasz ilość zmiennych globalnych, co przyczynia się do bezpieczniejszej interakcji Twojego programu z innymi aplikacjami. Zmniejsza to bowiem ryzyko nadpisywania Twoich wartości.

Podsumowanie

W tym samouczku nauczyłeś się, w jaki sposób tworzyć obiekty w JavaScript. Poznałeś dwa sposoby: tradycyjny oraz formę skróconą.

W kolejnym samouczku nauczysz się, jak tworzyć i używać funkcji w JavaScript.

 

---