EcmaScript 6: Symbole wbudowane

0:00Tą lekcją kończymy poznawanie symboli, chociaż jeszcze z jednego specyficznego symbolu będziemy w tym

0:04kursie korzystać, ale o tym później i pokażę ci teraz symbole wbudowane. Być

0:08może w lekcjach poprzednich, nie do końca byłeś pewien, kiedy te symbole ci się przydadzą. Teraz

0:13pokażę ci symbole wbudowane, które są bardzo przydatne, chociaż

0:17to znowu nie oznacza, że w takiej normalnej codziennej pracy z każdego z nich będziesz korzystał. Zapewniam

0:22cię, że nie, ale nie wyobrażam sobie żebyś nie wiedział przynajmniej, że takie symbole

0:26istnieją i jak one działają. A więc możemy tutaj przejść do kodu i zauważ,

0:30że w komentarzu od razu wypisałem wszystkie, tak zwane well-known symbols, czyli

0:34symbole wbudowane. Mamy je dostępne na bezpośrednio jakby

0:38na tej funkcji symbol, czyli my wcześniej korzystaliśmy z symbol, wywołując ją lub na przykład

0:42mieliśmy jakieś metody typu keyFor, a okazuje się, że tutaj

0:47mamy również pewne właściwości, które przechowują już gotowe symbole. Znowu

0:51nie wiemy czym jest symbol, bo nawet jeżeli swój własny utworzymy, nie wiemy jaką on przechowuje

0:55wartość. Ważne jest to, że ta wartość jest zawsze unikalna i dla nas od razu ES6

1:01daje nam, oferuje nam pewne wbudowane symbole. I teraz

1:05przejdziemy sobie przez kilka z nich, ale nie będziemy dokładnie tłumaczyć wszystkich. Powiem

1:10ci tylko jak one działają. Zaczniemy od symbolu hasInstance. Utworzyłem

1:15sobie klasy person, dokładnie w taki sposób, jak już mieliśmy i klasę

1:19employee, która z niej dziedziczy. Możesz się temu kodowi przyjrzeć, natomiast

1:23już to widziałeś tym kursie. Pamiętasz, że zasymulowaliśmy sobie tworzenie

1:27klasy abstrakcyjnej, czyli takiej, z której nie można bezpośrednio użyć. Nie można z niej utworzyć

1:31nowej instancji. Jest to przez ten oto zapis, więc nie możemy napisać new

1:36Person. Nie będę ci już tego pokazywał, bo wiemy, że tak jest. Natomiast jeżeli

1:40sobie utworzymy klasę pochodną, czyli employee, z klasy Person,

1:44to pytanie czy employee jest instancją klasy person czy

1:48nie. Sprawdźmy to sobie w przeglądarce piszący employee1

1:53instanceof Employee najpierw. Okazuje

1:59się, że tak, no bo została ona utworzona z new Employee, ale że employee dziedziczy

2:04z Person, to zobaczmy czy employee jest też instancją klasy Person. Okazuje

2:09się, że tak i pytanie czy moglibyśmy to zmienić. W EcmaScript 5 nie

2:13mieliśmy dostępu, do niskopoziomowych rzeczy, które wykonywał interpreter

2:18języka JavaScript i właśnie to w EcmaScript zostało w wersji 6 dodane. To

2:23nie znaczy, że musisz z tego korzystać, ale to znaczy, że wielu deweloperów przez lata

2:27czekało na takie możliwości. Stąd one teraz w postaci między innymi

2:31symboli się pojawiły, ale również w postaci Proxy API, o którym jeszcze w tym

2:35kursie będziemy mówić, więc symbol hasInstance pozwala

2:39nam zdefiniować, co się stanie, kiedy ktoś użyje i może zróbmy

2:43sobie to tutaj, operatora instanceof, czyli employee1,

2:48instanceof Person. Do tej pory nie mieliśmy wpływu

2:52na to, co tutaj się wydarzy. Okazuje się, że teraz za pomocą symbolu możemy przypisać funkcję,

2:57która się wywoła kiedy ktoś spróbuje cokolwiek instanceof Person

3:02wywołać. Wtedy będziemy w tej funkcji mieli do tego cokolwiek dostęp. Musimy

3:07sobie to dodać na klasie Person, jako metodę. Pokazywałem ci już że

3:11możemy wyliczone metody tutaj dodawać, czyli tak zwane computed properties i odwołamy

3:15się właśnie do Symbol i następnie do hasInstance. W ten

3:20sposób dodamy sobie pod Symbol hasInstance pewną metodę i język

3:26JavaScript czy interpreter JavaScript'u w momencie, kiedy ktoś wywoła instanceof. Sprawdzi

3:31czy na klasie Person, czyli na prawym operandzie, tutaj tego operatora, czy istnieje

3:36dodana, poprzez symbol hasInstance metoda. Jeżeli tak, to

3:40przekaże nam tutaj pod obj, to co jest po tej stronie i

3:44zależności czy zwrócimy true lub false, to instanceof

3:48zwróci true lub false. Więc w tym przypadku, skoro jest to klasa abstrakcyjna, z której nie

3:52można tworzyć nowych żadnych instancji, to jeżeli jakaś instancja

3:56z niej dziedziczy, to powiedzmy, że też chciałbym zwracać false, że employee nie jest

4:00instancją tej klasy, wtedy bardziej działałoby to jak tak zwany interfejs. Niemniej

4:05jednak, tutaj możemy sobie zwrócić za każdym razem false. Mógłbym

4:09tutaj coś sprawdzać, bo po to mam to obj i będę miał pod

4:13tym obj dostęp, dokładnie do tego obiektu, więc wszystko mogę na nim zrobić, ale

4:18w tym przypadku chcę po prostu zwrócić false. Sprawdźmy, okej i mamy

4:22true, czyli coś nam nie działa, mógłbyś się zastanawiać dlaczego. Okazuje się, że jeżeli

4:26dodaliśmy to w ten sposób, to zostało dodane jak do prototypu, a interpreter JavaScriptu,

4:31kiedy wykona sobie instanceof Person, to oczekuje, że będzie to metoda

4:35statyczna, więc tutaj napiszmy sobie static dodajemy to jako metodę statyczną. Ona

4:39zawsze będzie zwracać false i jak widzisz teraz mamy false, a więc jeżeli sprawdzimy

4:43czy employee jest instancją klasy Person, będzie zwrócone false. Natomiast

4:47jeżeli byśmy sprawdzili czy jest instancją klasy Employee, będziemy mieli

4:51zwrócone true, przynajmniej tak być powinno, ale tutaj pojawia się kolejna

4:55rzecz, o której już ci mówiłem, czyli dziedziczenie statycznych metod. To oznacza,

4:59że metoda hasInstance, tutaj dodana poprzez symbol,

5:03została odziedziczona też przez employee. Dlatego tutaj, w tym konkretnym przypadku musielibyśmy

5:08ją nadpisać. Ona tutaj też otrzyma obiekt i z nim

5:12musimy zwrócić true or false, w zależności od tego czy obiekt jest tą instancją. Dlatego napiszmy,

5:18jeżeli obj konstruktor równa się employee,

5:22czyli jeżeli konstruktor tego konkretnego obiektu kieruje na employee, to

5:26wtedy będziemy chcieli zwrócić true, więc return po

5:30prostu, w ten sposób, ten operator porównania, zwróci true lub false. Raz

5:34jeszcze sprawdźmy i teraz widzimy, że mamy tutaj true przy takim zapisie,

5:38ale przy zapisie person, zobaczmy. Już będziemy mieli false.

5:43Jak zatem widzisz, te well-known symbols pozwalają nam wpływać

5:47na to, jak się zachowuje interpreter języka JavaScript, na przykład przy

5:51takich operatorach jak instanceof. Nie mieliśmy takiej możliwości wcześniej, w przypadku

5:55jako EcmaScript5. Zerknijmy sobie na górę jeszcze, jakie tutaj mamy

5:59inne symbole, mamy toPrimitive i toStringTag, więc będę chciał

6:03ci teraz te dwa z nich pokazać. Więc jeżeli byśmy sobie chcieli

6:07dodać symbol toStringTag i pytanie, co on robi. Otóż spróbujmy

6:11sobie zrobić console.log, w którym chcielibyśmy coś dodać, czyli

6:15na przykład jaki string i napisalibyśmy Obiekt

6:19to i do tego chcielibyśmy dodać nasz employee, employee1.

6:25Co się stanie, jeżeli w takim przypadku, do stringu będziemy chcieli dodać nasz obiekt. Zobaczmy,

6:30zostanie tutaj dodany object Object. No i tak jest domyślnie właśnie

6:34w języku JavaScript, że coś takiego zostanie wtedy zwrócone, ale możemy wpłynąć

6:38na to co jest podane w tym miejscu, bo są biblioteki, które po prostu sobie sprawdzają

6:42czy na przykład, taki obiekt zwrócony, jeżeli się na nim wykona taką

6:46metodę, bo w zasadzie dokładnie to samo by się stało, gdybyśmy wykonali metodę toString.

6:52Zobacz, też nam zwróci object Object, ale przy dodawaniu do string'u samo

6:57się to stało, więc są różne biblioteki, które sprawdzają na przykład czy to co tutaj zostaje

7:01zwrócone czy tutaj jest Object czy jest na przykład coś innego. Więc my

7:05możemy do naszej klasy sobie dodać co ma być w tym miejscu zwracane i możemy

7:09to dodać za pomocą właśnie symbolu, który się nazywa toStringTag. Dodalibyśmy

7:14sobie to tutaj za pomocą takiej wyliczonej właściwości i chcielibyśmy,

7:18żeby to zwracało, w tym przypadku, Person. Natomiast

7:22samo to nam nie zadziała, zobaczymy. Dalej jest to object Object, bo

7:26to musi być ustawione jako getter, czyli tu musi być napisane get. Jeżeli jeszcze

7:31nie wiesz jak działają gettery, to jest akurat coś co było w EcmaScript 5. To w

7:35tym kursie, poniżej znajdziesz też lekcje w przypadku Proxy API gdzie

7:39w jednej lekcji tłumaczę na szybko jak działają gettery w ES5. Natomiast taki

7:43getter musielibyśmy dodać i wtedy okazuje się że object Person zostanie

7:47zwrócone. Możemy jednak jeszcze dodać sobie inną rzecz,

7:51czyli toPrimitive i ta metoda, którą sobie tutaj dodamy, też

7:56będzie to getter, Symbol toPrimitive. Ona się będzie wywoływać

8:00za każdym razem, kiedy w takim kontekście prymitywnym zostanie

8:04użyty nasz obiekt, właśnie na przykład tutaj, czyli w tym miejscu interpreter próbuje

8:09nasz obiekt skonwertować do wartości prymitywnej i domyś;lnie, jak widziałeś,

8:13jest robione coś takiego, jak tutaj widzieliśmy object i

8:17było Object. Ten string tak mogliśmy zmienić, ale jeżeli w ogóle całe

8:21to zachowanie chcemy zmienić, to możemy tutaj coś zwrócić. Więc w tym miejscu, powiedzmy, że zwrócimy

8:25sobie sayHello, czyli return this sayHello. Różne

8:31obiekty możesz tworzyć i zależy co chcesz zwrócić. Jeżeli ktoś spróbuje

8:35w takim kontekście tekstowym, na przykład, użyć twojego obiektu. W tym przypadku dla

8:39próby zróbmy sobie coś takiego. Okej, pojawia nam się błąd w linijce 65.

8:44Zobaczmy, jest to dokładnie tutaj, więc to oznacza, że coś zrobiłem

8:48nie tak. Okej, już wiem, w tym przypadku to nie powinien

8:52być getter, więc tutaj na to należy uważać. Jest to zwykła metoda i zobaczymy, teraz

8:56obiekt to i mamy tutaj nazywam się Jan Kowalski, pracuje jako programista, więc

9:01jak zatem widzisz, te symbole pozwalają nam w taki niskopoziomowy

9:05dostęp do tego co dzieje się w różnych momentach wykonywania

9:10takiego kodu JavaScript. Czyli wcześniej na przykład nie mogliśmy wpłynąć na to co

9:14się dzieje kiedy mamy użyte na naszym obiekcie instanceof. Teraz

9:18mamy na to wpływ. Podobnie możemy zmienić ten tag za pomocą właśnie toStringTag lub możemy

9:23nawet nadpisać w ogóle co się dzieje kiedy ktoś będzie chciał użyć naszego

9:28obiektu jako wartości prymitywnej. Jak widzisz, interpreter robi sobie to automatycznie,

9:32na przykład, przy takiej operacji, ale teraz mamy na to wpływ. Zerknijmy na

9:36szybko jeszcze na pozostałe symbole. Mamy jeszcze isConcatSpreadable i on

9:40polega na tym, że jeżeli chcielibyśmy naszej, z naszego obiektu korzystać,

9:45jak z tablicy, czyli na przykład mielibyśmy jakąś jedną tablicę, chcielibyśmy połączyć

9:49ją z naszym obiektem, który byłby tutaj. To jeżeli nasz obiekt

9:53miałby indeksy numerowane od zera i właściwość length i pod symbolem

9:57isConcatSpreadable dodali byśmy mu true, żeby zwracało wartość true,

10:01to wtedy, jeżeli na innej tablicy użyjemy concat i spróbujemy

10:06dodać do tego nasz obiekt, to poszczególne jego indeksy zostaną właśnie rozstrzelone

10:10jako 01 i tak dalej i tak dalej. Gdybyśmy takiego symbolu nie

10:14dodali, to wtedy normalnie cały ten obiekt byłby jako jeden element dodany

10:18do tamtej tablicy. Jeśli chodzi o symbol species to on pozwala

10:22nam wpływać na to, co będzie zwrócone jeżeli skorzysta się z jakiejś nowej metody. Teraz

10:27ci przypomnę, że jeżeli dziedziczyliśmy sobie z klasy array, czyli z wbudowanego typu,

10:31to kiedy na tej naszej nowej klasie Collection, być może to pamiętasz, skorzystaliśmy

10:35ze slice, to został zwrócony nowy obiekt naszej klasy Collection,

10:39a nie array i to właśnie można kontrolować za pomocą symbol species. Jeśli

10:44chodzi o kolejną linijkę, czyli match, replace, search, split to pozwala nam

10:48to tworzyć własne klasy, w których jeżeli za pomocą takich symbolów dodamy metody,

10:52to obiekty naszej klasy będziemy mogli wykorzystywać wszędzie tam gdzie

10:56można było wykorzystać wyrażenia regularne. Zauważ, że te

11:00metody to są metofdy string'u, którym przekazuje się wyrażenie regularne, więc teraz zamiast

11:04wyrażenia regularnego będzie można przekazać nasz obiekt, z naszej klasy, pod warunkiem,

11:09że on będzie którąś z tych metod sobie zawierał. Symbol unscopables

11:14z kolei, pozwala nam powiedzieć które z właściwości obiektu mają być pomijane,

11:18kiedy korzystamy z takiego, z takiej konstrukcji with, która jest niezwykle rzadko

11:22w JavaScripcie wykorzystywana i nie jest polecane jej użycie. Jeśli jednak korzystałbyś

11:26z with i nie chciałbyś, aby w tym bloku kodu pewne rzeczy to się znajdowały,

11:31pewne właściwości obiektów, to możesz je zapisać pod Symbol unscopables

11:35i ostatni, jest to symbol iterator. Nie będę go teraz tłumaczył

11:39dlatego, że będziemy z iteratorów już wkrótce w tym kursie korzystać i jest

11:44to, wydaje mi się symbol, z którego najczęściej będziesz korzystał. Ja również najczęściej z niego

11:48korzystam. Jest to rzecz absolutnie świetna. Dlatego, jak

11:52widzisz mamy wiele symboli wbudowanych. Na wiele niskopoziomowych czynności one

11:56nam pozwalają, ale to nie oznacza, że większość z nich jakoś szczególnie będzie dla przydatne. Natomiast

12:00symbol iterator na pewno będzie o czym wkrótce się przekonasz.