1
00:00:01,184 --> 00:00:03,308
Teď, když už znáte
základy Javascriptu,

2
00:00:03,308 --> 00:00:06,050
ukážu vám jeden skvělý 
způsob, jak ho používat.

3
00:00:06,050 --> 00:00:09,555
A tím způsobem je objektově
orientované programování.

4
00:00:09,555 --> 00:00:12,156
Nejdříve musíme pochopit, 
proč je to vlastně užitečné.

5
00:00:12,298 --> 00:00:13,826
Takže mám tady program,

6
00:00:13,826 --> 00:00:17,697
který by byl mnohem lepší,
kdyby byl objektově orientován.

7
00:00:17,697 --> 00:00:19,967
Program jako takový
je docela dobrý.

8
00:00:19,967 --> 00:00:21,429
Nahoře máme dvě proměnné,

9
00:00:21,429 --> 00:00:25,165
které v sobě ukládají 
jednoduché literály objektů.

10
00:00:25,323 --> 00:00:28,560
Literál objektu je druh objektu, 
se kterým jsme se už setkali.

11
00:00:28,560 --> 00:00:30,680
Vytvoříme ho pomocí 
dvou složených závorek,

12
00:00:30,680 --> 00:00:33,762
do kterých pak vložíme všechny
názvy vlastností a hodnot.

13
00:00:33,762 --> 00:00:36,875
Takže máme dvě proměnné 
těchto objektových literálů.

14
00:00:36,875 --> 00:00:41,036
A pak zde dole máme funkci drawWinston,
která očekává jenom jeden argument.

15
00:00:41,036 --> 00:00:43,347
Nakonec vykreslí argument,

16
00:00:43,347 --> 00:00:47,847
a to tak, že nakreslí obrázek na 
základě x a y vlastností objektu.

17
00:00:47,847 --> 00:00:52,900
Následuje titulek založený na 
jménu a věku tohoto objektu.

18
00:00:52,900 --> 00:00:55,538
Nakonec úplně dole
zavoláme drawWinston.

19
00:00:55,538 --> 00:00:58,651
Nejprve na dospívajícího Winstona
a pak na dospělého Winstona.

20
00:00:58,651 --> 00:01:00,862
A díky tomu se objeví.

21
00:01:02,092 --> 00:01:06,587
Když teď půjdeme sem nahoru
a podíváme se na objektové literály,

22
00:01:06,587 --> 00:01:08,568
možná si na nich něco všimnete.

23
00:01:08,568 --> 00:01:11,188
Jde o to, že vypadají 
opravdu podobně.

24
00:01:11,188 --> 00:01:14,208
Oba mají stejné sady vlastností,

25
00:01:14,208 --> 00:01:17,891
a oba mohou být ovládány pomocí 
stejné funkce drawWinston.

26
00:01:17,891 --> 00:01:20,362
Když nad tím zapřemýšlíte,

27
00:01:20,362 --> 00:01:24,240
tak si uvědomíte, že oba 
literály popisují typ Winstona.

28
00:01:24,240 --> 00:01:28,840
Můžeme o tom přemýšlet jako o 
abstraktním typu Winstona ve světě.

29
00:01:28,840 --> 00:01:32,240
A každý Winston má 
stejnou sadu vlastností.

30
00:01:32,240 --> 00:01:36,381
Jako jméno, věk, x a y.

31
00:01:36,381 --> 00:01:42,090
Takže jsme zde vlastně
vytvořili dvě instance Winstona,

32
00:01:42,090 --> 00:01:45,001
které popisují konkrétního Winstona.

33
00:01:45,001 --> 00:01:48,350
Těmi jsou dospívající Winston
a dospělý Winston.

34
00:01:48,350 --> 00:01:54,894
Opravdu jsou si oba velmi podobní 
a mají spustu věcí společných.

35
00:01:54,894 --> 00:01:57,712
Pokud se zamyslíte, tak ve světě
to funguje velmi podobně.

36
00:01:57,712 --> 00:02:01,341
Máme abstraktní datové 
typy jako například lidé.

37
00:02:01,341 --> 00:02:04,024
A my všichni jsme pak 
konkrétní instancí těchto typů.

38
00:02:04,024 --> 00:02:06,041
Ale máme naše 
jedinečné vlastnosti.

39
00:02:06,041 --> 00:02:10,362
Teď využijeme objektově
orientované techniky v Javascriptu.

40
00:02:10,362 --> 00:02:17,921
Uděláme tyto proměnné Winstona
formálními instancemi objektu Winston.

41
00:02:17,921 --> 00:02:21,963
Takže instance vědí, že 
společně sdílejí určité věci.

42
00:02:21,963 --> 00:02:25,091
Abychom to provedli,
potřebujeme jednu věc.

43
00:02:25,091 --> 00:02:30,372
Popsat tento abstraktní datový
typ Winstona a udělat z něj proměnnou.

44
00:02:30,372 --> 00:02:32,678
Datový typ uložíme do proměnné.

45
00:02:32,678 --> 00:02:35,220
Takže napíšeme var Winston, 
uděláme velké W,

46
00:02:35,220 --> 00:02:38,630
protože vždy začínáme
naše typy objektů velkým písmenem,

47
00:02:38,630 --> 00:02:41,810
a nastavíme to tak,
že se to rovná funkci.

48
00:02:41,810 --> 00:02:46,950
Tato funkce je speciální funkce,
kterou nazýváme "konstruktor".

49
00:02:46,950 --> 00:02:49,471
Protože se jedná o to, 
co se volá pokaždé,

50
00:02:49,471 --> 00:02:52,110
když chceme vytvořit novou 
instanci Winstona.

51
00:02:52,110 --> 00:02:55,629
Takže když chceme vytvořit dospívajícího
Winstona, volá se tato funkce.

52
00:02:55,629 --> 00:02:58,217
A když chceme dospělého Winstona,
volá se funkce znovu.

53
00:02:58,217 --> 00:03:03,037
To znamená, že tato funkce by 
měla obsahovat všechny argumenty,

54
00:03:03,037 --> 00:03:06,457
které potřebuje pro vytvoření
kompletního Winstona.

55
00:03:06,457 --> 00:03:10,718
V tomto případě musí obsahovat
jméno, věk, x a y.

56
00:03:10,718 --> 00:03:15,249
Jakmile máme tyto argumenty,
musíme s nimi něco udělat.

57
00:03:15,249 --> 00:03:21,389
Musíme tyto informace 
připojit k objektu Winston.

58
00:03:21,389 --> 00:03:25,330
A k tomu použijeme speciální
klíčové slovo "this".

59
00:03:25,330 --> 00:03:28,788
A "this" bude odkazovat
k aktuální instanci objektu.

60
00:03:28,788 --> 00:03:31,800
Takže napíšeme this.nickname.

61
00:03:31,800 --> 00:03:37,649
Název vlastnosti tohoto objektu 
se rovná obsahu funkce konstruktoru.

62
00:03:38,451 --> 00:03:41,851
A this.age se rovná věku,
který vložíme.

63
00:03:41,851 --> 00:03:44,678
A this.x se rovná hodnotě x, 
kterou vložíme.

64
00:03:44,678 --> 00:03:47,466
A this.y se rovná y,
které vložíme.

65
00:03:47,466 --> 00:03:52,838
Tak a teď máme tento abstraktní 
datový typ s názvem Winston.

66
00:03:52,838 --> 00:03:56,488
A má funkci konstruktoru, kterou
můžeme použít k vytvoření nového Winstona.

67
00:03:57,358 --> 00:03:59,476
Zkusme to použít!

68
00:04:00,416 --> 00:04:02,576
Budeme znovu vytvářet winstonTeen,

69
00:04:02,576 --> 00:04:05,314
ale tentokrát napíšeme 
winstonTeen se rovná.

70
00:04:05,314 --> 00:04:10,363
A místo složených závorek
napíšeme rovná se "new Winston".

71
00:04:10,363 --> 00:04:13,844
Tím říkáme, že zkoušíme 
vytvořit novou instanci Winstona.

72
00:04:13,844 --> 00:04:16,346
A pak vložíme informace, 
které instance potřebuje.

73
00:04:16,346 --> 00:04:21,478
Takže "Winsteen", "15", "20", "50".

74
00:04:22,246 --> 00:04:27,360
Pak můžeme tento starý kód smazat,
protože ho už nepotřebujeme.

75
00:04:27,360 --> 00:04:30,347
Takže teď jsme vytvořily 
nového Winsteena.

76
00:04:31,207 --> 00:04:35,960
Nyní můžeme napsat
winstonAdult = new Winston ().

77
00:04:35,960 --> 00:04:40,082
A samozřejmě jeho jméno je 
"Pane Winst-a-lot".

78
00:04:40,662 --> 00:04:44,502
Je mu 30 let a nachází se 
na pozicích 229 a 50.

79
00:04:44,502 --> 00:04:50,712
Poté můžeme smazat tento literál
a náš kód bude pořád fungovat.

80
00:04:50,712 --> 00:04:53,651
Co jsme udělali je to, 
že jsme řekli,

81
00:04:53,651 --> 00:04:57,851
že máme tento druh abstraktního
typu dat, což je tento Winston,

82
00:04:57,852 --> 00:05:00,566
a můžeme vytvořit 
nové instance Winstona,

83
00:05:00,566 --> 00:05:05,161
které mají tyto vlastnosti, 
které jsou pro ně jedinečné.

84
00:05:05,161 --> 00:05:08,661
Tyto vlastnosti uvnitř
si budeme pamatovat.

85
00:05:08,661 --> 00:05:10,644
Pamatování je opravdu důležité.

86
00:05:10,644 --> 00:05:14,325
Takže tady máme:
this.nickname, this.age.

87
00:05:14,325 --> 00:05:20,249
Pokud bychom náhodou this.age neměli,
konzole nám řekne "nedefinováno".

88
00:05:20,249 --> 00:05:22,958
To proto, že tady dole,
tato funkce drawWinston,

89
00:05:22,958 --> 00:05:28,220
očekává, že ať už dostane jakýkoli objekt,
očekává, že bude mít vlastnost "age".

90
00:05:28,220 --> 00:05:32,023
A pokud jsme nenapsali this.age,
pak to tuto vlastnost nemá.

91
00:05:32,392 --> 00:05:35,433
Předali jsme ji konstruktoru,
ale pak jsme s tím nic nedělali.

92
00:05:35,433 --> 00:05:39,452
Musíme to k objektu připojit
pomocí klíčového slova "this".

93
00:05:39,621 --> 00:05:41,542
Dáme to zpět.

94
00:05:41,542 --> 00:05:46,401
Možná si říkáte, že
váš kód přece funguje,

95
00:05:46,401 --> 00:05:50,457
ale de facto jsme udělali
to samé, co jsme měli předtím.

96
00:05:50,457 --> 00:05:52,106
Ale je na tom 
jedna skvělá věc.

97
00:05:52,106 --> 00:05:56,173
Teď všichni naši Winstoni prochází
stejnou funkcí konstruktoru.

98
00:05:56,173 --> 00:06:00,967
Takže pokud chceme, můžeme 
o Winstonovi některé věci změnit.

99
00:06:00,967 --> 00:06:02,917
O všech Winstonech,
a to tady uvnitř.

100
00:06:02,917 --> 00:06:06,107
Takže možná chceme upravit věk a
připojit k němu na konec "yrs old".

101
00:06:06,107 --> 00:06:09,838
Můžeme to prostě dát sem,
a tím se ke všem Winstonům připíše:

102
00:06:09,838 --> 00:06:12,879
"15 let", "30 let" atd.

103
00:06:12,879 --> 00:06:14,977
Takže tato část 
o nich je jedinečná,

104
00:06:14,977 --> 00:06:17,307
ale pak mají taky věci,
které jsou společné.

105
00:06:17,307 --> 00:06:20,197
A skvělou věcí na objektově 
orientovaném programování je to,

106
00:06:20,197 --> 00:06:23,050
že na světě existuje
spousta druhů předmětů,

107
00:06:23,050 --> 00:06:26,048
ze kterých můžete
vytvářet instance.

108
00:06:26,048 --> 00:06:28,041
V některých věcech
jsou si velmi podobny.

109
00:06:28,041 --> 00:06:29,810
Všechny mají řadu
stejných vlastnosti.

110
00:06:29,810 --> 00:06:31,450
Pak jsou věci, 
které jsou odlišné.

111
00:06:31,450 --> 00:06:34,640
Jako například tato vlastnost,
která je ve skutečnosti jiná hodnota,

112
00:06:34,640 --> 00:06:35,808
než tato jiná vlastnost.

113
00:06:35,808 --> 00:06:40,508
Dále pak s nimi můžeme dělat
stejné věci, jako volat stejné funkce.

114
00:06:40,508 --> 00:06:43,069
A používat je podobným způsobem.

115
00:06:43,069 --> 00:06:46,459
To je jen několik skvělých věcí na 
objektově orientovaném programování.

116
00:06:46,459 --> 00:06:48,548
Ale jak uvidíte, 
je toho mnohem víc!

117
00:06:48,548 --> 00:06:50,148
Takže se máte na co těšit.