Logo Media Nauka

Obiekty w JavaScript

W języku JavaScript możemy tworzyć własne obiekty, przypisywać im właściwości oraz metody. W tym artykule zajmiemy się tym właśnie zagadnieniem.

Spis treści

Tworzenie własnego obiektu

Obiekt jest to, jak pisałem we wstępie, coś namacalnego co ma właściwości i metody (tak na prawdę jest to instancja klasy, ale o tym przy innej okazji). Zobaczmy to na przykładzie. Wyobraźmy sobie lokomotywę...

Lokomotywa będzie naszym obiektem. Nasz obiekt może mieć pewne właściwości, jak: ciężar, długość, szerokość, wysokość, maksymalną prędkość, typ, rok produkcji i wiele innych.

Właściwości te możemy zdefiniować, odczytywać i zapisywać.

Obiekt to jest konkretny egzemplarz o danych właściwościach (klasa to bardziej ogólna definicja "lokomotywy").

Nasz obiekt może mieć też metody (funkcje, czyli czynności jakie wykonuje). Można sobie wyobrazić następujące metody dla lokomotywy: buchanie parą, jechanie, gwizd itp. w JavaScript są to czynności, które wstawiamy do funkcji o nazwie naszej metody w deklaracji obiektu.

Przykład 1 - Deklaracja obiektu

<script>
var lokomotywa = {
 
 ciezar : 1000,
 dlugosc: 20,
 szerokosc: 2,
 wysokosc: 3,
 max_predkosc: 50,
 typ: "klasyczna",
 rok_produkcji: 1850,
 
 gwzid : function() {
 alert('Zagwizdałam, FIUUUU!'); 
 }
}
</script>

Notacja kropkowa

Zdefiniowaliśmy sobie powyżej obiekt lokomotywa z metodą gwizd. Teraz pokażę jak się odwoływać do właściwości i metod. Używamy notacji kropkowej, to znaczy, że podajemy zawsze nazwę naszego obiektu, a po kropce nazwę właściwości lub metody (robimy to już od początku kursu). Zatem aby odczytać ciężar naszej lokomotywy musimy użyć zapisu: lokomotywa.ciezar, a żeby wywołać metodę gwizd, postępujemy podobnie, tylko z nawiasami, w których możemy podawać parametry, o ile są w definicji metody: lokomotywa.gwizd().

Przykład 2 - Odczyt właściwości oraz metod.

Poniższy skrypt bazuje na definicji obiektu z przykładu 1 i pokazuje jak odwoływać się do właściwości i metod.

W pierwszej linijce odczytujemy właściwości typ i rok_produkcji obiektu lokomotywa i wyświetlamy je w oknie alertu.

W drugiej linijce kodu skryptu wywołujemy metodę gwizd(), a ona sama już wyświetla odpowiednie okienko (podejmuje odpowiednie czynności).

W trzeciej linijce kodu zmieniamy wartość właściwości rok produkcji, tylko p to, aby pokazać jak się to robi.

<script>
 alert("Moja lokomotywa jest "+lokomotywa.typ +" z roku "+lokomotywa.rok_produkcji);
 lokomotywa.gwizd();
 lokomotywa.rok_produkcji = 1920;
</script>
Lupa


Usuwanie właściwości obiektu - delete

Aby usunąć właściwość obiektu należy użyć metody delete w formacie:

delete obiekt.właściwość

This

Słowo kluczowe this oznacza kontekst, w którym stosowane jest dane słowo kluczowe. Słowo to wykorzystujemy, gdy chcemy wywołać z wnętrza obiektu inne metody lub właściwości tego obiektu.

Przykład 2 - This

Napiszemy skrypt, w którym zdefiniujemy obiekt szescian, który będzie miał właściwość krawedz i metodę objetosc(), która zwraca obliczoną objętość naszego obiektu. Dzięki słowu kluczowemu this możemy się odwołać do właściwości krawędź, gdyż w tym przypadku obiekt this jest równoznaczny z obiektem szescian.

<script>
var szescian = {
 krawedz: 1,
 objetosc : function() {
   return this.krawedz * this.krawedz * this.krawedz;
 }
}

szescian.krawedz = 20;
alert(szescian.objetosc());
</script>
Lupa


Tworzenie obiektów za pomocą konstruktora

Niestety w JavaScript nie możemy zdefiniować klasy za pomocą konstruktora, ale możemy sobie z tym jakoś poradzić, pisząc własną funkcję. Po co taki zabieg? A jeżeli chcielibyśmy zadeklarować 100 lokomotyw o różnych parametrach? Nasz funkcja będzie rodzajem szablonu lokomotywy, a w oparciu o nią, będziemy deklarować różne obiekty - egzemplarze (instancje) i to każdy o innych właściwościach. Zobaczmy to na przykładzie (ograniczymy się do dwóch właściwości).

Przykład 3 - Deklaracja obiektu z użyciem konstruktora

Deklaracja obiektów następuje w 5. i 6. linijce skryptu z ożyciem słowa kluczowego new. Natomiast funkcja Lokomotywa jest naszym szablonem dla obiektów ciuchcia 1 i 2.

<script>
function Lokomotywa(rok, typ) {
  this.rok = rok;
this.typ = typ;
} var ciuchcia1 = new Lokomotywa(1999, 'nowoczesna'); var ciuchcia2 = new Lokomotywa(1920, 'klasyczna'); alert(ciuchcia1.typ + ', ' + ciuchcia1.rok); alert(ciuchcia2.typ + ', ' + ciuchcia2.rok); </script>
Lupa


Prototype

Aby zdefiniować metodę dla naszej klasy możemy to zrobić poprzez przypisanie funkcji do jakiejś właściwości obiektu protoype naszej klasy. Nazwa właściwości staje się nazwą metody.

Przykład 4 - dodawanie metod do klasy za pomocą prototype

<script>
function MojaLokomotywa(typ, rok) {
  this.typ = typ;
  this.rok = rok;
}

MojaLokomotywa.prototype.gwizd = function() {
alert("FIUUU... Jestem lokomotywa " + this.typ +', '+this.rok);
};
var person1 = new MojaLokomotywa("klasyczna", 1910);
var person2 = new MojaLokomotywa("nowoczesna", 1980);
person1.gwizd(); 
person2.gwizd(); 
</script>
Lupa


© medianauka.pl, 2016-11-12, ART-3291





Inne zagadnienia z tej lekcji

Moduły w JavaScriptModuły w JavaScript
moduły w JavaScript to obowiązkowy element każdej większej aplikacji. Dzięki nim można utrzymać kod w należytym porządku. Moduły chronią przed błędami, które wynikają z przypadkowego nadpisywania wartości zmiennych.
Zdarzenia w JavaScriptZdarzenia w JavaScript
Zdarzenia w JavaScript to pewne akcje, które są podejmowane w przeglądarce, w wyniku zaistnienia danej sytuacji, na przykład naciśnięcia klawisza na klawiaturze, myszce, najechanie kursorem na dany element strony, załadowanie strony internetowej.
Obsługa zdarzeń w JavaScriptObsługa zdarzeń w JavaScript
Jak obsłużyć zdarzenia w JavaScript? W ostatnim artykule zostały omówione zdarzenia predefiniowane w JavaScript, czyli zdarzenia wbudowane w JavaScript. Czas, aby nauczyć się ich używać. Jest kilka sposobów obsługi zdarzeń.
Obsługa myszy w JavaScriptObsługa myszy w JavaScript
Jak obsłużyć zdarzenia myszy w JavaScript? W momencie naciśnięcia klawisza myszy wyzwalane jest zdarzenie MouseDown, w momencie puszczenia - MouseUp, a jeżeli dla obiektu silnik wykryje jedno zdarzenie Mousedown i MouseUp, wywołane zostanie zdarzenie Click.



© Media Nauka 2008-2018 r.