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
Notacja kropkowa
Usuwanie właściwości obiektu
This
Tworzenie obiektu za pomoca konstruktora
Prototype

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>

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>

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>

Prototype

Aby zdefiniować metodę dla naszej klasy możemy to zrobić poprzez przypisanie funkcji do jakiejś właściwości obiektu prototype 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>

Inne zagadnienia z tej lekcji

Moduły w JavaScript

Zdarzenia w JavaScript

Obsługa zdarzeń w JavaScript

Obsługa myszy w JavaScript