EcmaScript 6: Nazwa funkcji i debugowanie

0:00W tej lekcji pokażę ci jeszcze jedną ciekawą rzecz, która została ustandaryzowana

0:04w przypadku ES6. Jest to nazywanie funkcji. Teraz

0:08po co nam jest potrzebne coś takiego. Otóż mam tutaj utworzoną zwykłą funkcję,

0:13taką którą znamy jeszcze z  ES5 o nazwie getName i teraz

0:17ta nazwa jest dostępna po odwołaniu się do takiej funkcji,

0:21czyli na przykład getName kropka name. Każda

0:25funkcja coś takiego mieć powinna i to nam zwraca zawsze string z nazwą takiej funkcji

0:29i mógłbyś się zapytać po co mi jest potrzebny taki string. No i powiem ci szczerze, że

0:33on jest najbardziej potrzebny w sytuacjach debugowania. Gdyby nasza funkcja

0:37z jakiegokolwiek powodu zwracała błąd, który mogę zasymulować za pomocą throw

0:42new error, to zobaczmy co się pojawi po wywołaniu takiej funkcji,

0:46czyli zerknijmy, funkcja się nazywa getName. Wywołuje

0:50ją i mamy błąd, ale co jest ciekawe w tym tak zwanym stosie,

0:54czyli stack trace pokazuje nam się, że ten błąd wystąpił at

0:58get name. Tutaj jest nazwa tej funkcji. Natomiast jeżeli mamy same funkcje

1:02anonimowe, to bardzo trudno zobaczyć w takich logach błędów gdzie jakiś błąd

1:06się pojawił. Szczególnie na przykład w środowisku Note.js, gdzie często wysypują się

1:10błędy i mamy mnóstwo takich linijek i trudno naprawdę jest się dowiedzieć

1:14gdzie błąd się pojawił. Jeżeli funkcja jest nazywana, wtedy tego problemu nie

1:18ma. Natomiast mógłbyś zapytać kiedy jest problem. No właśnie wtedy, kiedy funkcje

1:23są anonimowe i nie mają właściwości name. Natomiast ES6

1:27można powiedzieć, że ustandaryzowało nadawanie nazw dla funkcji

1:31i teraz powinno to działać w taki sposób, że nawet jeżeli utworzymy zmienną, która

1:36przechowuje funkcję, to ta funkcja powinna mieć taką nazwę jaką ma

1:40zmienna i teraz będę chciał ci to pokazać. Jeżeli byśmy sobie tę

1:44funkcję przypisali do zmiennej za pomocą let lub var, to nie

1:48ma to akurat znaczenia i zmienną nazwę na przykład, jak

1:52ona się nazywała, zerknijmy getName, let get name, to

1:57normalnie taka funkcja tutaj nie miałaby name, ale teraz jeżeli ją sobie tutaj

2:02podejrzę, get name name, to również

2:06została zwrócona wartość get name,  czyli EcmaScript to ustandaryzowała, że nawet jeżeli

2:10taka funkcja anonimowa jest przypisywana do zmiennej, to powinna jakby po tej zmiennej

2:15odziedziczyć name. No i to co jest ciekawe, gdybym tu oczywiście miał inną

2:19nazwę, na przykład funkcja name, to

2:24name takiej funkcji, w tym przypadku byłoby to name, czyli ona wtedy ma swoją

2:28własną nazwę, ale tylko została przypisana do zmiennej. Natomiast, jeżeli nie ma tutaj

2:32taki nazwy to będzie ją jakby dziedziczyć tej zmiennej i teraz

2:36nawet gdybym utworzył inną zmienną o nazwie fn i przypisał do niej getName,

2:40żeby one obie kierowały na tę funkcję, to gdybym napisał fn

2:45name, to cały czas będzie to getName i gdybym ją wywołał, a ona

2:49wiesz, że wywoła błąd, to będziemy

2:53to widzieli, że on jest w funkcji getName. Dzięki temu łatwo będzie zdebugować,

2:57bo musimy sobie znaleźć taką funkcję getName. No i to się pojawia w tym miejscu. Co ciekawe

3:02nie działa to tylko w przypadku tworzenia takich prostych zmiennych. Gdybym sobie utworzył

3:06obiekt. Ja teraz go wkleje, w którym

3:11stworzyłbym metodę, która w ten sposób wygląda, czyli na przykład byłaby to funkcja strzałkowa

3:15albo ta skrótowa metoda, która ci już pokazywałem, czyli w taki sposób, to

3:20sprawdźmy sobie, kiedy się odwołamy do person getName kropka name, co

3:24nam się pokaże. Okaże się, że też

3:28jest to getName, więc tutaj ta funkcja dziedziczy sobie

3:32name z właściwości obiektu pod jaką została zapisana. Dzięki

3:37temu praktycznie w każdym miejscu każda funkcja powinna mieć przepisane jakieś

3:41name. Jest tylko jeden przypadek, kiedy nie będzie takiego name, zaraz

3:45ci to pokażę. Ale jeszcze pokażę ci tylko jeden przykład, gdybyś

3:49miał funkcję, którą byś utworzył za pomocą bind,

3:53czyli mieliśmy funkcję getName tutaj u góry i bind zwraca mi nową

3:57funkcję, pod którą, która pod this będzie miała to co tutaj przekażę. Nie to

4:01teraz istotne, ale chodzi o to jaki tutaj będzie name, new fn, sprawdźmy

4:05kropka name i okaże

4:10się, że jeżeli funkcja była utworzona za pomocą metody bind, to ma tutaj

4:14coś takiego jak bound get name. Dzięki temu również, gdybyśmy ją

4:18wywołali, ona będzie miała błąd, to

4:22zobaczymy at get name, czyli cały czas możemy znaleźć, w którym miejscu ten

4:26błąd się pojawia i teraz jest tylko jeden przykład, którego raczej

4:30nie będziesz tak wykorzystywał kiedy nie będziemy mieli przypisanej właściwości name

4:34poprawnie. Ona będzie. Nie będzie pusta, ale nie pozwoli nam zdefiniować

4:38do końca, o którą funkcję chodzi i to dzieje się wtedy gdybyś utworzył funkcję,

4:42co robi się niesłychanie rzadko z użyciem konstruktora new function. On działa

4:46tak, że tutaj jako pierwszy parametr podajemy string, z argumentami, które miałyby do takiej

4:51funkcji wpaść, gdyby tutaj było name, to tutaj sobie też piszemy wtedy name, a jako

4:56drugi parametr podajemy ciało funkcji w formie string'u, czyli return, na przykład Jan. Taka

5:01funkcja zostanie zwrócona do get person name. Jeśli ją wywołam, to będzie zwracać Jan, ale

5:05pytanie get person name. Jakie ona ma name

5:09i okazuje się, że wtedy jest to anonymous. Natomiast tak czy siak jest to zdefiniowane. Nie jest to pusty

5:14ciąg znaków. W ten sposób, jak widzisz, EcmaScript ustandaryzowała, że

5:18zawsze tylko jeśli jest to możliwe name powinno być w jakikolwiek sposób

5:23przypisane do funkcji. Nawet jeśli ją utworzymy jako funkcję anonimową

5:27tak jak tutaj, przypisaną po prostu do zmiennej i to pomaga nam między

5:31innymi przy debugowaniu, kiedy w takich funkcjach pojawiają się błędy.