1
00:00:00,897 --> 00:00:03,523
Estamos de volta com nosso
programa que cria Winstons

2
00:00:03,523 --> 00:00:07,329
mas eu adicionei um novo tipo de objeto
Hopper porque Hopper estava se sentindo

3
00:00:07,329 --> 00:00:08,667
um pouco deixado de lado.

4
00:00:08,667 --> 00:00:11,755
Eu defino Hopper do mesmo
jeito que eu defino Winston,

5
00:00:11,755 --> 00:00:15,923
começando pelo construtor e recebendo
as mesmas propriedades e então <i>draw</i>

6
00:00:15,923 --> 00:00:21,008
e <i>talk</i> e eu também adicionei
outro método chamado <i>Horray</i>

7
00:00:21,008 --> 00:00:24,508
porque Hoppers realmente gostam de
comemorar e Winstons não mesmo.

8
00:00:25,328 --> 00:00:31,164
No final da função, eu criei dois novos
objetos Hopper: <i>lilHopper</i> e <i>bigHopper</i>

9
00:00:31,164 --> 00:00:35,347
e chamei <i>draw</i> nos dois e <i>talk</i>
em um e <i>Horray</i> no outro.

10
00:00:36,167 --> 00:00:37,618
Está bem arrumado.

11
00:00:37,618 --> 00:00:40,128
Agora, se olharmos esse
código aqui em cima,

12
00:00:40,128 --> 00:00:42,803
você talvez note algo interessante.

13
00:00:42,863 --> 00:00:47,128
O código do Hopper é muito similar
ao código do Winston.

14
00:00:47,128 --> 00:00:49,174
Particularmente, veja seu construtor.

15
00:00:49,174 --> 00:00:54,605
Não sei se você se lembra mas é exatamente
o mesmo código do construtor de Winston.

16
00:00:54,765 --> 00:01:00,376
E essa função <i>talk</i> é também exatamente
o mesmo código da função <i>talk</i> do Winston.

17
00:01:01,116 --> 00:01:03,897
E ambos possuem a função <i>draw</i>.

18
00:01:03,897 --> 00:01:08,182
Então há muito em comum entre esses
dois tipos de objetos e isso faz sentido

19
00:01:08,182 --> 00:01:12,271
porque você sabe que Hopper e Winston
são dois tipos muito similares de objeto.

20
00:01:12,271 --> 00:01:16,989
E, se você pensar sobre o 
mundo real fora do computador,

21
00:01:16,989 --> 00:01:20,773
a maioria dos objetos compartilha
similaridades com outros tipos de objeto.

22
00:01:20,773 --> 00:01:25,213
Como no reino animal, todos os animais
são similares de alguma forma.

23
00:01:25,213 --> 00:01:28,372
E temos diferentes tipos de 
animais como os humanos.

24
00:01:28,372 --> 00:01:34,358
E humanos compartilham dessas semelhanças
mas também tem suas próprias propriedades.

25
00:01:34,358 --> 00:01:37,906
Então podemos dizer que animal
é um tipo de objeto

26
00:01:37,906 --> 00:01:41,564
de que o tipo de objeto humano
herda funcionalidades.

27
00:01:41,564 --> 00:01:43,338
Não começamos completamente do zero,

28
00:01:43,338 --> 00:01:46,952
adicionamos funcionalidades por cima das
que temos por ser um tipo de animal.

29
00:01:46,952 --> 00:01:51,316
Como todos os animais fazem sons,
mas humanos também fazem a linguagem.

30
00:01:51,876 --> 00:01:56,355
Então esse conceito de herança de objetos
é realmente útil na programação também.

31
00:01:56,355 --> 00:02:00,105
E nós podemos criar uma cadeia de herança
de objetos em nosso Javascript.

32
00:02:00,105 --> 00:02:02,299
Então pra fazer isso nós precisamos pensar

33
00:02:02,299 --> 00:02:05,035
sobre o que é compartilhada
por nossos tipos de objeto.

34
00:02:05,035 --> 00:02:06,633
E inventar um nome pra isso.

35
00:02:06,633 --> 00:02:10,675
Porque vamos criar um novo tipo de objeto
que represente o objeto base.

36
00:02:10,675 --> 00:02:12,224
Vamos chamá-los de criaturas.

37
00:02:12,224 --> 00:02:13,783
Ambos são criaturas.

38
00:02:13,783 --> 00:02:17,951
Então dizemos <i>var</i><i>Creature</i> é igual a...
E agora precisamos da função construtora.

39
00:02:17,951 --> 00:02:22,602
Então vamos pegar do Hopper já 
que é a mesma que Winston tem.

40
00:02:22,602 --> 00:02:23,602
Certo.

41
00:02:23,602 --> 00:02:26,532
E então... Vamos ver.

42
00:02:26,532 --> 00:02:29,336
Agora nós queremos...
O que queremos fazer em sequência?

43
00:02:29,336 --> 00:02:32,406
Talvez queiramos adicionar a função <i>talk</i>.

44
00:02:33,516 --> 00:02:36,018
A função <i>talk</i> apenas pegamos do Hopper.


45
00:02:36,018 --> 00:02:39,380
Mas, é claro, precisamos dela
no protótipo de criatura.

46
00:02:41,273 --> 00:02:45,620
Então agora temos esse
tipo de objeto <i>Creature</i>

47
00:02:45,620 --> 00:02:48,090
Mas precisamos dizer a Hopper

48
00:02:48,090 --> 00:02:52,716
que Hopper deveria basear sua
funcionalidade em <i>Creature</i>.

49
00:02:52,716 --> 00:02:56,055
Podemos fazer isso
escrevendo esta linha aqui.

50
00:02:56,055 --> 00:03:04,997
Vamos dizer Hopper.<i>prototype</i> é igual a
<i>Object.create(Creature.prototype)</i>

51
00:03:04,997 --> 00:03:09,798
Essa linha diz ao Javascript para basear
o protótipo do Hopper, ou seja,

52
00:03:09,798 --> 00:03:14,629
basear toda a funcionalidade do Hopper
sobre o protótipo de criatura.

53
00:03:14,629 --> 00:03:20,152
Isso significa que toda vez que ele
procurar uma função em um Hopper,

54
00:03:20,152 --> 00:03:22,769
procurará no protótipo de Hopper primeiro,

55
00:03:22,769 --> 00:03:27,146
mas se não achar o que está procurando,
vai procurar no protótipo de criatura.

56
00:03:27,146 --> 00:03:30,052
E isso é o que chamamos
de cadeia de protótipos.

57
00:03:30,052 --> 00:03:35,304
Um vez que já fizemos isso, poderíamos
deletar a função <i>talk</i> do Hopper.

58
00:03:35,304 --> 00:03:38,946
Porque ela já existe em criatura
que está acima na cadeia de protótipos.

59
00:03:38,946 --> 00:03:40,128
Então vamos testar.

60
00:03:41,818 --> 00:03:42,781
Funciona!

61
00:03:42,781 --> 00:03:47,284
E funciona porque a acha
no protótipo de criatura.

62
00:03:48,834 --> 00:03:51,894
Vamos tentar deletar do Winston também.

63
00:03:54,324 --> 00:03:57,920
Não funcionou, aqui diz que o objeto
não tem o método <i>talk</i>.

64
00:03:57,920 --> 00:04:01,613
E por que isso? Bem, nós temos o
construtor de Winston e a função <i>draw</i>

65
00:04:01,613 --> 00:04:02,917
e tiramos a função <i>talk</i>.

66
00:04:02,917 --> 00:04:06,444
Pode-se notar que esquecemos de dizer
na verdade que o protótipo de Winston

67
00:04:06,444 --> 00:04:10,349
deve se basear no protótipo de criatura.
Precisamos daquela linha muito importante.

68
00:04:10,349 --> 00:04:15,561
Winston<i>.prototype = 
Object.create(Creature.prototype)</i>

69
00:04:19,000 --> 00:04:20,426
E repare num ponto importante.

70
00:04:20,426 --> 00:04:24,977
Eu tenho essa linha depois da função do
construtor mas antes de adicionar qualquer

71
00:04:24,977 --> 00:04:28,614
outra coisa ao protótipo do Winston.
Isso é o que você geralmente quer fazer.

72
00:04:28,614 --> 00:04:31,230
Você quer dizer que assim
que você estiver começando,

73
00:04:31,230 --> 00:04:34,050
é nisso que seu protótipo
inicial vai ser baseado.

74
00:04:34,050 --> 00:04:37,124
Mas então podemos continuar 
adicionando coisas ao seu protótipo.

75
00:04:37,124 --> 00:04:41,473
Porque pode haver algo que é único aos
Winstons ou único aos Hoppers

76
00:04:41,473 --> 00:04:43,009
que outras criatura não tem.

77
00:04:43,009 --> 00:04:45,765
E isso não tem problema,
você pode definir essas coisas.

78
00:04:46,485 --> 00:04:49,976
Agora, se olharmos, ainda temos
algumas partes de código repetidas.

79
00:04:49,976 --> 00:04:51,524
O código do construtor.

80
00:04:51,524 --> 00:04:53,366
Temos ele todas as três vezes.

81
00:04:53,366 --> 00:04:56,638
Então poderíamos
apenas deletá-lo?

82
00:04:57,918 --> 00:04:59,410
Vamos tentar.

83
00:05:00,870 --> 00:05:03,439
Não parece que isso funcionou.

84
00:05:03,439 --> 00:05:07,500
Porque nosso Hopper aparecer lá em cima no
canto esquerdo e esqueceu tudo sobre si.

85
00:05:07,500 --> 00:05:12,994
E isso é porque JavaScritpt não assume que
você quer o mesmo construtor mesmo que

86
00:05:12,994 --> 00:05:15,859
você queira basear o protótipo nele.

87
00:05:16,019 --> 00:05:19,491
Você sabe, você pode definir seu
próprio construtor para esses objetos.

88
00:05:19,491 --> 00:05:26,043
Mas você também tem um jeito fácil de
chamar um construtor dentro de um objeto.

89
00:05:26,043 --> 00:05:28,306
Então o jeito que podemos
fazer isso é escrevendo

90
00:05:28,306 --> 00:05:35,470
<i>Creature.call(this, nickname, age, x, y)</i>

91
00:05:36,400 --> 00:05:39,528
O que isso faz, note que funcionou.

92
00:05:39,528 --> 00:05:44,619
E o que isso fez foi realmente chamar a
função da criatura, a função construtora.

93
00:05:44,619 --> 00:05:48,339
Está chamando essa função mas está
chamando e dizendo você deveria chamar

94
00:05:48,339 --> 00:05:53,694
a função construtora como se ela estivesse
sendo chamada de um objeto Hopper.

95
00:05:53,694 --> 00:05:56,928
E como se ela estivesse sendo
chamada com esses argumentos.

96
00:05:56,928 --> 00:05:59,427
E esses são os argumentos com
que Hopper foi chamado.

97
00:05:59,827 --> 00:06:03,679
E, no fim, o código vai ser executado
como se estivesse logo aqui.

98
00:06:03,679 --> 00:06:06,577
E isso é exatamente o que
queremos. E funcionou!

99
00:06:06,577 --> 00:06:13,919
E podemos ir a frente e copiar essa linha
dentro do construtor do Winston também.

100
00:06:15,069 --> 00:06:16,531
E funciona!

101
00:06:17,371 --> 00:06:20,561
Então olhe aqui, encapsulamos todas as
propriedades compartilhadas e

102
00:06:20,561 --> 00:06:24,567
funcionalidades dos nossos objetos em um
único tipo de objeto base, criatura.

103
00:06:24,567 --> 00:06:27,951
E fizemos dois tipos de objeto que
se estendem deste objeto base.

104
00:06:27,951 --> 00:06:31,518
Eles herdam funcionalidades mas
também adicionam suas próprias.

105
00:06:31,718 --> 00:06:33,395
E o mais legal sobre isso é que

106
00:06:33,395 --> 00:06:36,442
podemos alterar a funcionalidade
compartilhada em um único lugar.

107
00:06:36,442 --> 00:06:38,821
Por exemplo, se quiséssemos 
mudar a idade de novo,

108
00:06:38,821 --> 00:06:41,110
poderíamos dizer: mais "anos de idade".

109
00:06:41,510 --> 00:06:43,991
Agora todo mundo tem "anos de idade".

110
00:06:44,101 --> 00:06:52,472
Ou poderíamos mudar a função <i>talk</i>. E agora
Winstons e Hoppers estão dizendo "sup".

111
00:06:52,602 --> 00:06:56,424
Então agora que você viu como criar tipos
de objeto e herdar de tipos de objetos,

112
00:06:56,424 --> 00:06:58,168
você pode começar a pensar como isso


113
00:06:58,168 --> 00:07:01,267
pode ser útil em nossos desenhos
e animações e simulações e jogos.

114
00:07:01,267 --> 00:07:04,973
Por exemplo, talvez você tenha um jogo e
tenha vários tipos de personagens nele

115
00:07:04,973 --> 00:07:07,660
e todos eles podem correr mas
somente alguns podem pular.

116
00:07:07,660 --> 00:07:11,660
É um lugar perfeito pra alguns tipos de
objeto e algumas heranças.

117
00:07:11,844 --> 00:07:15,360
Mas eu aposto que você pode pensar em
uma tonelada de outros jeitos também.

118
00:07:15,360 --> 00:07:17,000
Legendado por [Alberto Oliveira]
Revisado por [Fernando dos Reis]