WEBVTT
00:00:00.897 --> 00:00:03.523
Estamos de volta com nosso
programa que cria Winstons
00:00:03.523 --> 00:00:07.329
mas eu adicionei um novo tipo de objeto
Hopper porque Hopper estava se sentindo
00:00:07.329 --> 00:00:08.667
um pouco deixado de lado.
00:00:08.667 --> 00:00:11.755
Eu defino Hopper do mesmo
jeito que eu defino Winston,
00:00:11.755 --> 00:00:15.923
começando pelo construtor e recebendo
as mesmas propriedades e então draw
00:00:15.923 --> 00:00:21.008
e talk e eu também adicionei
outro método chamado Horray
00:00:21.008 --> 00:00:24.508
porque Hoppers realmente gostam de
comemorar e Winstons não mesmo.
00:00:25.328 --> 00:00:31.164
No final da função, eu criei dois novos
objetos Hopper: lilHopper e bigHopper
00:00:31.164 --> 00:00:35.347
e chamei draw nos dois e talk
em um e Horray no outro.
00:00:36.167 --> 00:00:37.618
Está bem arrumado.
00:00:37.618 --> 00:00:40.128
Agora, se olharmos esse
código aqui em cima,
00:00:40.128 --> 00:00:42.803
você talvez note algo interessante.
00:00:42.863 --> 00:00:47.128
O código do Hopper é muito similar
ao código do Winston.
00:00:47.128 --> 00:00:49.174
Particularmente, veja seu construtor.
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.
00:00:54.765 --> 00:01:00.376
E essa função talk é também exatamente
o mesmo código da função talk do Winston.
00:01:01.116 --> 00:01:03.897
E ambos possuem a função draw.
00:01:03.897 --> 00:01:08.182
Então há muito em comum entre esses
dois tipos de objetos e isso faz sentido
00:01:08.182 --> 00:01:12.271
porque você sabe que Hopper e Winston
são dois tipos muito similares de objeto.
00:01:12.271 --> 00:01:16.989
E, se você pensar sobre o
mundo real fora do computador,
00:01:16.989 --> 00:01:20.773
a maioria dos objetos compartilha
similaridades com outros tipos de objeto.
00:01:20.773 --> 00:01:25.213
Como no reino animal, todos os animais
são similares de alguma forma.
00:01:25.213 --> 00:01:28.372
E temos diferentes tipos de
animais como os humanos.
00:01:28.372 --> 00:01:34.358
E humanos compartilham dessas semelhanças
mas também tem suas próprias propriedades.
00:01:34.358 --> 00:01:37.906
Então podemos dizer que animal
é um tipo de objeto
00:01:37.906 --> 00:01:41.564
de que o tipo de objeto humano
herda funcionalidades.
00:01:41.564 --> 00:01:43.338
Não começamos completamente do zero,
00:01:43.338 --> 00:01:46.952
adicionamos funcionalidades por cima das
que temos por ser um tipo de animal.
00:01:46.952 --> 00:01:51.316
Como todos os animais fazem sons,
mas humanos também fazem a linguagem.
00:01:51.876 --> 00:01:56.355
Então esse conceito de herança de objetos
é realmente útil na programação também.
00:01:56.355 --> 00:02:00.105
E nós podemos criar uma cadeia de herança
de objetos em nosso Javascript.
00:02:00.105 --> 00:02:02.299
Então pra fazer isso nós precisamos pensar
00:02:02.299 --> 00:02:05.035
sobre o que é compartilhada
por nossos tipos de objeto.
00:02:05.035 --> 00:02:06.633
E inventar um nome pra isso.
00:02:06.633 --> 00:02:10.675
Porque vamos criar um novo tipo de objeto
que represente o objeto base.
00:02:10.675 --> 00:02:12.224
Vamos chamá-los de criaturas.
00:02:12.224 --> 00:02:13.783
Ambos são criaturas.
00:02:13.783 --> 00:02:17.951
Então dizemos varCreature é igual a...
E agora precisamos da função construtora.
00:02:17.951 --> 00:02:22.602
Então vamos pegar do Hopper já
que é a mesma que Winston tem.
00:02:22.602 --> 00:02:23.602
Certo.
00:02:23.602 --> 00:02:26.532
E então... Vamos ver.
00:02:26.532 --> 00:02:29.336
Agora nós queremos...
O que queremos fazer em sequência?
00:02:29.336 --> 00:02:32.406
Talvez queiramos adicionar a função talk.
00:02:33.516 --> 00:02:36.018
A função talk apenas pegamos do Hopper.
00:02:36.018 --> 00:02:39.380
Mas, é claro, precisamos dela
no protótipo de criatura.
00:02:41.273 --> 00:02:45.620
Então agora temos esse
tipo de objeto Creature
00:02:45.620 --> 00:02:48.090
Mas precisamos dizer a Hopper
00:02:48.090 --> 00:02:52.716
que Hopper deveria basear sua
funcionalidade em Creature.
00:02:52.716 --> 00:02:56.055
Podemos fazer isso
escrevendo esta linha aqui.
00:02:56.055 --> 00:03:04.997
Vamos dizer Hopper.prototype é igual a
Object.create(Creature.prototype)
00:03:04.997 --> 00:03:09.798
Essa linha diz ao Javascript para basear
o protótipo do Hopper, ou seja,
00:03:09.798 --> 00:03:14.629
basear toda a funcionalidade do Hopper
sobre o protótipo de criatura.
00:03:14.629 --> 00:03:20.152
Isso significa que toda vez que ele
procurar uma função em um Hopper,
00:03:20.152 --> 00:03:22.769
procurará no protótipo de Hopper primeiro,
00:03:22.769 --> 00:03:27.146
mas se não achar o que está procurando,
vai procurar no protótipo de criatura.
00:03:27.146 --> 00:03:30.052
E isso é o que chamamos
de cadeia de protótipos.
00:03:30.052 --> 00:03:35.304
Um vez que já fizemos isso, poderíamos
deletar a função talk do Hopper.
00:03:35.304 --> 00:03:38.946
Porque ela já existe em criatura
que está acima na cadeia de protótipos.
00:03:38.946 --> 00:03:40.128
Então vamos testar.
00:03:41.818 --> 00:03:42.781
Funciona!
00:03:42.781 --> 00:03:47.284
E funciona porque a acha
no protótipo de criatura.
00:03:48.834 --> 00:03:51.894
Vamos tentar deletar do Winston também.
00:03:54.324 --> 00:03:57.920
Não funcionou, aqui diz que o objeto
não tem o método talk.
00:03:57.920 --> 00:04:01.613
E por que isso? Bem, nós temos o
construtor de Winston e a função draw
00:04:01.613 --> 00:04:02.917
e tiramos a função talk.
00:04:02.917 --> 00:04:06.444
Pode-se notar que esquecemos de dizer
na verdade que o protótipo de Winston
00:04:06.444 --> 00:04:10.349
deve se basear no protótipo de criatura.
Precisamos daquela linha muito importante.
00:04:10.349 --> 00:04:15.561
Winston.prototype =
Object.create(Creature.prototype)
00:04:19.000 --> 00:04:20.426
E repare num ponto importante.
00:04:20.426 --> 00:04:24.977
Eu tenho essa linha depois da função do
construtor mas antes de adicionar qualquer
00:04:24.977 --> 00:04:28.614
outra coisa ao protótipo do Winston.
Isso é o que você geralmente quer fazer.
00:04:28.614 --> 00:04:31.230
Você quer dizer que assim
que você estiver começando,
00:04:31.230 --> 00:04:34.050
é nisso que seu protótipo
inicial vai ser baseado.
00:04:34.050 --> 00:04:37.124
Mas então podemos continuar
adicionando coisas ao seu protótipo.
00:04:37.124 --> 00:04:41.473
Porque pode haver algo que é único aos
Winstons ou único aos Hoppers
00:04:41.473 --> 00:04:43.009
que outras criatura não tem.
00:04:43.009 --> 00:04:45.765
E isso não tem problema,
você pode definir essas coisas.
00:04:46.485 --> 00:04:49.976
Agora, se olharmos, ainda temos
algumas partes de código repetidas.
00:04:49.976 --> 00:04:51.524
O código do construtor.
00:04:51.524 --> 00:04:53.366
Temos ele todas as três vezes.
00:04:53.366 --> 00:04:56.638
Então poderíamos
apenas deletá-lo?
00:04:57.918 --> 00:04:59.410
Vamos tentar.
00:05:00.870 --> 00:05:03.439
Não parece que isso funcionou.
00:05:03.439 --> 00:05:07.500
Porque nosso Hopper aparecer lá em cima no
canto esquerdo e esqueceu tudo sobre si.
00:05:07.500 --> 00:05:12.994
E isso é porque JavaScritpt não assume que
você quer o mesmo construtor mesmo que
00:05:12.994 --> 00:05:15.859
você queira basear o protótipo nele.
00:05:16.019 --> 00:05:19.491
Você sabe, você pode definir seu
próprio construtor para esses objetos.
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.
00:05:26.043 --> 00:05:28.306
Então o jeito que podemos
fazer isso é escrevendo
00:05:28.306 --> 00:05:35.470
Creature.call(this, nickname, age, x, y)
00:05:36.400 --> 00:05:39.528
O que isso faz, note que funcionou.
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.
00:05:44.619 --> 00:05:48.339
Está chamando essa função mas está
chamando e dizendo você deveria chamar
00:05:48.339 --> 00:05:53.694
a função construtora como se ela estivesse
sendo chamada de um objeto Hopper.
00:05:53.694 --> 00:05:56.928
E como se ela estivesse sendo
chamada com esses argumentos.
00:05:56.928 --> 00:05:59.427
E esses são os argumentos com
que Hopper foi chamado.
00:05:59.827 --> 00:06:03.679
E, no fim, o código vai ser executado
como se estivesse logo aqui.
00:06:03.679 --> 00:06:06.577
E isso é exatamente o que
queremos. E funcionou!
00:06:06.577 --> 00:06:13.919
E podemos ir a frente e copiar essa linha
dentro do construtor do Winston também.
00:06:15.069 --> 00:06:16.531
E funciona!
00:06:17.371 --> 00:06:20.561
Então olhe aqui, encapsulamos todas as
propriedades compartilhadas e
00:06:20.561 --> 00:06:24.567
funcionalidades dos nossos objetos em um
único tipo de objeto base, criatura.
00:06:24.567 --> 00:06:27.951
E fizemos dois tipos de objeto que
se estendem deste objeto base.
00:06:27.951 --> 00:06:31.518
Eles herdam funcionalidades mas
também adicionam suas próprias.
00:06:31.718 --> 00:06:33.395
E o mais legal sobre isso é que
00:06:33.395 --> 00:06:36.442
podemos alterar a funcionalidade
compartilhada em um único lugar.
00:06:36.442 --> 00:06:38.821
Por exemplo, se quiséssemos
mudar a idade de novo,
00:06:38.821 --> 00:06:41.110
poderíamos dizer: mais "anos de idade".
00:06:41.510 --> 00:06:43.991
Agora todo mundo tem "anos de idade".
00:06:44.101 --> 00:06:52.472
Ou poderíamos mudar a função talk. E agora
Winstons e Hoppers estão dizendo "sup".
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,
00:06:56.424 --> 00:06:58.168
você pode começar a pensar como isso
00:06:58.168 --> 00:07:01.267
pode ser útil em nossos desenhos
e animações e simulações e jogos.
00:07:01.267 --> 00:07:04.973
Por exemplo, talvez você tenha um jogo e
tenha vários tipos de personagens nele
00:07:04.973 --> 00:07:07.660
e todos eles podem correr mas
somente alguns podem pular.
00:07:07.660 --> 00:07:11.660
É um lugar perfeito pra alguns tipos de
objeto e algumas heranças.
00:07:11.844 --> 00:07:15.360
Mas eu aposto que você pode pensar em
uma tonelada de outros jeitos também.
00:07:15.360 --> 00:07:17.000
Legendado por [Alberto Oliveira]
Revisado por [Fernando dos Reis]