EcmaScript 6: Dziedziczenie z wbudowanych typów

0:00W tej lekcji porozmawiamy o kolejnej nowości. Tym razem jest to już nowość. Coś

0:05co nie było dostępne w ES5. Mianowicie możliwość dziedziczenia zbudowanych

0:09typów w języku JavaScript, a więc chciałbym utworzyć klasę, która

0:13będzie mogła dziedziczyć z array, czyli z konstruktora array. Można

0:17powiedzieć z klasy array i chciałbym, żeby moja klasa nazywała się Collection i chciałbym,

0:22żeby ona dziedziczyła, czyli extends array, a więc array jest

0:27to wbudowany typ w języku JavaScript i teraz co to oznacza, że będę mógł niej dziedziczyć.

0:31Za moment się przekonasz, więc stwórzmy sobie tutaj jakiś konstruktor albo jeżeli

0:35go nie utworzymy. Okej może go nie twórzmy, to pamiętasz mówiłem w lekcji poprzedniej, że zostanie

0:40utworzony automatyczny i wywołane z odpowiednimi parametrami, więc

0:44spróbujmy sobie zrobić na razie tyle i teraz utwórzmy sobie nowy obiekt, który naziwmy call. Będzie

0:49to new Collection i podajmy

0:53sobie tutaj parametry takie jak byśmy podali gdybyśmy zrobili new array. Na przykład 10,

0:5720, 30 i teraz spróbujmy sobie wyświetlić za pomocą console.log,

1:02co nam pokaże col. Zobaczmy, jak widzisz pokazało

1:06coś co wygląda w konsoli identycznie jak tablica i to co jest ciekawe, mamy

1:10na tym właściwości length. Wszystko zostało poprawnie odziedziczone. Mamy na

1:14przykład metodę slice, więc możemy sobie wyciąć coś od

1:18zera do jednego. Zostanie nam zwrócona jakby ta nowa tablica, czyli

1:23wszystko działa jak należy. Istnieje tutaj jednak pewna przypadłość,

1:27która jest absolutnie ciekawa. Otóż, kiedy skorzystamy

1:31na naszej klasie, czyli na kolekcji z metody

1:35slice, to nie zostaje zwrócona nowa tablica, ale nowy obiekt w naszym,

1:40w naszej klasie, czyli naszej klasy. To oznacza, że to co zostało zwrócone i

1:44może sobie to zróbmy w ten sposób. Napiszmy let colPart

1:48równa się col slice, właśnie na przykład 0 1,

1:53okej. I teraz sprawdzimy czy colPart jest

1:58instancją, czyli za pomocą instanceof Collection. Okaże

2:04się, że jak najbardziej, czyli to jest o tyle ciekawe, że skorzystaliśmy z metody,

2:08której my nie dodaliśmy, ona jest na array, ale w momencie kiedy na tej metodzie,

2:12czy z tej metody skorzystaliśmy, a ona ma zwrócić nową instancje,

2:16w tym przypadku byłoby to tablicy, to ona wie, że powinna zrobić nową instancję

2:20Collection. Co to dla nas oznacza? Otóż, jeżeli bym tutaj dodał sobie dowolną metodę,

2:24na przykład iterate, która by po prostu

2:28tutaj robiła jakąś pętle i powiedzmy wyświetlała te elementy, to to co nam zostanie

2:32zwrócone z kolei col slice, czyli colPart, ma dostęp do iterate, a gdybyśmy

2:37utworzyli sobie nową tablicę z użyciem new array, to ona by do tego dostępu nie miała,

2:41bo dziedziczymy, Collection dziedziczy z array, a array nie wie nic

2:45o Collection. Tak można by było tutaj powiedzieć. Pokażę ci teraz jak moglibyśmy

2:49troszkę zmodyfikować sobie Collection, bo domyślnie na przykład array, nie wiem czy

2:53wiesz, ale działają tak, że jeżeli podamy sobie tylko jeden parametr, gdybyśmy tutaj zrobili new

2:57array, to wyglądałoby to w ten sposób, że zostanie

3:01utworzona nowa tablica, która nie ma dziesiątki w sobie, ale 10 razy ma wartość undefined.

3:06Możemy sobie to sprawdzić wywołaj my tutaj col i zobacz 10 razy jest undefined. Gdybym

3:11chciał sobie zmienić takie zachowanie, to mógłbym sobie to zrobić w

3:15swoim konstruktorze. Dodamy sobie konstruktor i chciałbym,

3:20żeby on mógł przyjmować dowolną liczbę argumentów, a więc skorzystamy z operatora rest,

3:24które już znasz. Zatem, jeżeli tutaj dodamy ich więcej to one, w formie tablicy zostaną mi przekazane

3:28do args i teraz sprawdzimy. Jeżeli został przekazany tylko jeden parametr,

3:33to nie chcę tworzyć tak jak widziałeś nowej tablicy, która ma na przykład 10 razy undefined,

3:37tylko chcę utworzyć nową tablicę, która będzie miała tylko dziesiątkę, więc

3:41możemy sobie to sprawdzić. Napiszemy if args length równa

3:45się 1, czyli tylko 1 został przekazany to wywołamy sobie konstruktor

3:50rodzica. Nie wiemy jak on wygląda w przypadku array, ale za pomocą super

3:54możemy go wywołać i pamiętasz, że jeżeli tam po prostu przekażemy 1 parametr

3:58tak jak tutaj, no to będziemy mieli nową tablicę która na tyle elementów

4:03dlatego napiszę 1. Jeżeli został przekazany 1, to chcę utworzyć nową

4:07tablicę z 1. Czyli to by wyglądało tak jakby napisał new array 1 i zwróćmy

4:12sobie to do zmiennej a. To sprawi, że będę miał tablice, która

4:16ma długość 1, czyli a length, ale

4:20jest pusta. To zostanie mi zwrócone i następnie będę mógł się odwołać

4:24do this. Pamiętaj, że to this, to już jest obiekt naszej kolekcji, ale że dziedziczymy

4:28z tablicy, to ma ona na przykład indeksy. Będzie można je  w ten sposób dodawać, czyli

4:32pod indeksem zerowym będę chciał przekazać to co jest pod args 0, czyli innymi

4:37słowy, została przekazana dziesiątka. Sprawdziliśmy czy jeden argument został przekazany. Tak,

4:42więc tutaj utworzyliśmy można powiedzieć nową tablicę, która ma długość 1

4:46i następnie przypisaliśmy pod pierwszym argumentem to, co było tutaj w args

4:50gdybym tego tutaj nie zrobił to mielibyśmy z kolei błąd, bo musimy

4:54skorzystać z super. Dlatego to wykonałem, czyli na tym etapie będziemy mieli nową

4:58tablicę, która będzie miała w sobie dziesiątkę, a nie 10 elementów undefined. Natomiast w

5:03przeciwnym wypadku będziemy chcieli po prostu wywołać super i przekazać

5:07mu operatorem spread wszystkie argumenty, które ktoś przekazał, jeżeli ich tutaj będzie

5:11więcej, więc podejżyjmy jak to działa. Wpiszę sobie col i zobacz,

5:15mamy tablice, która ma tutaj tylko jedną dziesiątkę. Tak naprawdę nawet nie

5:19jest to tablica, tylko jest to nasza nowa trasa, nasz nowy typ Collection, który dziedziczy z

5:24tablicy i teraz zmieniliśmy to zachowanie. Natomiast gdybym sobie podał tutaj 20,

5:2830, ten warunek się wykona i tak naprawdę przekażemy te

5:32parametry do konstruktora array, czyli domyślne zachowanie będzie miał tutaj miejsce.

5:36Odwołajmy się do col. Jak widzisz, mamy tablice z trzema elementami. Jak

5:42zatem widzisz, w taki prosty sposób możemy sobie dziedziczyć z wbudowanych typów. Nie ze

5:46wszystkich, ale tych typów jest kilka, z których możemy dziedziczyć. Na przykład ze stringu,

5:50nawet z boolean, czy z Regex, czyli z wyrażeń regularnych. Nie

5:54wiem czy to będzie aż tak bardzo przydatne w twojej codziennej pracy, natomiast wydaje mi się, że

5:58dziedziczenie z tablicy, czyli z array może się w wielu przypadkach przydać, ale

6:02pamiętaj, że działa to wyłącznie właśnie w EcmaScript 6 i jeżeli będziemy to później

6:06jakoś polifilować do starszego zapisu, to nie będzie to działać poprawnie, bo

6:11to już tutaj jest rzecz, której nie da się w stu procentach odwzorować w ES5.