EcmaScript 6: Metody statyczne

0:00W tej lekcji porozmawiamy o kolejnej nowości jeżeli chodzi o klasy w ES6. Mianowicie

0:04o możliwości tworzenia metod statycznych i teraz jest to coś, co

0:08można było zrobić wcześniej w ES5, ale w inny sposób, o którym za moment. Mamy

0:13klasę person, którą już widziałeś i ona ma tutaj dodaną metodę sayHello. Pamiętaj,

0:17że ona jest dodana na prototypie. Natomiast chciałbym teraz dodać sobie metodą

0:21statyczną. I co to znaczy, że metoda jest statyczna? Otóż, jeżeli

0:25jest dodana na prototypie, tak jak tutaj, to mogę z niej skorzystać, dopiero kiedy utworze nowy

0:29obiekt, czyli person1 kropka sayHello wywołuje tę metodę. Natomiast

0:33nie mogę napisać Person, czyli odwołać do tej klasy sayHello. To

0:38mi nie zadziała, bo wiemy że sayHello nie jest na Person, ale jest na prototype dopiero, czyli

0:43w tym obiekcie prototypu. Natomiast metody statyczne to byłyby takie, które są

0:47bezpośrednio przypisane do klasy, a więc odwołuje się do nazwy klasy i

0:51bezpośrednio do metody, więc mógłbym sobie dodać metodę statyczną

0:55w taki sposób jak Ci teraz pokażę. Napiszmy Person, chciałbym dodać metodę,

0:59która się będzie nazywała Create i byłaby to funkcja, która pozwoli

1:04mi tworzyć nowe obiekty. Ona po prostu zwracałaby new Person

1:09i przekazywałaby argumenty, które zostaną przekazane w tym miejscu. Powiedzmy,

1:14że byłoby to firstName i lastName, ale za moment sobie to troszeczkę zmienimy i przekazane

1:18byłoby to tutaj, czyli firstName, lastName, okej.

1:23I w ten sposób mogłem sobie utworzyć person2 i napisać Person create

1:28chwiej i przekazałbym sobie tutaj na przykład Anna Nowak. Oczywiście

1:35podejrzyjmy to sobie tutaj w konsoli czy nie ma żadnego błędu. Napiszmy person2. No

1:40i okaże się, że mamy tutaj Anna Nowak. Natomiast właśnie w ES5 tak

1:44byśmy dodali metodę statyczną. Wiemy, że funkcje są obiektami w języku JavaScript, a

1:48do każdego obiektu możemy po kropce przypisać co nam się podoba. Dlatego to działa. Natomiast w ES6

1:54możemy stworzyć metody statyczne za pomocą słowa static, czyli

1:58piszemy sobie tutaj i następnie normalnie metodę, tak

2:02jak robiliśmy to wyżej, czyli napisalibyśmy create, w ten sposób i

2:06to oznacza, że dokładnie tak samo będzie można z tego skorzystać, czyli person kropka

2:10create i powinien być efekt dokładnie taki sam. Zobaczmy person2. No

2:14i jak widzisz, jest dokładnie tak samo. Natomiast ten przykład możemy sobie jeszcze troszeczkę

2:18zmodyfikować, aby przypomnieć sobie jak korzystać na przykład z destructuring'u parametrów,

2:23więc powiedzmy, że to takiej metody chciałbym móc przekazać obiekt, który mam

2:27tutaj pod json i powiem ci za moment dlaczego. Więc spróbujmy sobie

2:31tutaj skorzystać z destructuring'u. Powiedzmy, że przekażemy obiekt, który

2:35będzie miał fName i lName, taki byśmy pobrali json'em. Zauważ, że to

2:39na razie jest string, to nie jest obiekt, więc przypomnę ci jak działa destructuring. Jeżeli

2:44tutaj wewnątrz tej funkcji pod firstName coś chcę mieć, to muszę tutaj napisać

2:48firstName, ale obiekt, który przyłożymy za moment do tej funkcji

2:52create, będzie to miał pod fName, więc pisaliśmy to w ten sposób. W razie

2:56czego wróć sobie do lekcji o destructuring'u, a lastName zrobilibyśmy za pomocą

3:00lName i tutaj jeszcze

3:04byśmy zrobili domyślny parametr jako pusty obiekt, gdyby on nie został podany. To

3:09oznacza, że teraz kiedy będziemy wywoływać person create, to musimy tutaj przekazać

3:13jakiś obiekt i pokazuje ci ten przykład dlatego, że taka metoda statyczna

3:17create może być bardzo przydatna jeżeli na przykład pobierałbyś jakieś dane jsonem

3:22i w pętli zamieniałbyś je na obiekty JavaScript'owe i następnie

3:26chciałbyś z nich tworzyć nowe obiekty twojej klasy. Nieważne co by to było, czy

3:30to będą jakieś osoby czy to do czyli task'i do wykonania, to mógłbyś sobie stworzyć

3:34taką metodę pomocniczą Create i tutaj skorzystałem z destructuring'u parametrów

3:38po to, żeby wewnątrz łatwo się było do tego odwołać. Taki json

3:42powiedzmy, pobraliśmy Ajax'em. Jest to string i mogę sobie wywołać Person create

3:46przekazując JSON parse, czyli JSON parse mi taki string zamieni

3:51na obiekt JavaScript'owy, który ma firstName i lastName zapisane w taki sposób. No

3:56i dzięki temu, że tu będzie obiekt, to zostanie on przyłożony właśnie do tego destructuring'u

4:01i pod tymi parametrami będę miał poprawne dane. Okej, więc w

4:05ten sposób sobie to zróbmy i person2 to będzie

4:09właśnie Anna Kowalska. Jak zatem widzisz, w taki oto sposób można sobie utworzyć dowolne

4:13metody statyczne i ważne jest to, że one nie są dostępne na instancjach, czyli

4:17person1 gdybym tutaj napisał kropka create, on

4:22nie ma to do tego dostępu. Dlatego, że to nie jest na prototypie, tylko bezpośrednio

4:27jakby na tej klasie person i co jest ciekawe, gdybyśmy tutaj zrobili sobie dziedziczenie

4:31to dziedziczymy również metody statyczne, czyli gdybyśmy mieli tą klasę co

4:35wcześniej, czyli employee i ona by robiła extends person, to

4:39też miałaby dostęp do metody Create, w dokładnie taki sam sposób. Jeśli

4:44natomiast do klasy chciałbyś dodać sobie statyczne właściwości, a nie metody, nie możesz

4:48tutaj dodawać właściwości, musisz to zrobić standardowo, czyli na przykład person jakieś id

4:53czy coś w tym stylu. Możesz to zrobić i też jest to dostępne wtedy na person

4:57tak samo jak i metoda Create, ale nie da się tego zrobić zapisu klasy

5:01w taki oto sposób. No i to by było tyle w tej lekcji. Pokazałem ci jak tworzyć

5:05z użyciem słowa kluczowego static metody statyczne. No i jak one działają, jak

5:10można było też to zrobić w ES5. Teraz natomiast jest to o tyle lepszy zapis, że wszystko

5:14mamy tutaj wewnątrz i taka metoda na przykład jest dodawana na prototypie, ale z użyciem

5:18słowa static jest dodawana bezpośrednio do klasy person.