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:

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

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