EcmaScript 6: Tworzenie obiektu proxy

0:00Wiesz jak działają gettery i settery, dlatego teraz mogę ci pokazać coś co jest nowością,

0:04właśnie dostępną w EcmaScript 6 i jest to tak zwane Proxy API. Nie

0:09jest to być może coś z czego będziesz bardzo często korzystał. Dlatego też nie będziemy tego bardzo

0:13gruntownie wszystkich metod jakie są dostępne omawiać w tym kursie. Natomiast chciałbym

0:18ci pokazać na czym to polega i w kolejnej lekcji jeszcze jedną z tych metod sobie

0:22wykorzystamy i pokażę ci gdzie znaleźć kolejne. Natomiast zaczniemy sobie, jak

0:26to mówią, od początku, czyli mam taki prosty obiekt i w lekcji poprzedniej pokazałem ci,

0:30że w ES5 możemy dodać sobie getter'y lub setter'y. Natomiast

0:34mówiłem ci, że gdybym chciał przechwycić, że ktoś napisał na przykład age kropka age, to

0:39nie mogłem tego zrobić jeżeli nie przypisałam sobie setter'a lub getter'a, właśnie

0:43dla age. Teraz będę mógł utworzyć sobie w EcmaScript 6 tak zwany obiekt Proxy, któremu

0:49mogę przekazać już istniejący obiekt i na tym Proxy będziemy pracować,

0:53czyli będzie to taki pośrednik. Dlatego napiszę sobie let Proxy, tak

0:57nazwę zmienną i zrobimy new Proxy. To jest znowu nowy

1:01konstruktor, który wywołujemy z new. Jako pierwszy parametr przekazujemy mu

1:05obiekt, nad którym chcemy utworzyć taki Proxy taki w wrapper,

1:09czyli chcemy go opakować, więc napiszmy person, czyli ten który mamy u góry i

1:13jako drugi podajemy obiekt, taki literał obiektu, w którym

1:17będą różne metody. Zaraz do tych metod sobie przejdziemy, natomiast ja chciałbym

1:21skorzystać z metody get. Możemy napisać tak albo

1:25w skróconym właśnie takim zapisie, który znamy ES6, że on w obiektach

1:29jest dostępny i to już nie jest getter, taki jak w lekcji poprzedniej, gdzie pisałem get i nazwa

1:34funkcji. To jest po prostu tutaj normalna funkcja wstawiona do tego literału obiektu,

1:38która musi mieć nazwę get. Funkcja będzie miała tutaj swoje ciało, natomiast

1:43przyjmuje kilka parametrów. Pierwszy to będzie target i będzie to

1:47właśnie ten obiekt, na którym wywołało się takie zdarzenie. Można mówić

1:51o tym, że jest to zdarzenie, bo to w pewnych momentach będzie się wywoływać. Jako drugi

1:55będziemy mieli property, czyli będzie to właściwość i o tym ci mówiłem wcześniej,

1:59że jeżeli ktoś skorzysta na przykład z age, chciałbym móc to jakoś odczytać. Tutaj

2:03będę miał taką możliwość i jako trzeci będzie to receiver i tym

2:08razem będzie to jakby już ten obiekt proxy, czyli to będzie to, co pod proxy i zróbmy

2:12sobie teraz console.log target, console.log property

2:17i console.log receiver i teraz

2:21kiedy nam się to wywoła. Powiem ci od razu, że nie wtedy, kiedy na obiekcie będziemy

2:25cokolwiek robić, tylko na obiekcie Proxy, więc ten Proxy, tak naprawdę nie jest,

2:29można powiedzieć, że niewidzialny z tego powodu, zobaczymy,

2:34że jeżeli z niego skorzystam proxy firstName, to

2:40mogę z tego skorzystać, co prawda została zwrócona wartość undefined, ale o tym za moment,

2:44ale zobacz, że wykorzystaliśmy firstName i wywołała się nasza funkcja

2:49get i jeszcze na sekundę czym jest ta funkcja. Otóż te funkcje nazywają się pułapkami,

2:53czyli z angielskiego trwa, a więc możesz na takim dowolnym obiekcie zastawić

2:58różne pułapki, o których za moment. Jedną z pułapek jest get, która wywołała

3:02się wtedy, kiedy ktoś spróbuje pobrać jakąś właściwość takiego obiektu. Zauważ,

3:06że ona się wywołała i pod target w console.log'u mamy tenże

3:10właśnie obiekt, czyli Object jako property mamy firstName,

3:14a jako receiver mamy proxy, czyli cały ten obiekt proxy. Jeżelibyśmy

3:19napisali proxy na przykład age. Zauważ, że w tym obiekcie age, w ogóle nie

3:23istnieje, to też uruchomi się nasza funkcja, gdzie pod property będę

3:27miał age. To teraz pytanie brzmi, w jaki sposób możemy zwrócić domyślne

3:31wartości, bo gdybym tutaj napisał person firstName, to

3:35mamy Jan, ale jeżeli napisze proksy firstName, to jak widzisz

3:39nasz get się wywołał, ale nic nie zwróciliśmy, więc mamy tutaj undefined. Od

3:44razu ci powiem, że Proxy API współpracuje z tak zwanym Reflect API. One

3:49są stworzone po to, żeby pracować razem. Dlatego tutaj będę chciał w tej

3:53funkcji zwrócić Reflect. Jest to taki globalny

3:58obiekt. Następnie get, czyli nazwa tej metody będzie zawsze taka sama, jak

4:02nazwa pułapki jaką zastawiliśmy i praktycznie parametry też zawsze są takie same,

4:07czyli przekażę target, property i receiver i zobaczymy

4:12teraz jaki będzie efekt. Jeżeli teraz bym napisał proxy firstName, to

4:16będę miał tutaj Jan, czyli tak naprawdę wszystko zadziałało tak samo,

4:20bo domyślna wartość została zwrócona, ale ja mogłem przechwycić, że

4:24ktoś w ogóle czegoś takiego skorzystał. Spróbujmy napisać proxy age i widzimy,

4:29że jest to wartość undefined domyślna, bo nigdzie tej wartości tutaj nie ma. Natomiast

4:33mógłbym teraz, mając już coś takiego sprawdzić sobie if property

4:38równa się age prawda, to coś co z tym zrobić i teraz na

4:43tym przykładzie chciałbym ci podać praktyczny przykład. W JavaScripcie często jest

4:47taka konwencja, że jeżeli jakieś dane w obiekcie mają być ukryte, to robimy je podkreślnikiem. Na

4:51przykład w ten sposób. One nie są co prawda ukryte. Można się do nich dostać, tylko

4:56taka nazwa, ale to pokazuje innym deweloperom, którzy korzystają z naszego kodu, że

5:00tych wartości nie powinno się odczytywać bezpośrednio i gdybyśmy z

5:04jakiegoś naszego kodu zwrócili takie proxy, to moglibyśmy taką wartość dodatkowo

5:09sobie ukryć. Zauważ, że moglibyśmy zrobić tak, że jeżeli property

5:13i wiemy, że jeżeli ktoś skorzysta

5:18z proxy age, to property

5:22to będzie będzie taki string, podkreślnik age, więc jeżeli property charAt.

5:26Jest to metoda string'u, która pozwoli mi pobrać znak pod

5:30indeksem zero. Jeżeli on się równa podkreślnik, więc może to być podkreślnik

5:35age lub cokolwiek innego, to wtedy chciałbym zwrócić undefined,

5:39czyli tak jakby tego zupełnie w tym obiekcie nie było. Natomiast w przeciwnym wypadku właśnie

5:43chcę zwrócić wartość domyślną, dlatego przekazuje, to dalej do Reflect, tutaj

5:47do metody get i przekazuje mu wszystkie te potrzebne parametry, to ona wtedy zwróci wartość

5:51domyślną. No i sprawdźmy teraz proxy age zwraca undefined. Mimo

5:56tego, że w tym obiekcie person mamy coś takiego jak age. Natomiast proxy

6:01na przykład firstName zwróci nam już Jan. No

6:06i teraz pytanie czy to będzie dla ciebie przydatne w twojej codziennej pracy. Nie wiem, natomiast chciałbym

6:10ci pokazać jeszcze kilka pułapek, które można tutaj zastawić, dlatego przejdziemy

6:14sobie na stronę Mozilla Developer Network.

6:19Pokażę ci jakie są pułapki i z jednej z nich jeszcze skorzystam w lekcji

6:23kolejnej, czyli tutaj gdybyśmy sobie przeszlki, to wszystkie pułapki znajdziesz

6:27właśnie w tym miejscu. Na przykład getPrototypeOf czy setPrototypeOf i jeszcze

6:32kilka innych. My skorzystaliśmy z get, ale również można ustawić na przykład

6:36set. Zauważ, że to nam pozwala, podobnie jak symbole wbudowane, o

6:40których już mówiliśmy w tym kursie na takiej niskopoziomowy dostęp do tego, co dzieje się

6:44w tym języku JavaScript. Bo zauważ, że mamy na przykład pułapkę delete

6:48property, która się wywoła wtedy, kiedy ktoś na naszym obiekcie

6:52zrobiłby delete proxy, na przykład firstName. Wcześniej

6:56nie mieliśmy możliwości przechwycenia czegoś takiego, a teraz jeżeli ktoś chciałby usunąć

7:00firstName, to właśnie pułapka delete, którą moglibyśmy zastawić. Oczywiście polecam

7:05ci abyś z tym poeksperymentował i w przypadku każdej z tych pułapek zobaczył jakie

7:09konkretnie parametry tutaj są przekazywane i co powinniśmy zwrócić z funkcji. Natomiast

7:13zawsze najlepiej jest skorzystać z Reflect, przekazując te parametry, bo reflect

7:18na przykład w przypadku delete zwróci ci true lub false, bo okazuje się, że

7:22taki zapis w  JavaScript'cie zwraca nam true lub false czy uda się usunąć

7:26jakąś właściwość czy nie. Dlatego ważne jest korzystanie z Reflect, bo Reflact po pierwsze pozwoli

7:31na przykład usunąć taką właściwość, a po drugie zwróci poprawnie true lub false w to

7:36miejsce i ty zwrócisz to dalej. Jak zatem widzisz, możemy takie pułapki zastawiać,

7:40więc przeczytaj sobie tutaj do czego one służą. Polecam

7:44ci abyś sobie ewentualnie z tym poeksperymentował. No i być może znajdziesz w swoim,

7:48swojej pracy takie przypadki, gdzie będzie to dla ciebie przydatne. Niemniej

7:52jednak widzisz, że taka możliwość została dodana, no i można z niej skorzystać.