WEBVTT

00:00:01.180 --> 00:00:03.578
Znacie podstawy języka JavaScript.

00:00:03.679 --> 00:00:05.735
Pokażę wam fajne zastosowanie.

00:00:05.835 --> 00:00:08.765
Tzw. programowanie obiektowe.

00:00:09.485 --> 00:00:12.392
Zacznijmy od tego,
czemu to jest przydatne.

00:00:12.492 --> 00:00:17.322
Mam program, który ulepszymy
za pomocą obiektów.

00:00:17.422 --> 00:00:19.502
Teraz też jest niezły!

00:00:19.602 --> 00:00:24.094
Dwie zmienne, u góry,
przechowują literały.

00:00:25.087 --> 00:00:28.305
Literał to obiekt, który już znamy:

00:00:28.405 --> 00:00:33.111
w klamrach wpisujemy nazwy
właściwości oraz wartości.

00:00:34.292 --> 00:00:38.999
Tu mamy dwie zmienne z literałami,
a tu - funkcję „drawWinston”,

00:00:39.099 --> 00:00:41.006
przyjmującą jeden argument.

00:00:41.106 --> 00:00:45.836
Funkcja rysuje obraz
z uwzględnieniem „x” i „y”

00:00:45.936 --> 00:00:47.647
oraz właściwości obiektu;

00:00:47.747 --> 00:00:52.103
wyświetla też podpis
z przydomkiem i wiekiem.

00:00:52.918 --> 00:00:57.864
U dołu mamy funkcję „drawWinston”
dla wieku nastoletniego i dorosłego.

00:00:57.964 --> 00:01:00.905
Dlatego pokazuje się obraz.

00:01:01.005 --> 00:01:05.991
Super! Przyglądając się literałom,

00:01:06.091 --> 00:01:11.116
zauważymy ich podobieństwo.

00:01:11.216 --> 00:01:13.909
Mają te same właściwości

00:01:14.009 --> 00:01:17.601
i w obu może działać
ta sama funkcja „drawWinston”.

00:01:17.701 --> 00:01:21.631
Zastanówmy się:
każdy literał opisuje

00:01:21.731 --> 00:01:23.429
jakiś rodzaj Winstona.

00:01:23.529 --> 00:01:28.514
Jakby na świecie istniał
abstrakcyjny typ Winstona,

00:01:28.614 --> 00:01:31.579
zatem każdy Winston
miałby te same właściwości

00:01:31.679 --> 00:01:35.828
(przydomek, wiek,
współrzędne „x” i „y”)...

00:01:36.386 --> 00:01:41.889
A my tu stworzyliśmy
tylko dwie instancje Winstona,

00:01:41.989 --> 00:01:44.990
by opisać go
w szczególnej sytuacji.

00:01:45.090 --> 00:01:48.065
Ten jest nastolatkiem,
a ten - dorosłym.

00:01:48.165 --> 00:01:51.455
Są podobni do siebie.

00:01:51.555 --> 00:01:54.660
Bardzo wiele ich łączy.

00:01:54.760 --> 00:01:57.453
Tak zresztą działa świat.

00:01:57.553 --> 00:02:01.066
Istnieją abstrakcyjne
typy danych, np. ludzie,

00:02:01.166 --> 00:02:05.626
a każdy z nas jest instancją,
z własnymi cechami.

00:02:05.726 --> 00:02:10.078
W JavaScript możemy używać
technik obiektowych,

00:02:10.178 --> 00:02:14.606
żeby te zmienne z Winstonem

00:02:14.706 --> 00:02:17.751
były instancjami obiektu „Winston”,

00:02:17.851 --> 00:02:21.664
i wiedziały,
że mają wspólne cechy.

00:02:21.764 --> 00:02:24.073
Aby tak było, musimy...

00:02:24.173 --> 00:02:27.818
opisać ten abstrakcyjny
typ danych - „Winstona”.

00:02:27.918 --> 00:02:32.578
W tym celu określimy zmienną,
by przechowywać w niej dane.

00:02:32.678 --> 00:02:35.759
Piszę więc: „var Winston”,
przez wielkie „W”

00:02:35.859 --> 00:02:38.743
(nazwy obiektów
zaczynamy od wielkiej litery).

00:02:38.843 --> 00:02:41.030
I piszemy, że jest to równe funkcji.

00:02:42.115 --> 00:02:46.649
To funkcja specjalna,
zwana konstruktorem.

00:02:46.763 --> 00:02:49.702
Zostanie przywołana zawsze,
gdy będziemy chcieli

00:02:49.802 --> 00:02:51.821
stworzyć nową instancję Winstona.

00:02:51.921 --> 00:02:54.288
Chcąc stworzyć Winstona
nastoletniego

00:02:54.388 --> 00:02:57.737
albo dorosłego,
przywołamy tę funkcję.

00:02:57.837 --> 00:03:00.767
Będzie ona przyjmować

00:03:00.867 --> 00:03:03.623
argumenty, których potrzebuje,

00:03:03.723 --> 00:03:06.200
by stworzyć pełnego Winstona.

00:03:06.300 --> 00:03:10.171
W tym przypadku to przydomek,
wiek, „x” i „y”.

00:03:11.233 --> 00:03:15.024
Skoro przyjęliśmy te argumenty,
musimy coś z nimi zrobić.

00:03:15.124 --> 00:03:17.787
Trzeba przypisać

00:03:17.887 --> 00:03:21.200
te informacje do obiektu „Winston”.

00:03:21.434 --> 00:03:24.776
Użyjemy nowego specjalnego
hasła, zwanego „this” (to).

00:03:25.536 --> 00:03:28.406
Będzie się odnosić
do bieżącej instancji obiektu.

00:03:28.506 --> 00:03:30.813
Napiszemy: „this.nickname”,

00:03:30.913 --> 00:03:34.714
co będzie znaczyć, że właściwość
przydomka obiektu jest równa...

00:03:34.814 --> 00:03:38.244
temu, co poda
funkcja konstruktor. OK?

00:03:38.344 --> 00:03:41.259
A „this.age” jest równe
wprowadzonemu wiekowi;

00:03:41.359 --> 00:03:44.676
„this.x” równa się
wprowadzonemu „x”, a „y”...

00:03:45.807 --> 00:03:48.252
równa się wprowadzonemu „y”.

00:03:48.352 --> 00:03:52.948
Mamy abstrakcyjny typ danych,
który nazwaliśmy Winstonem,

00:03:53.048 --> 00:03:56.634
a z pomocą konstruktora
możemy stworzyć nowego Winstona.

00:03:57.497 --> 00:04:00.187
Spróbujmy z tego skorzystać.

00:04:00.287 --> 00:04:05.063
Znów robimy nastoletniego Winstona.
Powiemy, że jest on równy...

00:04:05.163 --> 00:04:07.153
Zamiast wstawiać klamry,

00:04:07.253 --> 00:04:10.141
powiemy, że jest równy
nowemu Winstonowi.

00:04:10.241 --> 00:04:13.770
Czyli staramy się stworzyć
nową instancję Winstona.

00:04:13.870 --> 00:04:17.300
Wprowadzamy potrzebne informacje:
„winstonTeen”,

00:04:17.399 --> 00:04:21.293
15, 20, 50. W porządku?

00:04:22.276 --> 00:04:25.752
Stary fragment możemy skasować.
Jest już niepotrzebny.

00:04:27.284 --> 00:04:30.786
Stworzyliśmy nowego Winstona.

00:04:30.886 --> 00:04:34.970
Powiemy, że Dorosły Winston
równa się Nowemu Winstonowi.

00:04:35.070 --> 00:04:37.617
Nazywa się Pan Wygrany,

00:04:37.717 --> 00:04:39.127
ładnie!

00:04:39.227 --> 00:04:43.237
Ma 30 lat i znajduje się
na 229 i 50.

00:04:43.933 --> 00:04:47.207
Możemy skasować literał.

00:04:47.307 --> 00:04:50.063
Hura! Nasz program działa!

00:04:50.729 --> 00:04:54.243
Powiedzieliśmy tutaj:

00:04:54.343 --> 00:04:57.656
mamy abstrakcyjny
typ danych, Winstona,

00:04:57.756 --> 00:05:00.403
i możemy tworzyć nowe instancje

00:05:00.503 --> 00:05:04.251
z wyjątkowymi właściwościami.

00:05:04.351 --> 00:05:08.639
Przypomnijmy sobie
właściwości w nich zawarte.

00:05:08.739 --> 00:05:10.613
Trzeba o nich pamiętać.

00:05:10.713 --> 00:05:14.130
Mamy tu „this.nickname”
i „this.age”.

00:05:14.230 --> 00:05:17.596
Gdyby nie było „this.age”,

00:05:17.696 --> 00:05:19.970
spójrzcie: wyskakuje „nieokreślone”.

00:05:20.070 --> 00:05:22.780
Bo tutaj, wewnątrz
funkcji „drawWinston”,

00:05:22.880 --> 00:05:28.005
każdy wprowadzony obiekt
powinien mieć właściwość wieku.

00:05:28.105 --> 00:05:30.512
Gdybyśmy nie powiedzieli
„this.age”,

00:05:30.612 --> 00:05:32.486
nie byłoby właściwości wieku.

00:05:32.586 --> 00:05:35.481
Wpisaliśmy to do konstruktora
i nic nie zrobiliśmy.

00:05:35.581 --> 00:05:39.359
Musimy przypisać wiek do obiektu
używając hasła „this”.

00:05:39.459 --> 00:05:41.170
Dodajmy to z powrotem.

00:05:41.270 --> 00:05:46.255
Pomyślicie: „Jasne, twój program
śmiga, robisz niezłe rzeczy...

00:05:46.355 --> 00:05:50.505
ale to wszystko dałoby się
osiągnąć starymi metodami”.

00:05:50.605 --> 00:05:52.386
Teraz będzie fajnie.

00:05:52.486 --> 00:05:55.770
Każdy Winston przechodzi
przez tego samego konstruktora.

00:05:55.870 --> 00:06:00.814
Gdybyśmy chcieli, możemy zmienić
to i owo o Winstonie.

00:06:00.914 --> 00:06:03.043
O wszystkich Winstonach tutaj.

00:06:03.143 --> 00:06:05.830
Przy wieku napiszemy „ile lat”.

00:06:05.930 --> 00:06:07.618
Umieszczamy to tu

00:06:07.718 --> 00:06:12.424
i każdy Winston mówi:
„15 lat”, „30 lat” itd.

00:06:12.524 --> 00:06:14.866
To jego specyfika,

00:06:14.966 --> 00:06:17.231
ale instancje mają też
cechy wspólne.

00:06:17.331 --> 00:06:20.764
Świetne w programowaniu
obiektowym jest to...

00:06:20.864 --> 00:06:22.757
że istnieją rodzaje obiektów,

00:06:22.857 --> 00:06:26.287
a my możemy tworzyć
ich instancje.

00:06:26.387 --> 00:06:29.700
Czasami są podobne,
np. mają te same własciwości,

00:06:29.800 --> 00:06:34.739
ale są też różnice, np. „ta właściwość
przybiera inną wartość niż ta druga”.

00:06:35.528 --> 00:06:38.992
Możemy jednak zrobić to samo,

00:06:39.092 --> 00:06:43.168
przywołać te same funkcje
i użyć ich w podobny sposób.

00:06:43.268 --> 00:06:45.908
To są zalety
programowania obiektowego,

00:06:46.008 --> 00:06:48.485
ale zobaczycie: można więcej!

00:06:48.585 --> 00:06:50.017
Oglądajcie dalej!