Logo Media Nauka

Facebook

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.







Polecamy w naszym sklepie

laboratorium w szufladzie Modelarstwo i robotyka
Kolorowe skarpetki - football piłka nożna
Kolorowe skarpetki urodzinowe
Mapa świata Puzzle
kolorowe skarpetki góra lodowa
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2021 r.