Przechodzimy do następnego typu danych. W języku JavaScript oprócz typu boolowskiego, niezdefiniowanego, łańcuchowego i paru innych, znajdziecie też hasło "obiekt". Obiekt może się bardzo przydać do pewnych celów, które opiszę już w środku artykułu. Także klikajcie, czytajcie i wnioski wyciągajcie :D!!!
| Tweet |
OBIEKT W JĘZYKU JAVASCRIPT MOŻE BYĆ CZĘSTYM GOŚCIEM W TWOIM PROGRAMIE!
I nie ma w tym twierdzeniu ani krzty przesady. Obiekt traktujcie jako "woreczek", w którym mogą być przechowywane zarówno zmienne, jak i funkcje. Wówczas zmienne nazywa się "właściwościami", a funkcje "metodami". Stąd też stała "PI" występująca w niedawno poznanym obiekcie "Math" jest właściwością, a "log" w obiekcie "console", metodą. Metoda może być jeszcze ładniej nazwana jako "właściwość o typie funkcyjnym". To są kolejne gusta i guściki, więc przejdźmy do konkretów ;).
ZAPIS OBIEKTU W KODZIE
Obiekt w języku JavaScript rozpoznacie po klamerkach wstawionych po znaku przypisania, takich samych jak podczas definiowania bloku dla instrukcji warunkowej, pętli oraz funkcji:
const o = {};Ten obiekt jest obecnie pusty. Zobaczmy do czego jest on zdolny po poznaniu paru zasad.
WSTAWIANIE WŁAŚCIWOŚCI
Zmienna będąca częścią obiektu to właściwość (ewentualnie pole). Właściwość dodaje się poprzez wprowadzenie nazwy, znaku dwukropka i podaniu wartości:
const o = {
x: 50
};Występują dwie różnice składniowe w definicji wewnątrz obiektu. Raz, to jest dwukropek zamiast operatora przypisania, dwa to brak średnika po zakończeniu definicji właściwości! Zamiast niego musimy wstawić przecinek, jeśli planujemy dodawanie wielu właściwości (średnik dodajemy dopiero na końcu definiowania całości obiektu):
const o = {
x: 50,
y: 37
};ale po ostatnim już nie. Możecie dodać tyle właściwości ile chcecie, a także łączyć to z metodami (nagłówek niżej).
WSTAWIANIE METOD
Funkcje w obiekcie także są realne w języku JavaScript, tylko wtedy określa się je metodami. Na mocy przechowywania referencji do funkcji w zmiennej, można potraktować właściwość w taki sposób, aby była ona w rzeczywistości metodą:
const o = {
doSomething: function() {
// instrukcje
}
};a następnie wywołać ją z innego miejsca w kodzie. W JavaScript nie ma czegoś takiego jak metoda o dostępie prywatnym. W klasie jeszcze można tak zrobić, ale w obiekcie nie. Wszystko może być edytowalne na zewnątrz.
WSTAWIANIE OBIEKTU?
A żebyście wiedzieli! Obiekt w języku JavaScript ma prawo być własnością innego obiektu:
const o = {
o2: {
a: 50,
b: 35,
c: 607
}
};Trzeba tylko bardzo uważać na przecinki, bo można dostać oczopląsu ;).
ODWOŁYWANIE SIĘ DO ATRYBUTÓW I METOD
Każdy głupi wie, że po to się definiuje właściwości i metody, żeby później z nich skorzystać. Celem odwołania się do składowej obiektu, korzystamy z jego nazwy, znaku kropki i nazwy składowej jaka nas interesuje:
const o = {
x: 50
};
console.log(o.x); // 50Prościzna! Modyfikacja już istniejącej składowej odbywa się dokładnie tak samo! Gdy w ten sposób powołacie się na składową której nie ma, zostanie zwrócone "undefined"! Wtedy warto "uzbroić" kod w instrukcję warunkową:
if(typeof o.x !== "undefined") {
// instrukcje
}Właściwości, które mogą być niezdefiniowane określane są jako "opcjonalne". Następny dodatek do słowniczka pojęć! Polecam skorzystać z "typeof" i łańcuchowego zapisu typu "undefined" do sprawdzania istnienia danej składowej.
WSTAWIANIE POZA DEFINICJĄ
Bywa, że pewna składowa obiektu musi powstać, ale odrobinę później niż ma to miejsce w trakcie definicji. W takiej sytuacji możecie dorzucić składową w takiej postaci jakiej chcecie przy użyciu tego samego zapisu dla odwoływania się do obiektu. Obiekt, kropka, nazwa nowej składowej, znak przypisania i wartość. Oto cała receptura :):
const o = {
x: 50
};
o.y = 37;
console.log(o.y); // 37ACH, TE REFERENCJE...
Definiując obiekt w języku JavaScript, musicie wiedzieć taką istotną rzecz, że zmienne i stałe w rzeczywistości także przechowują do nich odniesienia. Popatrzcie na taki kod:
const o1 = {x: 59};
const o2 = o1;Nic interesującego na pierwszy rzut oka. Przypisanie obiektu do drugiej zmiennej. Ciekawiej się zrobi w momencie modyfikacji jednej z właściwości:
o1.x = 500;Jaki to da skutek? Modyfikacja dotknie również zmienną "o2"!!!
console.log(o1.x); // 500
console.log(o2.x); // 500Wynika to z faktu, iż zmienna "o2" "wskazuje" na obiekt wskazywany przez "o1", co stanowi niezbity dowód przechowywania referencji. To jest dosłowne wytłumaczenie pierwszych dwóch instrukcji. Jeśli chcecie, żeby to działało jak kopia czy niezależny obiekt, musicie zdefiniować go na nowo:
const o1 = {x: 59};
const o2 = {x: 59};
o1.x = 500;
console.log(o1.x); // 500
console.log(o2.x); // 59"CONST" NAŁOŻONE NA OBIEKT NIE ZADZIAŁA JAK MYŚLISZ!
Skoro jesteśmy przy słowie kluczowym "const", to trzeba Wam uświadomić kolejną niespodziankę. Wiadomo, że "const" definiuje stałe, czyli wartości niemodyfikowalne przez cały cykl życia programu. Tylko w kwestii obiektów...jakby to Wam napisać:
const o = {x: 59};
o.x = 40; // nie ma problemu!To nie wpływa na właściwości ani metody! Czyli jednym zdaniem, "const" nie sprawi że raz nadane wartości wewnątrz obiektu pozostaną takie na wieczność. "const" działa jedynie "na zewnątrz", czyli zabroni jedynie tego:
const o = {x: 59};
o = {x: 67}; // błąd składniowy!Pisząc jeszcze piękniej, "const" zabrania jedynie modyfikowania referencji!
DRUGA "TWARZ" OBIEKTU
No...dobra. Mam jeszcze coś do przekazania. W języku JavaScript, typ "object" jest również tablicą!!! Obiekt to tablica, a tablica to obiekt. Żeby jeszcze bardziej nie poszerzać artykułu, przełóżmy sobie ten "cliffhanger" na czas omawiania tablic :).
 |
Obiekt w języku JavaScript przypomina "woreczek", który jest zdolny do składowania wielu zmiennych i funkcji w jednym miejscu. Należy pamiętać, że wszystkie dane są podatne na modyfikację z zewnątrz, nawet po użyciu słowa "const"!!!
Jeśli o niczym nie zapomniałem, oto skończyło się kompendium wiedzy samych podstaw na temat obiektowego typu danych w JavaScripcie. Znowu język poszedł swoimi torami mając gdzieś przyjęte standardy znane z języka C ;).