WEBVTT

00:00:00.780 --> 00:00:03.530
Już wiemy, jak stworzyć typ obiektu

00:00:03.630 --> 00:00:06.339
i dwa obiekty winstonokształtne,

00:00:06.439 --> 00:00:09.404
a potem uruchomić je konstruktorami.

00:00:09.504 --> 00:00:13.537
Typ obiektu nie musi być
kojarzony z właściwościami.

00:00:13.637 --> 00:00:16.114
Może mieć też funkcjonalność.

00:00:16.213 --> 00:00:18.908
Pomyślcie o świecie
i typach obiektów w nim.

00:00:19.008 --> 00:00:20.195
Weźmy np. ludzi.

00:00:20.295 --> 00:00:22.360
Wszyscy mamy wzrost i wiek,

00:00:22.460 --> 00:00:26.288
wykonujemy też czynności:
śpimy, jemy, programujemy.

00:00:26.388 --> 00:00:29.001
Chcemy skojarzyć te funkcje

00:00:29.101 --> 00:00:30.812
z typami obiektów.

00:00:30.912 --> 00:00:34.481
Poprzedni odcinek skończyliśmy tak:

00:00:34.581 --> 00:00:36.850
mamy funkcję „drawWinston”,

00:00:36.950 --> 00:00:39.915
którą przywołujemy
przy obu obiektach „Winston”.

00:00:40.015 --> 00:00:42.887
Czy nie byłoby świetnie
przyłączyć ją

00:00:42.987 --> 00:00:45.480
do typu obiektu „Winston”?

00:00:45.580 --> 00:00:48.018
Można to zrobić z łatwością.

00:00:48.626 --> 00:00:52.398
Pod konstruktorem napiszemy:
„Winston”...

00:00:52.498 --> 00:00:54.984
(wielkie „w”), „. prototype”.

00:00:55.670 --> 00:00:59.019
Słowa „prototype” jeszcze
w programowaniu nie widzieliście.

00:00:59.119 --> 00:01:03.553
To właściwość obiektu,

00:01:03.653 --> 00:01:05.782
do której możemy dołączać funkcje.

00:01:05.882 --> 00:01:09.816
A każda instancja tego obiektu

00:01:09.916 --> 00:01:13.019
będzie powiązana z tymi funkcjami.

00:01:13.119 --> 00:01:15.755
Piszemy „.prototype”,
potem jest kropka,

00:01:15.855 --> 00:01:18.715
a po niej nazwa funkcji, np. „draw”.

00:01:19.481 --> 00:01:22.924
Dalej znak równości i możemy wziąć

00:01:23.024 --> 00:01:24.448
kod „drawWinston”,

00:01:24.548 --> 00:01:27.473
który umieścimy tutaj.

00:01:28.554 --> 00:01:32.786
Przypisaliśmy funkcję „draw”

00:01:32.886 --> 00:01:34.807
do prototypu Winstona.

00:01:34.907 --> 00:01:37.314
Możemy przywoływać funkcję „draw”

00:01:37.414 --> 00:01:39.892
do każdego obiektu
typu Winstona.

00:01:39.992 --> 00:01:44.489
Powinno to działać przy nastoletnim
i dorosłym Winstonie.

00:01:45.256 --> 00:01:49.389
Funkcję, którą możemy
przywołać do obiektu,

00:01:49.489 --> 00:01:51.270
nazywamy metodą.

00:01:51.370 --> 00:01:53.731
Będę używać tego słowa.

00:01:54.636 --> 00:01:57.980
To jest metoda rysowania.
W porządku.

00:01:58.080 --> 00:02:01.045
Skasujemy to i to...

00:02:01.145 --> 00:02:03.762
Spróbujmy przywołać „draw”.

00:02:03.862 --> 00:02:05.643
Mamy: „winstonTeen.draw”.

00:02:06.827 --> 00:02:09.746
Wyskoczył komunikat błędu.

00:02:09.846 --> 00:02:13.974
„WinstObject niezdefiniowany”.
No dobrze.

00:02:14.513 --> 00:02:18.344
Wcześniej wprowadzaliśmy
ten argument do „drawWinston”,

00:02:18.698 --> 00:02:20.643
czyli do obiektu „Winston”.

00:02:20.743 --> 00:02:22.802
Już tego nie robimy.

00:02:22.902 --> 00:02:26.352
Możemy to zmienić,

00:02:26.452 --> 00:02:28.445
i co tu wprowadzimy?

00:02:28.545 --> 00:02:30.737
Trzeba dać „winstonTeen”. OK.

00:02:30.837 --> 00:02:33.855
Udało się, ale to głupie.

00:02:33.955 --> 00:02:37.617
Przywołuję funkcję „draw”
do obiektu,

00:02:38.482 --> 00:02:41.889
więc nie powinnam dodatkowo
obiektu wprowadzać!

00:02:41.989 --> 00:02:43.352
Dwa razy to samo!

00:02:43.840 --> 00:02:45.790
Nie powinniśmy tego robić.

00:02:45.890 --> 00:02:48.454
Skasujmy to więc i pomyślmy.

00:02:48.554 --> 00:02:50.531
Gdy jesteśmy wewnątrz obiektu,

00:02:50.631 --> 00:02:53.662
jak dostać się do jego właściwości?

00:02:54.248 --> 00:02:56.401
Spójrzmy na konstruktora.

00:02:56.501 --> 00:02:59.327
Przypomnijmy sobie
hasło „this”. Aha!

00:03:00.408 --> 00:03:03.160
A gdybyśmy zmienili to w to?

00:03:04.482 --> 00:03:07.408
Zmieniamy „winstObject”
w „this”.

00:03:08.493 --> 00:03:10.709
Jesteśmy wewnątrz obiektu.

00:03:10.809 --> 00:03:13.886
Ta funkcja łączy się z obiektem;

00:03:13.986 --> 00:03:16.673
„this” odnosi się
do obiektu bieżącego.

00:03:16.829 --> 00:03:19.081
Możemy więc napisać „this”

00:03:19.181 --> 00:03:23.081
i zyskamy dostęp do wszystkich
właściwości bieżącego obiektu.

00:03:23.181 --> 00:03:26.216
Udało się! Świetnie, prawda?

00:03:26.688 --> 00:03:30.465
Teraz napiszmy:
„winstonAdult.draw”.

00:03:32.067 --> 00:03:35.591
Jest! Mamy dostęp
do właściwości „winstonAdult”,

00:03:35.691 --> 00:03:37.965
bo ten obiekt został przywołany.

00:03:38.065 --> 00:03:40.752
To jest rewelacyjne w haśle „this”.

00:03:40.852 --> 00:03:43.608
Chociaż czasami trudno je wymówić.

00:03:45.580 --> 00:03:49.459
Było wesoło, więc dodajmy
kolejną metodę.

00:03:49.559 --> 00:03:51.828
Co jeszcze może robić Winston?

00:03:51.928 --> 00:03:53.569
Niech mówi.

00:03:53.669 --> 00:03:56.366
Dajmy: „Winston.prototype.talk”.

00:03:56.466 --> 00:04:00.280
Do prototypu możemy dodać
tyle metod, ile chcemy.

00:04:00.380 --> 00:04:04.529
Napiszmy: „Jestem Winston!”.

00:04:05.368 --> 00:04:08.755
A potem jeszcze: „this.x+20”

00:04:08.855 --> 00:04:11.541
i „this.y+150”.

00:04:12.695 --> 00:04:15.907
Nic się nie wydarzyło,

00:04:16.007 --> 00:04:19.761
bo jeszcze nie przywołałam funkcji.

00:04:19.861 --> 00:04:21.221
Niech nastolatek mówi.

00:04:21.322 --> 00:04:24.428
„winstonTeen.talk”.
Gada cały czas.

00:04:24.528 --> 00:04:29.614
„Jestem Winston!”.
A teraz niech mówi dorosły.

00:04:30.442 --> 00:04:31.557
Hura!

00:04:32.085 --> 00:04:35.342
Mamy teraz typ obiektu „Winston”

00:04:35.442 --> 00:04:38.128
z właściwościami: nazwą,
wiekiem, „x” i „y”.

00:04:38.228 --> 00:04:39.828
I jest funkcjonalny.

00:04:39.928 --> 00:04:44.955
Zachowuje się różnie
w zależności od właściwości.

00:04:45.055 --> 00:04:48.298
Możemy stworzyć tyle
instancji Winstona, ile chcemy,

00:04:48.398 --> 00:04:51.015
i przywołać dowolną z metod.

00:04:51.181 --> 00:04:52.617
Nieźle, co?