EcmaScript 6: Użycie super na obiektach

0:00W tej lekcji pokażę ci, że możemy korzystać ze słowa super nie tylko w

0:04klasach. Do tej pory widziałeś, że korzystamy z super w konstruktorze klasy pochodnej. Jeżeli

0:09dziedziczymy z innej klasy, ale także, że możemy w którejś z metod wykorzystać super

0:13kropka nazwa metody i w ten sposób odwołujemy się do metody na prototypie klasy

0:17nadrzędnej, gdzie też jest odpowiednio ustawione. Natomiast z

0:21słowa super możemy skorzystać również w przypadku obiektów. Zauważ, że mamy

0:26prostą klasę Person, która ma metodę sayHello i ta metoda zwraca

0:30this firstName i this lastName. Tak naprawdę jej nie interesuje, co

0:34to jest this dlatego, że to this możemy w odpowiedni sposób ustawić i było

0:38tak na przykład przy dziedziczeniu. Kiedy dziedziczyliśmy, to klasa pochodna miała

0:42swoje this, które było odpowiednio tutaj ustawiane. Natomiast teraz nie mam klasy pochodnej,

0:46ale mam zwyczajny obiekt, który też ma firstName i lastName oraz

0:50position. Chciałbym, żeby ten obiekt mógł skorzystać z metody sayHello.

0:55Jak byśmy musieli to zrobić? Otóż musielibyśmy tutaj

0:59dodać sobie własną metodę zasadzie, bo w zasadzie chciałbym dodać metodę sayHello własną,

1:03która będzie wewnątrz wykorzystywała metodę sayHello, która jest

1:07tutaj. Inaczej oczywiście moglibyśmy się odwołać do person sayHello czy

1:11w zasadzie tutaj najpierw prototype, sayHello

1:16i wiemy, że możemy zrobić call przekazując employee1. Ten

1:20zapis już znasz, więc ta funkcja wtedy będzie wywołana, gdzie this ustawimy na employee1.

1:25No więc zwróci nam to, co nas interesuje, gdybyśmy to byśmy to zrobili w console.log'u.

1:29Zobaczmy. Jan Kowalski. Natomiast ja bym chciał

1:33tutaj utworzyć sobie własną metodę sayHello. Skorzystamy

1:37tutaj z tego skróconego zapisu, który też już poznałeś i chciałbym, żeby ona nam wracała

1:42coś, co widzieliśmy już w przypadku dziedziczenia wcześniej. Chciałbym napisać return

1:46i tutaj żebyśmy mieli na przykład nazywam

1:50się. Chciałbym się jakoś odwołać do klasy nadrzędnej, więc sobie

1:54zaraz to uzupełnimy. Postawię sobie tutaj coś takiego albo może

1:58coś w tym stylu i pracuję jako i

2:02tutaj byśmy sobie dodali this position, okej. Czyli teraz

2:07jeżeli sobie to wykomentuje, a skorzystamy z console.log i napiszemy employee

2:11sayHello. Okej,

2:17to mamy jakiś błąd zerknijmy gdzie on się pojawił. Tutaj

2:21nie postawiłem przecinka, okej. No i widzimy nazywam się AAA i pracuję

2:25jako programista. Natomiast tutaj teraz chodzi o to jak w tym miejscu podstawić to,

2:29co nam zwróci metoda sayHello z tej oto klasy. Nie chce, jak

2:34tutaj widzisz tworzyć jakieś nowej klasy pochodnej, ale wyłącznie dla jednego obiektu pożyczyć

2:38sobie taką metodę. Mógłbym zatem skorzystać z takiego zapisu jak jest tutaj wewnątrz

2:42tej funkcji i później to podstawić, ale możemy zrobić jeszcze inaczej. Przy metodach obiektów,

2:47w jednej z lekcji pokazywałem ci, że mamy metodę setPrototypeOf, czyli mógłbym

2:51teraz dla tego obiektu napisać Object setPrototypeOf

2:55i tutaj podajemy obiekt employee, że

3:00chce żeby jego prototypem było to, co mamy pod person prototype. Cały

3:04czas pamiętaj, że chociaż utworzyliśmy ten zapis z klas, to normalnie mamy tam cały

3:08czas prototyp, tak samo jak byśmy to utworzyli z użyciem function. W ten

3:12sposób ten obiekt normalnie jego prototypem było od razu Object kropka

3:16prototype, a teraz będzie to person prototype, a dopiero później Object prototype,

3:20jakby o jeden poziom wyżej kiedy mamy już coś takiego ustawione, moglibyśmy

3:25sobie tutaj stworzyć zmienną gdzie byśmy napisali name i skorzystalibyśmy z Object getPrototypeOf,

3:32żeby to wszystko było dynamiczne,

3:36ta metoda, jeżeli przekażemy jakiś obiekt, to zwróci nam jego prototyp,

3:40czyli jeżeli napisze this, this będzie całym tym obiektem, to zostanie

3:44mi zwrócony person prototype. Na tym miałbym metodę sayHello

3:49i wywołałbym ją z użyciem call, czyli

3:53to, co zrobiłem niżej i podałbym this, czyli w ten cały zapis

3:57zwraca mi prototyp, czyli person prototype. Na nim jest metoda sayHello,

4:02którą mogę wywołać mówiąc co ma być pod this i ona mi wtedy zwróci this firstName i this lastName

4:07biorąc je sobie tutaj z tego obiektu i teraz tutaj gdzie mieliśmy to AAA, mógłbym

4:12podstawić name. Zobaczymy czy ma to sens. Okazuje

4:16się, że jak najbardziej. Natomiast i ten zapis można sobie uprościć, skorzystając

4:21czy korzystając ze słowa kluczowego super. Wykomentuję

4:25sobie zatem tę linijkę i w miejscu gdzie zrobiłem name wystarczy, że napiszę

4:30super i następnie metodę sayHello. Zobacz

4:34o ile to jest prostsze. Czyli to co jest niesłychanie ważne to z super można korzystać

4:38z zewnątrz funkcji w obiektach. Nie musi to być klasa. Natomiast taki obiekt

4:42musi mieć ustawiony jakieś prototyp, czyli innymi słowy gdyby nie miał tutaj

4:46ustawionego prototypu nie powinno być błędu, ale wtedy będzie sayHello wyszukiwane na prototypie

4:50Object kropka prototype. Natomiast jeżeli mu ustawiłem na person prototype,

4:54to tam będzie to szukane i super jest dynamiczne dlatego, że wystarczy,

4:58że wywołam super sayHello. Interpreter od razu znajdzie sobie metodę

5:03sayHello, która jest tutaj. Ustawi odpowiednie this na ten właśnie obiekt, no

5:07i zwróci mi poprawne dane. Zobaczmy czy jest efekt ten sam. Oczywiście tak,

5:12więc możesz w ten sposób sobie pożyczyć czy wykonać metodę z

5:16prototypu. Jeżeli dla obiektu jakiegoś ustawisz prototyp, a zauważ

5:20że to nie jest żadna klasa, w której z czegoś dziedziczyliśmy, to możesz za pomocą

5:25super odwołać się do metody jakiejś klasy nadrzędnej, z

5:29której prototypu dziedziczysz. Ostatnia uwaga jest taka, że nie możesz

5:33tutaj zapisać funkcji w taki normalny sposób. Pokazywałem ci w lekcji o

5:37tych nowościach w literałach obiektów, że można zapisywać te

5:41skrócone funkcje i że w zasadzie działają one tak samo. Tutaj jest taka różnica, że super

5:45nie zadziała na zwykłej funkcji. Widzisz, że generuje to błąd. Podobnie nie zadziała

5:49to gdybym tutaj sobie stworzył funkcję typu arrow, czyli strzałkową, też nie

5:53będzie to działać. Zobaczmy, ponownie mamy błąd, czyli to zadziała wyłącznie

5:57jeżeli korzystamy ze skróconego zapisu dla funkcji. No i

6:01widząc jak to wygląda może jeszcze tylko, żeby pokazać ci, że ten przykład może być

6:05bardziej praktyczny, dodajmy sobie metodą statyczną do klasy Person.

6:10Więc wiesz już jak takie metody dodawać. Napiszmy static na przykład inherit i chciałbym

6:15żeby ona przyjmowała jakiś obiekt i chcielibyśmy tutaj generalnie

6:19zrobić sobie dziedziczenie, już ci pokażę w jaki sposób. Może łatwiej będzie najpierw to wywołać,

6:23czyli zamiast pisać coś takiego, to chciałbym się odwołać do Person, czyli

6:28do naszej klasy, do metody statycznej inherit, którą utworzyłem i chciałbym

6:32ją wywołać z employee. Dzięki temu ten prototyp byłby ustawiony,

6:37więc to co mieliśmy w tym miejscu możemy sobie skopiować. Napiszemy return

6:41Object setPrototypeOf i tutaj przekażemy

6:45ten parametr oczywiście na Person prototype, czyli w tym momencie jeżeli skorzystamy

6:50już takiej fajnej ładnej metody person inherit i przekażemy jakiś obiekt, to

6:54ten obiekt od teraz będzie sobie dziedziczył z tej klasy i mimo tego, że nie tworzyliśmy

6:58nowej klasy pochodnej, a to wszystko powinna działać poprawnie. Zobaczymy. No

7:02i efekt jest dokładnie taki sam. Jak zatem widzisz w taki prosty sposób możesz

7:06nie tworząc nowej klasy pochodnej dla danego obiektu na moment włączyć

7:10mu dziedziczenie. W zasadzie mówię na moment, bo możnaby było to z powrotem później przestawić, aczkolwiek

7:15zazwyczaj nie będzie to miało sensu, ale dzięki temu mamy obiekty już

7:19gotowe, już utworzone i możemy z pomocą na przykład takiej prostej metody

7:23statycznej pozwolić im dziedziczyć z jakiejś klasy.