EcmaScript 6: Korzystanie z WeakMap

0:00W przypadku set mieliśmy jego odpowiednik, który nazywał się WeakSet i pamiętasz,

0:04że on działał tak, że jeżeli utraciliśmy referencję do jakiegoś obiektu i garbage collector mógł

0:09go usunąć to usuwał go również takiego WeakSet'u i w przypadku map mamy

0:13również jej odpowiednik, który nazywa się WeakMap i działa w bardzo podobny sposób. Także

0:18również te wartości, do których utracimy referencje będą usuwane i teraz

0:22próbujemy sobie utworzyć właśnie nową WeakMap'ę. Napiszę let

0:26na przykład age i tutaj mamy nowy konstruktor, który nazywa się WeakMap.

0:31Możemy do niego dodawać elementy za pomocą set. Podobnie jak w poprzedniej

0:36lekcji do zwykłego map. Natomiast możemy również dodać je tutaj od razu, tworząc

0:40taki obiekt, podając jakiś iterable, na przykład tablice, w której będą tablice,

0:44tak jak w lekcji poprzedniej. Na przykład person 1 i jakiś

0:48wiek 32 i w kolejnej kluczem będzie person 2, wiek

0:52na przykład 22. No i teraz tutaj znowu to nie jest iterator,

0:57nie możemy sprawdzić ile elementów jest w takiej WeakMap'ie, ale mamy dostępne

1:01metody, a jest to set, get, has oraz

1:05delete. Czyli możemy jakieś wartości ustawiać, pobierać, sprawdzać

1:09czy tam są albo usuwać. Zobaczmy zatem w przeglądarce, co będziemy

1:13mieli teraz pod age, przeglądarka pokaże nam taką właśnie WeakMapę, ale

1:18spróbujmy utracić referencje do któregoś obiektu. Na przykład person 1 null i sprawdźmy

1:23raz jeszcze co mamy pod s. W zasadzie pod

1:27age, tak nazywaliśmy tą zmienną. Jak widzisz, teraz nie mamy już tamtego

1:31jednego obiektu, bo garbage collector go usunął. Skoro do person 1 nie mam już dostępu,

1:36to można go usunąć. No i tutaj znowu rodzi się pytanie jakie byłoby praktyczne

1:40zastosowanie takiego właśnie zapisu, czyli WeakMap i o

1:44ile pokazałem ci w przypadku WeakSet'u, że możemy sobie do klasy to

1:49dodać w pewien sposób, aby nie można było wykonywać metody na obiektach

1:53nie utworzonych z tej klasy, czyli pożyczać tych metod. To tutaj możemy z kolei zrobić

1:57sobie rzecz jeszcze lepszą, bo możemy dodać prywatność do klasy i

2:01pokażę ci teraz jak moglibyśmy to zrobić. Przejdźmy sobie niżej i będę

2:05chciał utworzyć sobie funkcję person i tutaj

2:09zrobię funkcję anonimową, która od razu się wywoła, w ten oto sposób. A to

2:14oznacza, że to co tutaj zwrócę, chociaż to dziwnie wygląda, ale

2:18to co tutaj zwrócę będzie pod person, czyli tutaj na dole pod person miałbym jedynkę. Zatem

2:22ja chcę tutaj mieć jakąś klasę, dlatego będę chciał zwrócić klasę, return class

2:27Person. Mogę ją drugi raz nazwać tak samo, czyli

2:31pod Person na pewno będzie jakaś klasa, ale po to stworzyłem funkcję oplatającą to

2:35wszystko, żeby tutaj móc sobie utworzyć nowy zakres zmiennych i w

2:39tym nowym zakresie będę chciał za pomocą const utworzyć stałą privateData

2:45i utworzymy sobie właśnie nową WeakMapę. Czyli mamy

2:50taką WeakMapę, do której nikt z zewnątrz nie ma dostępu, bo oplotłem ją taką funkcją,

2:54którą raz się wywoła. Natomiast zwrócona klasa jest definiowana

2:58w tym miejscu, więc wszystkie jej metody tutaj dostęp mieć będą. Zatem

3:02do takiej klasy chciałbym sobie dodać konstruktor. To co już znamy,

3:06dodamy sobie firstName i lastName i będziemy chcieli do this to przypisać,

3:10ale normalnie byśmy właśnie przypisali do this. Sprawdźmy jak by to wyglądało i dodamy

3:17sobie jeszcze metodę sayHello, którą też już znamy i ona by normalnie zwracała

3:21taki template string, w którym mielibyśmy this firstName,

3:25spacja, this lastName.

3:30Zobaczmy co tutaj się w ogóle wydarzy. Widzę,

3:34że chyba ma jakieś błędy w tym miejscu. Okej, widzę że tutaj powinniśmy

3:38te wartości przypisać i this lastName

3:43również i tutaj pojawił mi się jeszcze jeden błąd w tym miejscu

3:47konkretnie. Tak to powinno wyglądać, tutaj zakończymy sobie średnikiem,

3:52okej. No i teraz spróbujmy utworzyć sobie nowy obiekt, który nazwiemy sobie person 3

3:56i będzie to new Person, czyli ta funkcja kiedy

4:01się wywołała, zwróciła nam person, która jest dostępna tutaj, więc jeżeli napiszę new Person

4:05Jan Kowalski, to

4:09będziemy mogli zrobić console.log person 3, na przykład firstName. Mamy

4:15do tego dostęp, bo jest to przypisane bezpośrednio do obiektu. Zobaczmy. Widzimy

4:19Jan i jeśli bym zrobił person 3 sayHello, to

4:23będziemy widzieli Jan Kowalski. No ale właśnie dlatego tutaj mówię, że brakuje nam w JavaScripcie

4:27prywatności, bo cały czas mam dostęp do person 3, na przykład lastName. Mogę

4:33je również zmienić. Teraz ci pokażę jak możemy je zrobić jako

4:37prywatne, czyli aby one nie były widoczne. Zamiast przypisywać je w konstruktorze bezpośrednio

4:41do obiektu, zróbmy tak, że odwołamy się do privateData. Następnie

4:46set i pod this, a this to jest nasz obiekt. Widziałeś

4:50już, że w przypadku właśnie mapy możemy przypisywać do niej pod

4:54kluczem obiektu jakieś dane, czyli kluczem będzie ten obiekt this, a danymi

4:59będzie coś takiego firstName i tutaj mógłbym napisać drugi

5:03raz firstName, ale pewnie pamiętasz ten skrócony zapis obiektów. Jeżeli mamy się powtarzać, to

5:07wystarczy, że napiszemy to raz, więc chcę tutaj utworzyć obiekt, który będzie przechowywane

5:12w tej WeakMap'ie pod this, a do niej nikt nie ma dostępu z zewnątrz,

5:16bo jest zawarta w funkcji i chcę żeby ten obiekt przechowywał te przekazane tutaj wartości

5:21i teraz w sayHello będziemy

5:25chcieli zwrócić, najpierw zapisując sobie w zmiennej może data, privateData,

5:30get i podam this, czyli jeżeli podam obiekt

5:35do WeakMap'y, to zostanie dla mnie zwrócone to co pod tym obiektem, czyli pod this

5:39zostało zapisane, a więc taki oto obiekt. Zauważ, że właśnie te dane nie są przypisane

5:43bezpośrednio do obiektu, tylko są w WeakMap'ie pod kluczem tego obiektu. Będę

5:47to miał teraz w data i tutaj będę mógł zwrócić w taki oto sposób. Zobaczymy

5:52jak to zadziała i może tutaj sobie w console.log jeszcze zróbmy person 3 sayHello. Odświeżam,

6:01zobaczymy tutaj, że po pierwsze mamy undefined. Czyli nie można się już odwołać do

6:05persona 3 firstName, bo ten obiekt nigdzie nie ma, poprzez this przypisane właśnie

6:09tych właściwości. Kiedy jednak odwołamy się do sayHello, to widzimy, że wszystko jest

6:13okej, bo metoda sayHello dodana na prototypie tutaj this ma dynamiczne,

6:17ale wrzuca sobie to this do privateData, czyli do tego WeakMap i dostaje

6:22z powrotem obiekt, który tutaj przy tworzeniu tego obiektu został utworzony, więc

6:26jak widzisz, możemy sobie tutaj stworzyć taką prywatność, bo nikt do tej WeakMapy nie

6:30ma dostępu, a więc nie może tam przekazać żadnego obiektu. Gdyby ona była na zewnątrz,

6:34to wtedy mógłbym napisać privateData get i przekazać person 3. To

6:39by było dokładnie to samo, co wewnątrz tutaj this, ale że nie jest na zewnątrz, to nikt

6:43nie może tego zrobić. No i teraz ostatnia rzecz. Dlaczego plusem jest,

6:47że nie jest to zwykła mapa, ale WeakMapa. No właśnie z tego powodu, że jeżeli teraz byśmy

6:51napisali persona 3 równa się null, to znaczy, że znowu straciłem

6:55odwołanie do tego nowoutworzonego obiektu. Nigdzie indziej go sobie nie przekazałem i

6:59nie zapisałem, to on może zostać usunięty, a razem z nim w

7:03tej WeakMap'ie może zostać usunięty ten obiekt, który przechowywał jego

7:07dane. Dlatego, że jeżeli to co jest pod kluczem zostanie usunięte, to

7:11dane również mogą być usunięte i znowu w przypadku WeakMap'y kluczem

7:15może być tak jak w przypadku WeakSet'u wyłącznie obiekt. Nie może to być wartość

7:20prymitywna. Jak zatem widzisz, to są te cztery nowości, czyli Set, WeakSet,

7:24Map oraz WeakMap i myślę, że szczególnie zwykły Set, a także Mapa

7:29i WeakMapa będą często wykorzystywane i są to naprawdę mile

7:33widziane dodatki do tego co już mieliśmy w języku JavaScript, więc teraz jeżeli

7:37będziesz chciał przechowywać jakieś dowolne pary klucz, wartość, to

7:42zamiast zrobić to w zwykłym obiekcie, lepiej utworzyć sobie mapę i plusem mapy jest

7:46również to, że można jako klucza używać obiektu, aby na przykład dodać

7:50do niego jakieś nowe dane. Takim obiektem może być oczywiście na przykład

7:54znalezione w drzewie dokumentu element jakiś html, do którego chcesz coś

7:58dopisać, właśnie poprzez taką Mapę.