EcmaScript 6: Arrow function i kontekst

0:00Zobaczyłeś w poprzedniej lekcji jak działają tak zwane arrow function i kiedy

0:04z nich można ewentualnie korzystać. Natomiast pytanie brzmi czy to jest

0:08wyłącznie syntactic sugar, po raz kolejny, czyli czy tylko mamy uproszczony

0:12zapis i wszystko działa dokładnie tak samo czy może jednak nie. Od razu

0:16powiem ci, że nie i są pewne sytuacje, w których arrow function mają przewagę

0:21nad zwykłymi funkcjami, a w innych sytuacjach po prostu nie nadają się do użycia i w

0:25tej lekcji będę chciał ci pokazać kiedy. Przyjdziemy sobie do kodu i utworzyłem

0:29sobie taki prosty literał obiektu, który ma metodę i jest

0:33to sayHello. Zauważ, że utworzyłem ją za pomocą funkcji strzałkowej,

0:37w taki oto sposób i chciałbym kiedy ją wywołamy, wyświetlić sobie po

0:41prostu firstName i lastName połączone na spacji. Nie ma tutaj nic nowego. Gdyby

0:46tutaj był taki zapis zwykłej funkcji, no to pewnie byłoby

0:50to coś co wielokrotnie już widziałeś, więc jeżeli teraz zostawiłbym to z taką funkcją i w

0:54konsoli napisał person sayHello, zobaczymy Jan

0:58Kowalski. Zamieńmy sobie to jednak z powrostem na funkcje strzałkową i zobaczymy

1:02czy efekt będzie rzeczywiście taki sam. Wywołuje sobie person sayHello

1:06i otrzymujemy undefind i undefind i zastanówmy

1:10się dlaczego. Widzimy tutaj, że this kropka firstName zwróciło undefind

1:15i podobnie było w tym przypadku, a to oznacza, że słowo this nie kieruję

1:19na obiekt, w którym znajduje się taka metoda. Dlaczego tak się dzieje? Otóż

1:24nie da się ustawić kontekstu dla funkcji strzałkowej. Czyli nie ma możliwości,

1:28aby wymusić, co ma się znaleźć tam pod this i automatycznie również

1:33te wbudowane mechanizmy JavaScriptu, bo tutaj nic nie napisałem, co miałoby to wymusić,

1:37ale oczekiwałbym tego od JavaScript'u, że tak to będzie działać. Też

1:41tego nie ustawiają, czyli w takiej funkcji nie ma słowa kluczowego this,

1:46ale gdyby całkiem go nie było to mielibyśmy błąd, więc pytanie brzmi, co kieruje

1:50czy na co kieruje słowo kluczowe this. W tym przypadku ono kieruje na

1:54takie this, które jest o jeden zakres wyżej niż zdefiniowana funkcja. Czyli

1:59można powiedzieć, że this tutaj wewnątrz, to będzie to samo co this tutaj. Pytanie

2:03czym jest this tutaj. Tutaj this jest to globalny obiekt, czyli

2:07w przeglądarce window. No bo mamy ten skrypt nieopleciony niczym

2:11innym, gdybym go oplótł jakąś funkcją, generalnie działałoby to tak

2:15samo. Możemy spróbować i zobaczysz, że rezultaty będą

2:19takie same. No chociaż poza tym, że w sumie nie będziemy mogli wywołać

2:24tej funkcji, bo nie mam dostępu teraz do person. Jeżeli to oplotłem, okej.

2:28Więc teraz ci tego niestety nie pokażę, ale gwarantuję ci, że wyglądałoby to tak samo.

2:32Skoro zatem this jest obiektem globalnym, to gdybym sobie utworzył

2:36zmienną za pomocą var, na przykład firstName, to pokazywałem ci już wcześniej w lekcji

2:40o var, że jeżeli utworzymy globalną zmienną i nie mamy tutaj żadnej innej

2:44funkcji, na przykład Piotr, to ona zostanie dodana, tak jakby do window firstName.

2:48No i to nam pokaże, że this firstName w tym miejscu rzeczywiście do tego window

2:53first name się odwołuje. Spróbujmy napisać person sayHello i imię

2:57tym razem jest to Piotr i teraz po co ci to pokazuje? Otóż

3:01dlatego, że wydawałoby się, że jest to problemem, ale w wielu sytuacjach będzie to zaletą.

3:05Teraz chciałbym Ci pokazać taki przykład gdzie będzie to zaletą dlatego to wykomentuje

3:09i wkleję sobie fragment innego kodu. Zróbmy

3:15tak i na sekundę zamienię tylko tą funkcję

3:19na normalną. Taki kod prawdopodobnie też już widziałeś, czyli kiedy wywołamy metodę

3:23sayHello to chciałbym ustawić timeout i po jakimś czasie wyświetlić

3:28sobie this firstName i lastName. Zauważ, że tutaj utworzyłem metodę w ten sposób,

3:32a więc tak jakby to była funkcja, czyli wewnątrz tutaj this bezpośrednio

3:37będzie kierować na ten obiekt. Czyli nie ma tego problemu, który jest wyżej. Tutaj będzie

3:41to działać poprawnie, ale kiedy sobie dodam setTimeout i jeszcze jedną funkcję

3:45ustawię do wykonania, to okaże się, że dla setTimeout, wewnątrz

3:50jego this znowu będzie kierować na obiekt globalny. Mogę to udowodnić tutaj

3:54odświeżając i robiąc person sayHello. Po dwóch sekundach nam się

3:58metoda wykona i znowu mamy undefind i undefind. Chociaż w tym miejscu

4:02this skierowało na poprawny obiekt. No i teraz jest wiele

4:06możliwości obejścia takiego problemu. Jednym z nich jest na przykład zapisanie self

4:11równa się this, powiedzmy, w tym miejscu albo that, często tak się pisze i

4:15tutaj odwoływanie się do that. Wtedy oczywiście ma to sens i powinno

4:20działać. Tutaj nam się dziś pojawił błąd. Okej mam dwie kropki. Natomiast,

4:26jak sam widzisz, nie jest to najbardziej eleganckie rozwiązanie chociaż powszechnie cały

4:30czas stosowane. Teraz mamy Jan Kowalski. Innym rozwiązaniem byłoby tutaj powrót

4:35do this, ale żeby ustawić dla tej funkcji context to możemy

4:39zrobić tak zwany bind. Jeżeli bindujemy funkcję, czyli wywołujemy na funkcji. Tutaj

4:44jest cała funkcja, metodę bind. To bind zwraca jakby nową funkcję, którą jeśli wywołamy, to

4:48wewnątrz this będzie kierować na to co podamy jako pierwszy parametr, więc tu mogę podać

4:53co chcę, ale że podam this, bo jakby w tym miejscu jeszcze cały

4:57czas jesteśmy jak w tym zakresie, this jest poprawne, więc jeżeli tak zrobię i wywołamy

5:02sobie raz jeszcze tą metodę, to też okaże się po dwóch sekundach, że wszystko jest okej. Natomiast,

5:07żeby nie kombinować to pokażę ci Jaka jest przewaga właśnie funkcji strzałkowej. Zamiast

5:13pisać function tworzymy funkcje strzałkową, której nie da się wymusić this jak wspomniałem,

5:17czyli setTimeout wywołując tę funkcję, nie wymusi, że this jest obiektem

5:22globalnym, tylko ona będzie miała dostęp do this, takiego jak jeden zakres wyżej,

5:26a że tutaj ten zakres jest poprawny, bo gdyby to była funkcja strzałkowa, no

5:30to dokładnie tak jak tutaj byłby problem, ale że to jest zwykła funkcja, to tutaj this jest

5:34poprawne, to i funkcja strzałkowa powinna mieć poprawne this. Wywołajmy

5:39to sobie i raz jeszcze sprawdźmy. Jak widzisz, po dwóch sekundach Jan Kowalski

5:43się pojawia w konsoli, więc wszystko jest okej. Widzisz zatem, że taka

5:47funkcja może być bardzo przydatna, kiedy chcemy mieć dostęp do this albo

5:52na przykład do zmiennej arguments, tak jak już ci pokazywałem, która jest jakby o jeden zakres

5:56wyżej i nie chcemy, żeby jakiś mechanizm wymuszał użycie innego

6:00this. Teraz pokażę ci jeszcze jeden przykład, że

6:04nie możemy ustawić kontekstu i jak to wygląda, gdybym miał właśnie taki obiekt

6:08person i tutaj na sekundę jeszcze zróbmy z tego normalną funkcję, tylko w takim skrótowym zapisie,

6:13to wiemy, że wywołanie person sayHello zwróci nam Jan

6:17Kowalski. Natomiast pod to this możemy podstawić coś innego i możemy

6:21to wymusić, więc jeśli bym się odwołał do person kropka sayHello.

6:25Nie wywoływał tej metody w ten sposób, ale za pomocą funkcji

6:29czy metody call. Mam nadzieję, że też ją znasz. Ona generalnie zrobi to samo co

6:34zrobiłaby, zrobiłby taki zapis. Czyli wywoła funkcję, ale

6:38jako pierwszy parametr mogę podać to, co będzie pod this w takiej funkcji, więc

6:43ja sobie tutaj wpiszę obiekt. To będzie this tutaj i w

6:47tym obiekcie wpiszę firstName równa się, na przykład, Anna i lastName

6:52równa się Nowak i oczywiście

6:56to coś zwraca, więc chcielibyśmy to wyświetlić, dlatego ja to zawrę w console.log'u. Może

7:01to nie wygląda aż tak elegancko, ale wiemy o co chodzi. No i widzimy Anna

7:05Nowak, czyli mogłem wymusić sobie na funkcji sayHello, co ma być pod this

7:10wewnątrz tej funkcji. Wymusić to można na trzy sposoby. Za pomocą call, apply

7:15oraz metody bind i teraz czy można ustawić this jeżeli

7:20byłaby to funkcja strzałkowa. Sprawdźmy. Zobaczmy

7:25i będę miał wartość undefind oraz undefind. Czyli nie

7:29da się zmienić this, chociaż nie generuje to błędu i metoda call na takiej funkcji jest dostępna

7:33i działa, to nie da się za żadne skarby ustawić co ma się znaleźć

7:37pod this w takiej funkcji i pod tym względem jest to zaletą tej funkcji, że

7:41jeśli z niej korzystamy w takim przykładzie jak tutaj wyżej. Mamy pewność, że to this wewnątrz

7:45nie będzie ustawione w żaden sposób przez funkcję setTimeout czy jakąkolwiek inną

7:50do, której to zostało przekazane. Tylko zawsze będzie kierować na to, na

7:54co kierowało jeden zakres wyżej. Jak zatem widzisz, w pewnych

7:58sytuacjach jest to zaletą, ale na przykład może być wadą w taki sposób, że nie możemy

8:02w ogóle z tej funkcji korzystać. Na przykład gdybyśmy chcieli przypisać

8:06kliknięcie do jakiegoś przycisku. Mam tutaj na stronie przycisk kliknij mnie i on

8:10się znajduje tutaj. Ma on identyfikator button 07, bo 07 to nasz

8:14przykład i będę chciał do niego przypisać kliknięcie. Możemy go znaleźć

8:18na stronie za pomocą document query selector, podając identyfikator

8:23i możemy pisać do niego kliknięcie na wiele sposobów. Przypiszmy za

8:27pomocą metody onclick, tak na szybko. No i normalnie jeżeli tutaj sobie jakąś

8:31funkcję bym wstawił, to po wywołaniu tej funkcji, kiedy kliknę

8:35na taki przycisk, to this będzie kierować dokładnie na ten element, na ten przycisk,

8:39czyli będę mógł z nim zrobić co będę chciał. Czyli będzie to obiekt identyczny

8:43jak zwrócone z takiego zapisu. Tutaj jeszcze otrzymamy pod parametrem e

8:47zdarzenie event. Generalnie działa to tak, że e target

8:52będzie nam zawsze kierowało na ten kliknięty przycisk. Na ten kliknięty

8:56element i this również. Czyli gdybym zrobił takie porównanie przy e target, console.log. To

9:02jest dokładnie to samo co this. Powinniśmy otrzymać true. Klikam

9:07i widzimy w konsoli pojawia się true. Natomiast mogłoby nas tutaj kusić, aby przepisać

9:11funkcję strzałkową, bo przecież mogłoby to być krótsze, szybsze i moglibyśmy

9:15to zrobić w taki sposób i pytanie czy this,

9:19to będzie dokładnie ten kliknięty przycisk. Myślę, że już

9:23znasz odpowiedź, widzimy w konsoli false. Czyli jeżeli chciałbyś korzystać

9:27przy przepisywaniu zdarzeń do elementów z funkcji strzałkowej, to owszem

9:32możesz to robić, ale pamiętaj, że this nigdy nie zostanie ustawione na to

9:36co cię interesuje, czy w zasadzie na ten przycisk czy jakiś inny element na

9:40które wywołało się zdarzenie, ale będziesz miał tam dostęp do e target i znowu

9:44są takie sytuacje w których będzie to dla ciebie przydatne, bo takie zdarzenie miało być

9:48gdzieś w jakimś obiekcie, gdzie po kliknięciu na przycisk chciałbyś się odwołać do this,

9:52które ma kierować na ten obiekt czy na jeszcze coś innego, a nie

9:56na to na czym zostało wywołane zdarzenie. Więc czasami może to

10:00być przydatne, po prostu ważne, abyś wiedział w jakich sytuacjach nam

10:04to this nie zostanie ustawione. Generalnie przy funkcji strzałkowej this nigdy nie zostanie

10:08zmienione. No i na koniec, pokażę ci jeszcze jeden przykład również

10:13jest to bardzo istotne, aby o tym pamiętać. Zróbmy sobie coś takiego, wkleję

10:20taki fragment kodu, czyli utworze sobie po prostu funkcje, ale tym razem strzałkową od

10:24razu, która ma przyjmować firstName i zapisywać to w this firstName, czyli

10:28stworzyłem konstruktor i teraz chciałbym utworzyć sobie nowy obiekt, więc napiszę

10:33person1 new Person i podamy sobie

10:37na przykład Anna. Gdyby to nie była funkcja strzałkowa, tylko normalna

10:41funkcja. Po

10:45odświeżeniu tutaj. Jeśli bym się odwołał do person1, mamy

10:49firstName Anna. Nowy obiekt został utworzony. Natomiast zamieńmy to z powrotem

10:53na funkcje strzałkową i zobaczymy co się stanie. Zobaczymy

10:57w JavaScripcie błąd, person is not a constructor, czyli to jest kolejna

11:01różnica pomiędzy funkcją strzałkową, a zwykłą funkcją. Nie można utworzyć z niej

11:05nowych obiektów, czyli ona nie może być traktowana jako konstruktor. Z tego

11:10powodu taka funkcja, nie zawiera również prototypu i gdybym chciał napisać consol.log person

11:14prototype, to otrzymamy

11:18tutaj undefind, czyli funkcje strzałkowe nie mają prototypu, nie ma możliwości

11:23wymuszenia na nich co ma być pod słowem this wewnątrz ich ciała

11:27i nie można z nich korzystać jak z konstruktorów. Jak widzisz są tego

11:31zalety oraz wady i wszystko zależy już od twojego konkretnego użycia. Te

11:36funkcje na pewno świetnie sprawdzą się przy filtrowaniu na tablicach, ale też wielu innych

11:40sytuacjach gdzie chcemy mieć dostęp do this, które jest zdefiniowane jakby w o

11:44jednym zakresie wyżej.