JavaScript: Funkcje jako metody obiektów

0:00W poprzedniej lekcji wspomniałem, że w obiekcie możemy przechowywać dosłownie

0:03wszystko, co jest reprezentowane z udziałem języka JavaScript.

0:06Więc w tej lekcji pokażę Ci, że wewnątrz obiektu można zawrzeć również funkcję.

0:10I wtedy o takiej funkcji mówimy, że jest ona metodą obiektu.

0:14Więc tak jak mieliśmy tablice i odwołaliśmy się tam do push,

0:17powiedzmy, że mieliśmy jakąś tablicę w ten

0:19sposób zrobioną i robiliśmy arr.push to była to metoda tego obiektu arr.

0:23Chociaż tablica jest troszeczkę innym, takim

0:26wyspecjalizowanym obiektem, niemniej jednak my do takich zwykłych naszych obiektów

0:30również możemy dodawać najróżniejsze metody.

0:33Więc utwórzmy sobie obiekt person

0:35tak jak w lekcji poprzedniej.

0:37Napiszemy firstName, czyli pierwsze imię

0:40będzie to Jan, lastName, czyli nazwisko będzie to Kowalski.

0:45I teraz mamy tutaj w tym obiekcie dwie właściwości. Czyli firstName i lastName.

0:51Są to po prostu właściwości, natomiast teraz będziemy chcieli dodać metody.

0:55Chciałbym dodać metodę, która nazywa się sayHello. I zrobimy to tak.

0:59Oczywiście podajemy klucz sayHello

1:01i tutaj należy przypisać funkcję.

1:03W języku JavaScript funkcje można tworzyć na różne sposoby.

1:06Można tutaj przypisać po prostu taką funkcję

1:09i tutaj z niej coś zwrócić albo w niej wykonać jakiś kod, albo od standardu ES6

1:14można skorzystać ze skróconego zapisu i zrobić to tak.

1:17I w ten sposób utworzymy wewnątrz tego obiektu funkcję.

1:20I chciałbym, żeby ta funkcja robiła coś takiego.

1:23W takim template stringu sobie to wyświetlimy.

1:25Powiemy Cześć, mam na imię

1:30i tutaj chciałbym wstawić Jan.

1:33Teraz jak się możemy do tego odwołać?

1:34Otóż wewnątrz takiej funkcji, która jest

1:36zawarta w obiekcie mamy dostęp do takiego specjalnego słowa kluczowego this.

1:41Pomyśl sobie, że jest to jakaś zmienna,

1:42która przechowuje nam odwołanie do całego tego obiektu.

1:46Więc jeżeli mając odwołanie do tego obiektu np.

1:49tutaj pod person możemy powiedzieć person.firstName,

1:51to wyobraź sobie, że właśnie tutaj wewnątrz pod this jest cały ten

1:56obiekt, a więc możemy powiedzieć this.firstName i zwróci nam to taką wartość.

2:01A zatem za pomocą template stringu, który tutaj stworzyłem możemy sobie

2:05zinterpolować tę wartość i powiedzieć tutaj właśnie w ten sposób this.firstName.

2:10To sprawi, że zostanie utworzony taki string, gdzie będzie

2:13cześć, mam na imię Jan. I będzie to dynamiczne, o czym jeszcze za moment.

2:18Zatem jeżeli sobie teraz przejdziemy tutaj i wywołamy person.sayHello,

2:23czyli odwołałem się do tej metody i teraz za pomocą nawiasów

2:27okrągłych ją wywołuję jak funkcję, to powinniśmy w konsoli zobaczyć

2:31Cześć, Mam na imię Jan.

2:33Zobaczmy, dokładnie tak też się stało.

2:36Teraz możemy sobie tutaj dodać jeszcze jakąś inną metodę, np.

2:39setFirstName, która pozwoli nam zmodyfikować tę wartość.

2:44Ona będzie przyjmować parametr firstName albo możemy tutaj powiedzieć newName,

2:48żeby to nie było zbyt dla Ciebie mylące,

2:50że to się nazywa tak samo, bo nie musi się tak nazywać.

2:53I skoro w tej funkcji też mamy odwołanie do this i to kieruje na cały ten obiekt,

2:58skoro Ci mówiłem, że mogę napisać person.firstName

3:00i przypisać tu nową wartość, to tak samo mogę zrobić tutaj pod this.

3:05this.firstName równa się newName, które ktoś przekaże,

3:10i teraz zrobimy to sayHello,

3:12potem się odwołamy do person.setFirstName,

3:17ustawimy nowe imię na Jacek

3:21ono się wewnątrz tego obiektu zmieni, więc

3:23jeśli byśmy się tutaj odwołali do firstName tam już będzie Jacek,

3:26ale odwołajmy się znowu do sayHello, aby jeszcze raz zobaczyć wynik właśnie tej

3:31funkcji i pokazać Ci, że ona jest dynamiczna i za każdym wywołaniem tutaj

3:35pod this.firstName ona będzie sprawdzać jaka jest wartość właśnie tej właściwości, a

3:40nie taka jak była na początku. Czyli jak ją w międzyczasie po prostu zmienimy,

3:44to jak najbardziej ona będzie brana pod uwagę przy kolejnych wywołaniach.

3:49Zobacz. Cześć, Mam na imię Jan, a potem cześć,

3:51Mam na imię Jacek.

3:53Oczywiście nie musielibyśmy za pomocą

3:54takiej metody zmieniać tego firstName, działałby identycznie gdybyś tutaj napisał

3:58firstName równa się Jacek, ale chciałem Ci po prostu pokazać, że

4:03możemy sobie tworzyć funkcje wewnątrz obiektu i że nazywamy je wtedy metodami, a

4:08także, że mają one dostęp do takiego specjalnego słowa this, które kieruje na

4:12cały ten obiekt, a więc pod this.setFirstName mielibyśmy tę metodę,

4:16pod this.firstName mamy Jan itd.