Podstawy Programowania: Tworzenie klas

0:00W tej lekcji stworzymy swoją pierwszą klasę, która pozwoli nam opisać produkt.

0:06Czyli klasa pozwala nam opisać jakąś rzecz z rzeczywistości a więc jeżeli będziemy

0:11chcieli mieć zamówienia i produkty na czym się skupimy jeszcze w kolejnej lekcji, to

0:15chciałbym najpierw w jakiś sposób opisać produkt. W języku JavaScript ale także w

0:19wielu innych językach bardzo podobnie to wygląda,

0:22klasy tworzymy pisząc słowo kluczowe class i następnie podając nazwę takiej klasy i

0:27tutaj te nazwy to Ty je ustala tak samo jak przy nazwach funkcji czy zmiennych. A więc

0:32tutaj są dokładnie te same reguły, nie możesz klasy nazwać np.

0:36zaczynając od cyfr itd.

0:38Ja będę chciał naszą klasę nazwać Product więc napiszę to tak

0:42i zauważ, że użyłem na początku wielkiej litery.

0:44Nie jest to wymagane, spokojnie możemy tak napisać ale jest to taka przyjęta

0:48konwencja, że klasy nazywamy z wielkich liter.

0:52Jeżeli tutaj byśmy jeszcze chcieli mieć jakąś kolejną rzecz kolejne słowo np.

0:56ProductOrder coś takiego to musielibyśmy skorzystać z notacji camelCase.

1:01W zasadzie nie musimy ale jest to dobra

1:03praktyka i tak się przyjęło, że klasy nazywamy z wielkich liter.

1:07Następnie za pomocą takich nawiasów

1:09otwieramy jakby ciało tej klasy. Czyli słowo class i następnie tutaj produkt.

1:14Tak to nazwaliśmy. I teraz wewnątrz klasy możemy mieć metody czyli tak naprawdę są

1:20to funkcje, ale nie piszemy tak jak do tej pory np.

1:22function

1:23i tutaj jej nazwa tylko od razu podajemy jej nazwę.

1:26Tak jest w języku JavaScript.

1:28W innych językach np.

1:29w PHP piszemy fanction i podajemy nazwę. Więc to będzie zależne od języka ale ty

1:33nie powinieneś się teraz na tym skupiać bo nie jest to istotne.

1:36Ważne żeby zrozumieć jak mniej więcej kasy wyglądają

1:39i przede wszystkim do czego służą. Więc w

1:41języku JavaScript tutaj od razu piszemy nazwę funkcji.

1:44I na początek będę chciał skorzystać z takiej specjalnej funkcji, która się nazywa

1:47constructor. To jest specjalna nazwa ja jej nie wymyśliłem.

1:51Ona ma tutaj specjalne znaczenie w języku JavaScript.

1:54W innych językach jest to np.

1:55funkcja construct,

1:57tak jak w PHP więc działanie jest to samo

1:59ale troszeczkę inny zapis. I teraz chciałbym kiedy będziemy za moment

2:03tworzyć produkt żeby można było przypisać temu produktowi nazwę oraz cene.

2:07Więc nazwę sobie parametry do tej funkcji jako name i price.

2:11Pamiętaj, że cały czas jest to funkcja. Tak samo jak do tej pory tworzyliśmy funkcje,

2:15gdybyśmy napisali function constructor to może dla Ciebie wygląda bardziej znajomo

2:19to mówimy, że ta funkcja ma przyjmować dwa parametry.

2:22Natomiast w klasie nie piszemy tego słowa

2:24function tylko od razu nazwę tej funkcji. I teraz sobie otworzymy takie oto nawiasy,

2:29no i będziemy mieli dostęp do name i price.

2:32Ale kiedy to się tutaj pojawi, w jaki sposób to wywołać.

2:35Chciałbym zrobić console.log(name) i console.log(price) i teraz pokazać Ci co

2:40się stanie jak zapiszę. Nic się nie stało. Dlatego, że my dopiero zdefiniowaliśmy klasę,

2:45czyli jakby taki szablon, z którego będziemy tworzyć produkty. I teraz będę

2:49chciał sobie utworzyć produkt więc tworzę normalnie stałą lub zmienną, to nie ma

2:53większego znaczenia, którą mogę również nazwać jak chce, nazwiemy to produkt albo

2:57może w naszym przypadku nazwijmy to book jak książka i następnie chcemy z tego

3:01szablonu jakim jest klasa utworzyć nowy obiekt, który będzie nam reprezentował książkę.

3:06Robi się to z użyciem słowa kluczowego new i następnie podajemy nazwę tej naszej

3:11klasy. W ten oto sposób czyli new Product. To nam utworzy obiekt,

3:15ale co ciekawe rzeczy, które przekażemy

3:17tutaj wpadną automatycznie do tej funkcji constructor i ta funkcja się wykona.

3:22Czyli my nigdzie nie musimy pisać tak jak robiliśmy to wcześniej np.

3:25constructor

3:26coś takiego i tej funkcji wywoływać. Nie trzeba tego robić.

3:29Jak zrobimy new Product i tu przekażemy pierwszy parametr to on wpadnie tu pod name, drugi pod price.

3:34Więc napiszmy sobie, że nazwa naszej książki to jest Władca Pierścieni

3:40i po przecinku podajemy tak jak zawsze do funkcji kolejny parametr i to jest cena,

3:44powiedzmy, że będzie to 49,99.

3:47Jak zapisze, zauważ, że teraz nam się to w konsoli pojawiło. Dlatego, że właśnie new

3:52Product wywołało na tej klasie funkcję czy w zasadzie tutaj metodę constructor,

3:59przekazało te parametry no a ta metoda co robi? No robi console.log

4:03dlatego one się tutaj pojawiły.

4:05Będziemy chcieli natomiast zrobić inną

4:07rzecz a mianowicie to name i price, które zostały przekazane nie wyświetlać w

4:11konsoli ale przypisać jakby wewnątrz tego obiektu. Robi się to za pomocą słowa this i

4:17słowo this odwołuje się jakby do całego tego nowo tworzonego obiektu. Czyli jak

4:21tutaj stworzyliśmy obiekt, który tutaj sobie nazywamy book,

4:24czy w takiej stałej go przechowujemy,

4:26jest tworzony nowy obiekt i wtedy wewnątrz tej klasy this kieruje na ten obiekt. I

4:30możemy sobie dowolne rzeczy przypisać do tego obiektu. Więc chciałbym tutaj napisać

4:35this.name równa się name, zaraz to wytłumaczę i this.price równa się price.

4:40Teraz jeżeli zapisze nic się nam nie

4:42wyświetla nowego ale wewnątrz tego obiektu przypisaliśmy sobie name i price.

4:47I teraz te nazwy na początku mogą być mylące bo ty myślisz, że skoro tutaj jest

4:52name to musi się to nazywać tak samo. Nie. Nazwaliśmy parametr name, mogliśmy go nazwać

4:58dowolnie i teraz jak przypisuje coś wewnątrz obiektu też mogę sobie to nazwać

5:01dowolnie. Tu mógłbym napisać this.nazwa równa się to co ktoś przekazał

5:05name. Wtedy wewnątrz tego obiektu pod nazwa miałbym Władca Pierścieni.

5:09Natomiast zazwyczaj nazywa się to po prostu tak samo więc wewnątrz

5:13tego obiektu będę chciał mieć name, które będzie miało taką samą wartość. Znowu gdybym

5:18tutaj powiedział, że jest to nazwa produktu no to musiałbym tutaj podać nazwę.

5:23Mam nadzieję, że to rozumiesz, że po prostu

5:25to name i name oraz te price nie ma nic wspólnego, że to są takie same

5:29nazwy. Po prostu nazwałem parametr price ale również wewnątrz tego obiektu pod this.price

5:33chcę przechowywać przekazaną tutaj wartość.

5:36Być może pamiętasz jak w tym kursie już

5:38mówiliśmy o obiektach, które tworzyliśmy w taki prosty sposób i tam np.

5:41mieliśmy firstName

5:42równa się Jan. To teraz taki utworzony z klasy obiekt jest troszeczkę podobny.

5:47Dlatego, że możemy się odwoływać do jego właściwości i metod.

5:50I to co pisaliśmy pod this

5:52czyli this.name i this.price są to właściwości tego obiektu. Dlatego jak teraz utworzyłem

5:57ten obiekt z użyciem new Product, przekazałem mu te rzeczy,

6:00constructor się wykonał, przypisał do tego

6:02obiektu name oraz price na te, które przekazałem to mogę zrobić console.log(book),

6:07to mi zwróciło cały ten obiekt i odwołać się do name.

6:10Zobacz, że to wyświetli Władca Pierścieni,

6:13a jak się odwołam do price

6:15to wyświetli mi cenę.

6:17I właśnie to name i price, które teraz tutaj

6:19wpisałem wynika z tego, jeżeli tutaj bym to nazwał nazwa,

6:23to w tym miejscu musiałbym powiedzieć book.nazwa.

6:26Czyli to są po prostu właściwości obiektu.

6:28Ok, skoro mamy właściwości to pokażę Ci

6:31jeszcze, że w klasie można definiować metody a metody są to po prostu funkcje.

6:36I skoro Ci powiedziałem, że tutaj nie piszemy słowa function tylko od razu nazwę

6:40funkcji to teraz pod spodem stworzymy sobie jakąś metodę.

6:43Będzie to tak naprawdę funkcja, z której będzie można skorzystać.

6:46Pamiętaj, że ta constructor ma specjalne znaczenie bo nigdzie jej nie wywoływałem

6:50ale przy robieniu new, to co przekażę wpada do constructor.

6:53Natomiast wszelkie pozostałe mogę już

6:55sobie nazywać tak jak chcę więc chciałbym stworzyć taką metodę, którą nazwę getName

7:00a więc zwróć imię i ona się odwoła,

7:03zobacz return this.name.

7:06Dlaczego ta metoda będzie miała dostęp do name?

7:09No właśnie z tego powodu, że w constructor przypisałem to do tego obiektu poprzez this.

7:13Gdybym tego nie zrobił to w metodzie getName nie miałbym do tego dostępu.

7:17I teraz owszem skoro możemy tutaj zrobić tak

7:19jak Ci pokazałem book i odwołać się bezpośrednio do name,

7:22to możesz zapytać po co mi metoda, która robi dokładnie to samo.

7:25To wynika z tego, że w wielu językach programowania możemy mieć tzw.

7:29prywatne właściwości i wtedy nie dałoby się do nich tak odwołać,

7:33ale również jest dobrą praktyką tworzenie

7:35metod, które nam zwracają te rzeczy, które są dla nas potrzebne.

7:38Teraz co to oznacza, że stworzyłem na tej klasie metodę getName.

7:42To oznacza, że zwrócone tutaj poprzez new

7:44Product obiekt, który mamy pod book, ma dostęp do takiej metody.

7:48Dlatego jeżeli powiem book.getName i wywołam tę

7:52metodę bo pamiętaj, że jest to funkcja zwróci mi to Władca Pierścieni.

7:56Podobnie mógłbym sobie teraz zrobić metodę getPrice

8:00i powiedzieć return this.price. Tu mogłaby być np.

8:04logika, która by tą cenę jakoś formatowała itd.

8:07Więc to jest plus tego, że jest to osobna funkcja.

8:10Więc jeżeli teraz tutaj powiem this getPrice to mi zwróci 49,99.

8:15Jest to prosty przykład, mam nadzieję, że nie zbyt zagmatwany.

8:18W razie czego jeszcze raz sobie obejrzyj tę lekcję i upewnij się, że wszystko tutaj

8:22dobrze rozumiesz. Starałem się to dokładnie wytłumaczyć bo w kolejnej lekcji stworzymy

8:27już dużo bardziej rozbudowany przykład, który pokaże Ci jak za pomocą tego

8:31programowania obiektownego możemy opisać zamówienie, które będzie przyjmowało wiele

8:36produktów, będziemy mogli zobaczyć podsumowanie tego zamówienia itd.