JavaScript: Przykład dziedziczenia wielokrotnego cz. 1
w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe i Domkniecia
- Format danych JSON oraz praca z AJAX
- Cookies
- Wyrazenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilosc sztuczek i dobrych praktyk
- I wiele, wiele wiecej!
Witaj w kursie JavaScript w Praktyce!
W pierwszym rozdziale tego kursu poznasz bardzo dokładnie koncepcje programowania zorientowanego obiektowo. W jednej z lekcji, omówimy wszystkie z nich na przykładzie pseudo-kodu, niezwiązanego bezpośrednio z językiem JavaScript. Dzięki temu zrozumiesz, jak realizowane jest programowanie obiektowe w wielu popularnych językach programowania. Dowiesz się czym jest klasa, obiekt, instancja, właściwości, metody, a także zrozumiesz takie pojęcia jak dziedziczenie, polimorfizm, abstrakcja czy enkapsulacja. Następnie przejdziemy już do języka JavaScript i do zrozumienia tego, w jaki sposób powyższe koncepcje są w nim zaimplementowane. Język ten nie jest bowiem w 100% klasycznie obiektowy, jak np. język PHP. Co jednak bardzo istotne, JavaScript implementuje tzw. dziedziczenie prototypowe, którego bardzo dogłębne zrozumienie, gwarantuje zrozumienie całego języka JavaScript. Dowiesz się zatem czym są konstruktory i jak je tworzyć, a także jak korzystać z prototypu funkcji. Dzięki temu będziemy mogli wykorzystać obiektowość do własnych celów, co później w praktycznych przykładach uczynimy.Na przestrzeni kilku lekcji zobaczysz krok po kroku, jak w języku JavaScript zaimplementować dziedziczenie wielokrotne. Taka wiedza absolutnie otwiera oczy na zależności rządzące obiektami w tym języku. Dowiesz się również jak rozszerzać wbudowane konstrukcje języka JavaScript czy Obiektowego Modelu Dokumentu, a także kiedy powinniśmy to robić. Omówimy problemy, jakie mogą się pojawiać przy korzystaniu ze słowa kluczowego this, a także sposoby ich rozwiązania. Poznasz 3 bardzo ważne metody funkcji: call, apply i bind.JavaScript ma wiele specyficznych cech, a jedną z nich są tzw. domknięcia. W jednym z rozdziałów zobaczysz, do czego one służą i kiedy powinniśmy z nich korzystać. Dopełnimy tym również wiedzę związaną z programowaniem obiektowym i tzw. prywatnością.Rozdział o obiektowości został celowo umieszczony na samym początku kursu, gdyż zrozumienie tych koncepcji pozwala patrzeć zupełnie inaczej na wszystkie pozostałe. Po tym rozdziale przejdziemy do omówienia bardzo popularnego, lekkiego formatu wymiany danych JSON. Dowiesz się jak wygląda składnia tego formatu, a także jak współpracuje on z językiem JavaScript.Następnie przejdziemy do bardzo ekscytującego tematu, jakim jest technologia AJAX. Dzięki niej możemy wysyłać zapytania do serwera i pobierać dane, bez przeładowywania witryny. Do zrozumienia AJAXa niezbędne jest jednak rozumienie działania protokołu HTTP, na którym opiera się sieć www. Z tego powodu, jedna z lekcji została w 100% poświęcona HTTP i dowiesz się z niej jak wysyłane są żądania i odpowiedzi, a także tzw. nagłówki, które będą dla nas niezwykle istotne. Chwilę później omówimy również bardzo ważne mechanizmy: Same- origin policy i CORS, które blokują możliwość wysyłania żądań AJAX do pewnych serwerów. Kiedy już będziesz rozumiał te niezwykle istotne koncepcje, przejdziemy do napisania pierwszego kodu, wysyłającego asynchroniczne żądanie do serwera. Następnie dowiesz się jak wysyłać, a także odbierać dane z serwera, umieszczać je na stronie oraz śledzić postęp zarówno wysyłania, jak i pobierania danych.W tym rozdziale na przestrzeni kilku lekcji napiszemy swoją własną bibliotekę AJAX, która pozwoli w niezwykle łatwy sposób wysyłać i odbierać dane. Skorzystamy w niej już w kolejnej lekcji, gdzie zobaczysz, jak wysłać wiadomość e-mail z użyciem AJAX i PHP po stronie serwera. Gotowy skrypt, będziesz mógł umieścić na własnej stronie internetowej. Na zakończenie tego rozdziału omówimy również dokładnie niezwykle sprytną technikę o nazwie JSONP, które pozwala wysyłać tzw. żądania “cross-origin”. Przekonasz się dlaczego taka technika powstała i jak współpraca klienta i serwera potrafi obejść zabezpieczenia przeglądarek.Kolejnym tematem omówionym w kursie będą Cookies, czyli tzw. ciasteczka. Dowiesz się czym są, w jakim celu istnieją, a także jak są ustawianie przez serwer. Co ciekawe, również z poziomu języka JavaScript będziemy mieli do nich dostęp, a zatem zobaczysz jak je ustawiać i odczytywać. Na tym etapie przyda nam się wiedza zdobyta w lekcji o protokole HTTP.W kursie znajdziesz również rozdział poświęcony w 100% wyrażeniom regularnym. To mechanizm języka, który pozwala dopasowywać tekst do definiowanych przez nas wzorców. Wyrażenia regularne potrafią być bardzo zaawansowane i odstraszać, dlatego rozłożymy je na czynniki pierwsze, byś dokładnie je zrozumiał. Na przestrzeni wielu lekcji dowiesz się jakie są specjalne symbole wykorzystywane przy wyrażeniach regularnych, czym są kwantyfikatory, kotwice czy np. grupowanie. Następnie przejdziemy do wykorzystania wyrażeń regularnych w języku JavaScript. Poznasz zarówno metody obiektu RegExp jak i te dostępne na obiekcie String. Dzięki nim będziemy mogli wyszukiwać np. adresów e- mail w podanym tekście, usuwać je lub zamieniać na coś innego. Jako praktyczny projekt, stworzymy “Antybluzgacz”. Wykorzystamy do tego celu programowanie obiektowe, a sama aplikacja będzie pozwalała filtrować wpisywany przez użytkownika tekst wiadomości i wyłapywać w nim niecenzuralne słowa. Wszystkie z nich zamienimy na przypadkową reprezentację znaków, np. $#!@%^. Ten projekt pokaże Ci nie tylko jak korzystać z wyrażeń regularnych, ale także jak profesjonalnie pracować z kodem JavaScript.W przedostatnim rozdziale tego kursu znajdziesz lekcje związane z dobrymi praktykami pracy. Omówimy tzw. “strict mode” języka JavaScript, zagadnienia związane z minifikacją i konkatenacją skryptów, sprawdzaniem poprawności pisanego kodu oraz delegacją zdarzeń DOM.Na końcu kursu znajdziesz 10 krótkich lekcji z serii Tips & Tricks, które przybliżą Ci wiele ciekawych konstrukcji języka JavaScript, a także technik na rozwiązanie różnych problemów. Zobaczysz np. jak wczytać obrazy w tle czy jak wyświetlić na pasku tytułowym witryny migające powiadomienie.Podsumowując, kurs ten jest dopełnieniem wiedzy z zakresu języka JavaScript i Obiektowego Modelu Dokumentu z kursu “JavaScript od Podstaw”. Poprzedni kurs nie jest wymagany, lecz jego przerobienie z pewnością pozwoli dużo lepiej przyswoić wiedzę z tego kursu, gdyż były one przygotowywane równocześnie. Oba te materiały, pozwolą od zera, wskoczyć na naprawdę wysoki poziom rozumienia języka, a także dobrych praktyk pisania kodu.
Kurs JavaScript w Praktyce to między innymi:
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe
- Domknięcia
- Format danych JSON
- Praca z AJAX
- Cookies
- Wyrażenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilość sztuczek i dobrych praktyk
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Do tego kursu mogą jednak przystąpić wszystkie osoby, które znają już podstawy języka HTML, CSS i JavaScript i chcą poszerzyć swoją wiedzę, a także spojrzeć zupełnie inaczej na ten język.
W tej lekcji pokażę ci przykład dziedziczenia wielokrotnego i mam nadzieję, że dla ciebie ta lekcja będzie
bardzo dobrym jakby wytłumaczeniem tego, na czym opierają się, na czym polegają koncepcje w ogóle programowania
obiektowego.
Jeżeli zaczynasz swoją przygodę z programowaniem od JavaScript, to kiedyś, kiedy będziesz się uczył
innych języków programowania, które mają prawdziwą obiektowość, zrozumiesz co ja tutaj mówiłem, tzn
mam nadzieję, że dzisiaj też wszystko będziesz rozumiał w kontekście JavaScript.
Natomiast właśnie będę chciał tutaj to pokazać, jak w JavaScript możemy zrobić to, co możemy robić w innych językach
i zrobimy sobie dziedziczenie wielokrotne na ciekawym przykładzie. Więc przejdźmy do kodu.
I ja zrobiłem tutaj komentarz, co będziemy chcieli osiągnąć. Otóż chcemy sobie stworzyć jakby nowe klasy, czyli
nowe konstruktory dla Shape. Czyli jakby kształt, figura. Następnie Rectangle, czyli prostokąt.
Chciałbym, żeby pod spodem był kwadrat. Bo kwadrat jest prostokątem. Tylko, że specyficznym o tyle, że wszystkie
boki ma równe. I trójkąt.
Czyli chciałby mieć figurę: prostokąt, kwadrat i trójkąt.
I właśnie tak, żeby dziedziczyły. Aby figura miała jakieś ogólne właściwości i metody, aby prostokąt dziedziczył
z tej figury, aby kwadrat dziedziczył i z prostokąta, i z figury, a trójkąt aby dziedziczył tylko właśnie
z figury. Bo trójkąt będzie miał np. inną metodę do obliczenia swojego pola.
Teraz pokażę ci jak to zrobić.
Wiesz już, jak tworzymy nowe konstruktory. Są to po prostu funkcje.
Więc tworzę funkcje Shape.
Chciałbym, żeby taka funkcja przyjmowała jeden parametr, kiedy będziemy tworzyć nowe obiekty i będzie
to tablica z długością boków.
To nie jest jakiś bardzo życiowy przykład, ale zobaczysz, że również będzie działał. To znaczy jeżeli będziemy
tworzyć np. kwadrat to chciałbym, żebyśmy mogli podawać długości boków np. 20 centymetrów, 20 i 20. Czyli
przyjmę tutaj parametr, który nazwę sideLengths, jak długości boków
i chciałbym go tutaj zapisać poprzez this.
Natomiast zrobimy sobie tutaj podkreślnik.
Dlaczego?
Otóż chciałbym jakby zasymulować, że to, co tutaj zapisujemy jest prywatne. Jeszcze za moment o tym wspomnę.
Wiesz, że możemy tworzyć i nazwy zmiennych, czy nazwy właśnie właściwości w obiektach. Mogą się zaczynać od podkreślnika
i w JavaScript to nie ma specjalnego znaczenia. To tylko konwencja. Tak jak tutaj z tą dużą literą. Więc napiszmy sobie
sideLengths i przypiszę to, co tutaj zostanie przekazane. W ten sposób chciałbym, aby każda figura miała też swoją
nazwę.
Natomiast Shape jest to taka ogólna klasa. Więc napiszę tutaj this._name = ""; .
Czyli jakby ona nie ma nazwy, ale chcę żeby to było tutaj zdefiniowane.
Teraz o co chodzi z podkreślnikiem.
Chodzi o to, że jeżeli utworzymy nowy obiekt, który nazwę Shape, w ten sposób, np. shape1, poprzez new Shape i tutaj podam
jakąś tablicę np. tylko taką, to wiesz, że możemy się później odwołać do shape1 i tutaj do name. I możemy to name bez
problemu odczytać. Nie ma problemu. W JavaScript nie do końca mamy możliwości, aby to ukryć.
W językach programowania zorientowanych obiektowo możemy tu wpisać na przykład private, w ten sposób, i to oznacza,
że owszem taka zmienna jakby wewnątrz się będzie znajdować, ale nie będziemy mogli jej w żaden sposób odczytać.
Będziemy mogli za to stworzyć metodę, która ma do niej dostęp. W JavaScript tak to nie działa.
Dlatego programiści, kiedy tworzą jakieś tutaj właściwości czy metody, które nie powinny być używane bezpośrednio
na obiektach, tworzą je z podkreślnikiem, czyli właśnie w taki oto sposób.
Jeżeli tak to zrobimy i naszą bibliotekę komuś udostępniamy, on do niej zajrzy, to wie od razu, że jeżeli
utworzy sobie nowy shape, w ten sposób, to nie powinien żaden sposób odwoływać się do tych właściwości,
które są z podkreślnikiem.
Można to zrobić, ale to oznacza, że my jako programiści nie chcemy, żeby on tego robił.
Jeżeli chce odczytać name, to możemy stworzyć tutaj w środku metodę, prawda, get_name, która będzie zwracać to, co tam
się znajduje.
Na tym polega prywatność, czyli enkapsulacja. Jeszcze w tym kursie pokażę ci, jak możemy to w JavaScript obejść.
Tak więc te podkreślniki to tylko konwencja.
Ok.
Czyli stworzyliśmy sobie nową figurę. Możemy ją teraz tworzyć, bez problemu jak widzisz, i tak nam to będzie działać.
Natomiast chciałbym, aby taka figura miała od razu jakieś metody. Więc dodamy je do prototypu i chciałbym,
aby była metoda, która będzie się nazywała pobierz obwód z angielskiego nazwijmy ją getPerimeter.
I tutaj może od razu stworzyę taką tablicę, gdzie będziemy mieli 20, 20, 20, czyli to są te wszystkie boki.
Tak sobie to powiedzmy wymyśliliśmy i aby obwód naszej figury został nam zwrócony, to musimy je wszystkie
dodać. Więc moglibyśmy tutaj w tej funkcji, jak wiesz, zrobić sobie pętle for, dodać wszystkie te wartości,
ale skorzystamy z jednej z funkcji, które są dostępne na tablicach. Ja to teraz od razu wkleję. Będzie to wyglądać
w ten sposób. To nie jest nic strasznego. Zauważ, że odwołujemy się do this._sideLengths, czyli do tego właśnie
co tutaj zrobiłem. To będzie tablica przekazana w tym miejscu. I następnie tablica ma w skrócie taką metodę
jak reduce. Możesz sobie o niej więcej poczytać.
Generalnie ona działa tak, że przyjmuje nam poprzednią wartość i aktualną wartość. Czyli na początku poprzednia
wartość to będzie 0 i aktualna wartość 20. Więc zwracam jakby 0 plus 20 i w kolejnej iteracji poprzednia
wartość to będzie, to co zwróciłem. Czyli 20, tutaj pod prevVal, plus aktualna wartość 20. Czyli jak to zwrócę
to już będzie 40. W kolejnej iteracji prevVak to będzie 40 plus 20, 60 itd.
Generalnie ta metoda, bez żadnego problemu, tutaj zwróci nam 80.
To nie jest nic skomplikowanego.
Czyli to dodaliśmy sobie do shape metodę getPerimeter, która nam zwraca właśnie obwód.
Zauważ, że tutaj już jej nie podkreśliłem, a to oznacza, że chcemy, jeżeli ktoś utworzy nową figurę, żeby
mógł odwołać się do shape1.getPerimeter
O to nam chodzi.
I może sobie to zróbmy w konsoli, aby się upewnić, że to wszystko działa.
shape1.getPerimeter(), dodany do naszego prototypu zwraca 80.
Na razie jest super.
Mamy taką ogólną klasę figury. Bo powiedzmy, że każda figura, którą stworzymy, aby pobrać jej obwód to będziemy
chcieli dodać wszystkie długości boków. Czyli zapisaliśmy sobie w tej ogólnej klasie właśnie coś takiego.
Teraz powiedzmy, że dodamy sobie drugą metodę getArea. Czyli oblicz pole. Jeżeli chodzi o figury, to wiesz,
że obliczanie pól może być skomplikowane i w zależności od figury różnie to działa.
My mamy tutaj taki pseudo przykład. Więc to wszystko nie musi w stu procentach działać. Dlatego ja teraz
wstawię tutaj od razu metodę i szybko ci wytłumaczę getArea. Czyli ta metoda na shape zakłada, że mamy prostokąt
albo kwadrat. Więc moglibyśmy to dodać później do klasy, o której ci mówiłem, ale dodamy to od razu do
figury.
Czyli tu chcemy zwrócić this._sideLengths[0], czyli to będzie np. 20 razy 1 czyli 20.
Chodzi o to, że jeżeli to będzie prostokąt, to będziemy tutaj mieli np. 20, 10 i 20 i 10, prawda? Tak będzie w prostokącie.
Czyli aby obliczyć jego pole, to jeden bok razy drugi bok. Czyli tak ta metoda będzie wyglądać. W przypadku
trójkąta już nam to nie zadziała, o czym powiem później. Natomiast sprawdźmy sobie jeszcze shape1.getArea. Działa.
I jest to 200. Więc jest na razie ok.
No i teraz będę chciał zacząć tworzyć kolejne figury. Bo shape, powiedzmy, już mamy.
Chcemy, aby można było tam podawać tablice z długością boków i następnie, abyśmy mieli metody do obliczania
obwodu i do obliczania pola. Obwód będzie działał w każdej figurze, pole tylko w kwadratach i prostokątach.
Ale to na razie nie ma znaczenia.
Zrobię tutaj troszkę więcej miejsca. Na razie. Chociaż to nam uciekło. Wrzucimy to sobie dzieś tutaj. Kolejna jakby klasa
figury, którą chcę stworzyć, jest to prostokąt, czyli rectangle. Więc znowu funkcja. Ta funkcja, z kolei, chciałbym,
aby przyjmowała też tablice tak jak wcześniej.
Czyli to będzie sideLengths, ale wiesz, że jeżeli to będzie prostokąt, to już nie musimy przekazywać takiej
tablicy, gdzie będziemy mieli wszystkie boki.
Ale chciałbym przekazywać właśnie np. 20, 10. Czyli jakby jeden bok i drugi bok bo wiemy, że one
się będą powtarzać. Czyli zamiast tutaj wpisywać w ten sposób, to zrobimy to w taki oto sposób.
Czyli tak za chwilkę będziemy to przekazywać. Może zróbmy to od razu, czyli new Rectangle. I chcemy właśnie
to przekazywać w taki oto sposób.
Ok.
Teraz od razu chciałbym tutaj, tak jak zrobiliśmy wyżej this._name, przypisać nazwę takiego, takiej figury.
Bo ona jest już konkretną figurą. Nazwiemy sobie to name i będzie to powiedzmy prostokąt.
Ok, będziemy potem mogli się do tego odwoływać.
I teraz pokażę ci rzecz, która będzie dla Ciebie może trochę za bardzo zaawansowana.
Dlatego najlepiej byłoby, abyś w to miejsce wrócił po przerobieniu lekcji o Call i Apply, która jest troszkę
niżej w tym rozdziale. Natomiast możesz i tak to oglądać, ale wróć sobie wtedy, kiedy tą lekcję przerobisz
i wszystko zrozumiesz. O co chodzi, z tym co chcę zrobić teraz. W innych językach programowania nie byłoby
problemu, bo moglibyśmy powiedzieć, że chcemy, aby klasa rectangle, którą tutaj mamy, rozszerzała shape i wtedy
z automatu mielibyśmy tam taką jakby właściwość.
I od razu mielibyśmy tam wszystkie metody, a na razie ich tutaj nie mamy. Stworzyliśmy całkiem osobną
klasę.
Natomiast ja chciałbym tutaj nie powielać tego.
Czyli this._sideLengths
i znowu tego nie przypisywać. Bo zrobiłem to już w tym miejscu.
I możemy w JavaScript odwołać się do takiej metody, funkcji, która nazywa się call. I kiedy ją wywołamy
na funkcji, tylko na funkcjach ona działa.
Więc napiszę może od razu funkcję. Czyli shape. Shape jest funkcją, ma taką metodę jak call na prototypie funkcji.
Czyli Shape.call mogę się odwołać.
To sprawi, że wywołamy funkcję, która tutaj się znajduje. Po prostu ją wywołamy.
Ale do Call możemy przekazać, co ma być pod this w takiej funkcji. Czyli jeżeli bym sobie tutaj napisał
np. Window, to wywołał bym funkcję Shape, gdzie this kierowałby na obiekt Window. Czyli bym przepisał
po prostu this._name do window.
Mam nadzieję, że rozumiesz. Ale tłumaczę co dokładnie w lekcji o Call. Więc w razie czego sobie do niej przejdź.
A jeśli tutaj napisze Shape.call(this),
to oznacza tyle, że chce wywołać tę funkcję i chcę żeby w środku słowo kluczowe this kierowało na to co tutaj
przekażę. Czyli na rectangle. Bo tutaj this na to kieruje.
Natomiast drugi parametr pozwala mi przekazać do tej funkcji ten parametr sideLengths, który jest tutaj.
No i właśnie, zauważ, że nasza funkcja Shape przyjmowała tutaj sideLengths,
w takiej postaci tablicy, gdzie mieliśmy np. cztery elementy. Czyli 20, 10, 20, 10. Bo do tego będzie nam potrzebna
później ta metoda. Raczej taka tablica będzie nam potrzebna w tej metodzie.
Skoro ja sobie to chciałem uprościć, aby rectangle można było podawać tutaj tablicę 20,10, w ten sposób, to tutaj
chciałbym ją przekazać jakby do Shape jako tablicę.
Pamiętasz, że to była tablica. Ale musimy to co tutaj mamy powtórzyć. Czyli jak sideLengths w naszym przypadku to jest to. Więc
możemy się odwołać do sideLengths.
W tym miejscu. I sideLengths[0] to będzie to, prawda? Później sideLengths[1] podamy tutaj, w ten sposób.
Czyli na razie zrobiliśmy dokładnie taką samą tablicę. Wzięliśmy 20, wstawiliśmy do nowej tablicy, wzięliśmy
10, wstawiliśmy tu. Ale chcemy to powtórzyć. Więc raz jeszcze tutaj wystawimy 0 i raz jeszcze wystawimy
1.
Z tego wszystkiego zrobimy po prostu tablicę, która będzie mieć 20, 10, 20, 10 i taką tablicę przekażemy
do Shape. I ona nam ją zapisze w naszym obiekcie. Bo skoro używamy call i przekazujemy this do tego, to
teraz this tutaj, to nie będzie Shape, tylko to będzie nowo tworzone rectangle. A więc do niego przypiszemy name,
które ja tutaj potem odpisuje i do niego przypiszemy sideLengths przekazane tutaj. Mam nadzieję, że teraz
to rozumiesz. Ale uprościliśmy sprawę o tyle, że tworząc nowy prostokąt możemy przekazać tablicę, w ten sposób,
a ona tutaj zostanie zamieniona na taką długą tablicę i przekazana tam. Teraz, bo chcę Ci to pokazać, że
to działa,
jeżeli utworzymy nowy rectangle, przekażemy tę tablicę, ona jest tu, ale do Shape.call przekazujemy nasze
this i całą taką tablicę,
to po prostu do naszego this opisaliśmy sobie to wszystko. Jeżeli teraz przejdziemy
tutaj, tu mamy jakiś błąd 528, ok.
Tutaj powinno być h.
Podobnie będzie tutaj.
I podobnie będzie tutaj, literówka. To teraz jeśli odwołamy się do shape1 i wejdziemy do środka, to sideLengths,
zauważ, jest to tablica, która ma 20,10,20,10. Mimo tego, że przekazaliśmy to w ten sposób i to co tutaj zrobiliśmy,
to jest taka sztuczka w języku JavaScript.
Na razie wcale jeszcze nie dziedziczymy z tej klasy, którą mamy tutaj Shape.
Czyli nie mogę się teraz odwołać do Shape.
W naszym przypadku getPerimeter, sprawdźmy.
Mamy błąd, bo coś takiego nie istnieje.
Czyli my tutaj tylko jakby pożyczyliśmy sobie to, co znajdowało się tu. Czyli żeby tego nie przepisywać,
to powiedzieliśmy funkcji Shape wywołaj się, this.
Chcemy żeby to był nowo utworzony tutaj obiekt i przypisz do niego to, co masz tutaj.
Tyle się tylko stało, ale nie mamy dostępu do tego wszystkiego co się tutaj znajduje. Na razie tylko sobie
to pożyczyliśmy.
Tak to się nazywa fachowo. To jest pożyczenie konstruktora w języku JavaScript.
Teraz chciałbym zrobić rzecz podobną.
I na tym zakończymy sobie tę lekcje, abyś nadrobił za mną to, co tutaj się dzieje. Bo to naprawdę nie jest
aż tak skomplikowane. Jedynie call musisz zrozumieć. Resztę do tej pory wiesz. Chciałbym utworzyć jeszcze jedną
nową klasę, którą nazwiemy z Square.
Mówiłem ci, że square to będzie kwadrat i chciałbym żeby on odziedziczył stąd. Dziedziczeniem zajmuje się
później. Więc stworzymy sobie square, w ten sposób. I również chcemy, aby tutaj były przekazywane te długości
boków, ale jako tablica, w ten sposób, no bo kwadrat zawsze będzie miał takie same długości boków. Więc
napiszemy side, tu mogę napisać length, czyli jakby długość jednego boku i teraz co zrobimy tutaj.
Otóż wywołany sobie rectangle. W taki sam sposób. Czyli rectangle, przekażemy this. Czyli nowo tworzony obiekt i tutaj
przekażemy tablicę.
Zauważ, że do rectangle przekazujemy tablicę tylko z takimi dwoma elementami. Więc tutaj tworzę nową tablicę
i uzupełnię ją sideLength, sideLength. Zrobimy to w ten sposób. Więc zasadzie tu nie będziemy musieli przekazywać
tablicy, ale prosty jakiś element. Wywołaliśmy sobie Rectangle.call. Więc wskakujemy tu. Przekazaliśmy this. Czyli
this w całej tej funkcji będzie kierować nam tutaj nowo tworzony obiekt, kiedy ja to nazwę Square. I tak jak wspominałem
tu już nie będzie tablicy tylko mówimy, chcemy kwadrat, który ma 20. 20 zostało przekazane tutaj, wywołaliśmy
Rectangle.call, przekazaliśmy this. Czyli nowo utworzony obiekt i przekazaliśmy tablicę, w której napisaliśmy
20, 20. Bo to zostało tutaj podstawione. Wywołało się rectangle i this tutaj wewnątrz. To jest ten nowo utworzony
obiekt. Bo tutaj to przekazaliśmy.
On z kolei przekazał to, co mu tutaj daliśmy. Czyli tablicę z dwoma elementami. Przekazał ją do Shape. Zauważ,
w ten sposób, dzieląc ją na cztery. Czyli powielił 20, 20, 20, 20.
Mam nadzieję, że to rozumiesz. I teraz tutaj jeszcze napiszemy tylko this._name = "Kwadrat";.
OK i teraz jeśli utworzymy sobie nowy square, zerknijmy. Czyli shape1 to jest square. Zajrzymy do środka, to okaże się,
że też jest tutaj tablica sideLengths, która wszystkie boki ma 20, a jak już sobie sprawę uprościliśmy,
otóż możemy tworzyć kwadrat, któremu podajemy tylko jedną długość boku, a tak czy siak, zostaje to zamienione
na tablicę, w której są cztery elementy.
Dzięki temu, kiedy później dodamy sobie prototyp i przejdziemy do getPerimeter, zauważ że ta funkcja wymaga
żeby to była tablica, w tym miejscu,
to musi być tablica, aby mógł wywołać reduce.
Gdyby to było tylko 20, to by nam to nie zadziałało.
Poza tym gdybyśmy podali 20, to musielibyśmy to pomnożyć razy 4, aby mieć wszystkie boki. Czyli musielibyśmy
tworzyć wiele niepotrzebnych metod w przypadku kwadratu itd.
A tak to będzie działać.
Ale tym zajmiemy się w lekcji kolejnej.
Przepisz sobie to wszystko, abyś był na bieżąco i mam nadzieję, że to rozumiesz.
W razie czego przejdź jeszcze do lekcji do Call i Apply i wtedy zrozumiesz wszystko w stu procentach.