[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.90,0:00:03.52,Default,,0000,0000,0000,,Estamos de volta com nosso\Nprograma que cria Winstons Dialogue: 0,0:00:03.52,0:00:07.33,Default,,0000,0000,0000,,mas eu adicionei um novo tipo de objeto\NHopper porque Hopper estava se sentindo Dialogue: 0,0:00:07.33,0:00:08.67,Default,,0000,0000,0000,,um pouco deixado de lado. Dialogue: 0,0:00:08.67,0:00:11.76,Default,,0000,0000,0000,,Eu defino Hopper do mesmo\Njeito que eu defino Winston, Dialogue: 0,0:00:11.76,0:00:15.92,Default,,0000,0000,0000,,começando pelo construtor e recebendo\Nas mesmas propriedades e então {\i1}draw{\i0} Dialogue: 0,0:00:15.92,0:00:21.01,Default,,0000,0000,0000,,e {\i1}talk{\i0} e eu também adicionei\Noutro método chamado {\i1}Horray{\i0} Dialogue: 0,0:00:21.01,0:00:24.51,Default,,0000,0000,0000,,porque Hoppers realmente gostam de\Ncomemorar e Winstons não mesmo. Dialogue: 0,0:00:25.33,0:00:31.16,Default,,0000,0000,0000,,No final da função, eu criei dois novos\Nobjetos Hopper: {\i1}lilHopper{\i0} e {\i1}bigHopper{\i0} Dialogue: 0,0:00:31.16,0:00:35.35,Default,,0000,0000,0000,,e chamei {\i1}draw{\i0} nos dois e {\i1}talk{\i0}\Nem um e {\i1}Horray{\i0} no outro. Dialogue: 0,0:00:36.17,0:00:37.62,Default,,0000,0000,0000,,Está bem arrumado. Dialogue: 0,0:00:37.62,0:00:40.13,Default,,0000,0000,0000,,Agora, se olharmos esse\Ncódigo aqui em cima, Dialogue: 0,0:00:40.13,0:00:42.80,Default,,0000,0000,0000,,você talvez note algo interessante. Dialogue: 0,0:00:42.86,0:00:47.13,Default,,0000,0000,0000,,O código do Hopper é muito similar\Nao código do Winston. Dialogue: 0,0:00:47.13,0:00:49.17,Default,,0000,0000,0000,,Particularmente, veja seu construtor. Dialogue: 0,0:00:49.17,0:00:54.60,Default,,0000,0000,0000,,Não sei se você se lembra mas é exatamente\No mesmo código do construtor de Winston. Dialogue: 0,0:00:54.76,0:01:00.38,Default,,0000,0000,0000,,E essa função {\i1}talk{\i0} é também exatamente\No mesmo código da função {\i1}talk{\i0} do Winston. Dialogue: 0,0:01:01.12,0:01:03.90,Default,,0000,0000,0000,,E ambos possuem a função {\i1}draw{\i0}. Dialogue: 0,0:01:03.90,0:01:08.18,Default,,0000,0000,0000,,Então há muito em comum entre esses\Ndois tipos de objetos e isso faz sentido Dialogue: 0,0:01:08.18,0:01:12.27,Default,,0000,0000,0000,,porque você sabe que Hopper e Winston\Nsão dois tipos muito similares de objeto. Dialogue: 0,0:01:12.27,0:01:16.99,Default,,0000,0000,0000,,E, se você pensar sobre o \Nmundo real fora do computador, Dialogue: 0,0:01:16.99,0:01:20.77,Default,,0000,0000,0000,,a maioria dos objetos compartilha\Nsimilaridades com outros tipos de objeto. Dialogue: 0,0:01:20.77,0:01:25.21,Default,,0000,0000,0000,,Como no reino animal, todos os animais\Nsão similares de alguma forma. Dialogue: 0,0:01:25.21,0:01:28.37,Default,,0000,0000,0000,,E temos diferentes tipos de \Nanimais como os humanos. Dialogue: 0,0:01:28.37,0:01:34.36,Default,,0000,0000,0000,,E humanos compartilham dessas semelhanças\Nmas também tem suas próprias propriedades. Dialogue: 0,0:01:34.36,0:01:37.91,Default,,0000,0000,0000,,Então podemos dizer que animal\Né um tipo de objeto Dialogue: 0,0:01:37.91,0:01:41.56,Default,,0000,0000,0000,,de que o tipo de objeto humano\Nherda funcionalidades. Dialogue: 0,0:01:41.56,0:01:43.34,Default,,0000,0000,0000,,Não começamos completamente do zero, Dialogue: 0,0:01:43.34,0:01:46.95,Default,,0000,0000,0000,,adicionamos funcionalidades por cima das\Nque temos por ser um tipo de animal. Dialogue: 0,0:01:46.95,0:01:51.32,Default,,0000,0000,0000,,Como todos os animais fazem sons,\Nmas humanos também fazem a linguagem. Dialogue: 0,0:01:51.88,0:01:56.36,Default,,0000,0000,0000,,Então esse conceito de herança de objetos\Né realmente útil na programação também. Dialogue: 0,0:01:56.36,0:02:00.10,Default,,0000,0000,0000,,E nós podemos criar uma cadeia de herança\Nde objetos em nosso Javascript. Dialogue: 0,0:02:00.10,0:02:02.30,Default,,0000,0000,0000,,Então pra fazer isso nós precisamos pensar Dialogue: 0,0:02:02.30,0:02:05.04,Default,,0000,0000,0000,,sobre o que é compartilhada\Npor nossos tipos de objeto. Dialogue: 0,0:02:05.04,0:02:06.63,Default,,0000,0000,0000,,E inventar um nome pra isso. Dialogue: 0,0:02:06.63,0:02:10.68,Default,,0000,0000,0000,,Porque vamos criar um novo tipo de objeto\Nque represente o objeto base. Dialogue: 0,0:02:10.68,0:02:12.22,Default,,0000,0000,0000,,Vamos chamá-los de criaturas. Dialogue: 0,0:02:12.22,0:02:13.78,Default,,0000,0000,0000,,Ambos são criaturas. Dialogue: 0,0:02:13.78,0:02:17.95,Default,,0000,0000,0000,,Então dizemos {\i1}var{\i0}{\i1}Creature{\i0} é igual a...\NE agora precisamos da função construtora. Dialogue: 0,0:02:17.95,0:02:22.60,Default,,0000,0000,0000,,Então vamos pegar do Hopper já \Nque é a mesma que Winston tem. Dialogue: 0,0:02:22.60,0:02:23.60,Default,,0000,0000,0000,,Certo. Dialogue: 0,0:02:23.60,0:02:26.53,Default,,0000,0000,0000,,E então... Vamos ver. Dialogue: 0,0:02:26.53,0:02:29.34,Default,,0000,0000,0000,,Agora nós queremos...\NO que queremos fazer em sequência? Dialogue: 0,0:02:29.34,0:02:32.41,Default,,0000,0000,0000,,Talvez queiramos adicionar a função {\i1}talk{\i0}. Dialogue: 0,0:02:33.52,0:02:36.02,Default,,0000,0000,0000,,A função {\i1}talk{\i0} apenas pegamos do Hopper.\N Dialogue: 0,0:02:36.02,0:02:39.38,Default,,0000,0000,0000,,Mas, é claro, precisamos dela\Nno protótipo de criatura. Dialogue: 0,0:02:41.27,0:02:45.62,Default,,0000,0000,0000,,Então agora temos esse\Ntipo de objeto {\i1}Creature{\i0} Dialogue: 0,0:02:45.62,0:02:48.09,Default,,0000,0000,0000,,Mas precisamos dizer a Hopper Dialogue: 0,0:02:48.09,0:02:52.72,Default,,0000,0000,0000,,que Hopper deveria basear sua\Nfuncionalidade em {\i1}Creature{\i0}. Dialogue: 0,0:02:52.72,0:02:56.06,Default,,0000,0000,0000,,Podemos fazer isso\Nescrevendo esta linha aqui. Dialogue: 0,0:02:56.06,0:03:04.100,Default,,0000,0000,0000,,Vamos dizer Hopper.{\i1}prototype{\i0} é igual a\N{\i1}Object.create(Creature.prototype){\i0} Dialogue: 0,0:03:04.100,0:03:09.80,Default,,0000,0000,0000,,Essa linha diz ao Javascript para basear\No protótipo do Hopper, ou seja, Dialogue: 0,0:03:09.80,0:03:14.63,Default,,0000,0000,0000,,basear toda a funcionalidade do Hopper\Nsobre o protótipo de criatura. Dialogue: 0,0:03:14.63,0:03:20.15,Default,,0000,0000,0000,,Isso significa que toda vez que ele\Nprocurar uma função em um Hopper, Dialogue: 0,0:03:20.15,0:03:22.77,Default,,0000,0000,0000,,procurará no protótipo de Hopper primeiro, Dialogue: 0,0:03:22.77,0:03:27.15,Default,,0000,0000,0000,,mas se não achar o que está procurando,\Nvai procurar no protótipo de criatura. Dialogue: 0,0:03:27.15,0:03:30.05,Default,,0000,0000,0000,,E isso é o que chamamos\Nde cadeia de protótipos. Dialogue: 0,0:03:30.05,0:03:35.30,Default,,0000,0000,0000,,Um vez que já fizemos isso, poderíamos\Ndeletar a função {\i1}talk{\i0} do Hopper. Dialogue: 0,0:03:35.30,0:03:38.95,Default,,0000,0000,0000,,Porque ela já existe em criatura\Nque está acima na cadeia de protótipos. Dialogue: 0,0:03:38.95,0:03:40.13,Default,,0000,0000,0000,,Então vamos testar. Dialogue: 0,0:03:41.82,0:03:42.78,Default,,0000,0000,0000,,Funciona! Dialogue: 0,0:03:42.78,0:03:47.28,Default,,0000,0000,0000,,E funciona porque a acha\Nno protótipo de criatura. Dialogue: 0,0:03:48.83,0:03:51.89,Default,,0000,0000,0000,,Vamos tentar deletar do Winston também. Dialogue: 0,0:03:54.32,0:03:57.92,Default,,0000,0000,0000,,Não funcionou, aqui diz que o objeto\Nnão tem o método {\i1}talk{\i0}. Dialogue: 0,0:03:57.92,0:04:01.61,Default,,0000,0000,0000,,E por que isso? Bem, nós temos o\Nconstrutor de Winston e a função {\i1}draw{\i0} Dialogue: 0,0:04:01.61,0:04:02.92,Default,,0000,0000,0000,,e tiramos a função {\i1}talk{\i0}. Dialogue: 0,0:04:02.92,0:04:06.44,Default,,0000,0000,0000,,Pode-se notar que esquecemos de dizer\Nna verdade que o protótipo de Winston Dialogue: 0,0:04:06.44,0:04:10.35,Default,,0000,0000,0000,,deve se basear no protótipo de criatura.\NPrecisamos daquela linha muito importante. Dialogue: 0,0:04:10.35,0:04:15.56,Default,,0000,0000,0000,,Winston{\i1}.prototype = \NObject.create(Creature.prototype){\i0} Dialogue: 0,0:04:19.00,0:04:20.43,Default,,0000,0000,0000,,E repare num ponto importante. Dialogue: 0,0:04:20.43,0:04:24.98,Default,,0000,0000,0000,,Eu tenho essa linha depois da função do\Nconstrutor mas antes de adicionar qualquer Dialogue: 0,0:04:24.98,0:04:28.61,Default,,0000,0000,0000,,outra coisa ao protótipo do Winston.\NIsso é o que você geralmente quer fazer. Dialogue: 0,0:04:28.61,0:04:31.23,Default,,0000,0000,0000,,Você quer dizer que assim\Nque você estiver começando, Dialogue: 0,0:04:31.23,0:04:34.05,Default,,0000,0000,0000,,é nisso que seu protótipo\Ninicial vai ser baseado. Dialogue: 0,0:04:34.05,0:04:37.12,Default,,0000,0000,0000,,Mas então podemos continuar \Nadicionando coisas ao seu protótipo. Dialogue: 0,0:04:37.12,0:04:41.47,Default,,0000,0000,0000,,Porque pode haver algo que é único aos\NWinstons ou único aos Hoppers Dialogue: 0,0:04:41.47,0:04:43.01,Default,,0000,0000,0000,,que outras criatura não tem. Dialogue: 0,0:04:43.01,0:04:45.76,Default,,0000,0000,0000,,E isso não tem problema,\Nvocê pode definir essas coisas. Dialogue: 0,0:04:46.48,0:04:49.98,Default,,0000,0000,0000,,Agora, se olharmos, ainda temos\Nalgumas partes de código repetidas. Dialogue: 0,0:04:49.98,0:04:51.52,Default,,0000,0000,0000,,O código do construtor. Dialogue: 0,0:04:51.52,0:04:53.37,Default,,0000,0000,0000,,Temos ele todas as três vezes. Dialogue: 0,0:04:53.37,0:04:56.64,Default,,0000,0000,0000,,Então poderíamos\Napenas deletá-lo? Dialogue: 0,0:04:57.92,0:04:59.41,Default,,0000,0000,0000,,Vamos tentar. Dialogue: 0,0:05:00.87,0:05:03.44,Default,,0000,0000,0000,,Não parece que isso funcionou. Dialogue: 0,0:05:03.44,0:05:07.50,Default,,0000,0000,0000,,Porque nosso Hopper aparecer lá em cima no\Ncanto esquerdo e esqueceu tudo sobre si. Dialogue: 0,0:05:07.50,0:05:12.99,Default,,0000,0000,0000,,E isso é porque JavaScritpt não assume que\Nvocê quer o mesmo construtor mesmo que Dialogue: 0,0:05:12.99,0:05:15.86,Default,,0000,0000,0000,,você queira basear o protótipo nele. Dialogue: 0,0:05:16.02,0:05:19.49,Default,,0000,0000,0000,,Você sabe, você pode definir seu\Npróprio construtor para esses objetos. Dialogue: 0,0:05:19.49,0:05:26.04,Default,,0000,0000,0000,,Mas você também tem um jeito fácil de\Nchamar um construtor dentro de um objeto. Dialogue: 0,0:05:26.04,0:05:28.31,Default,,0000,0000,0000,,Então o jeito que podemos\Nfazer isso é escrevendo Dialogue: 0,0:05:28.31,0:05:35.47,Default,,0000,0000,0000,,{\i1}Creature.call(this, nickname, age, x, y){\i0} Dialogue: 0,0:05:36.40,0:05:39.53,Default,,0000,0000,0000,,O que isso faz, note que funcionou. Dialogue: 0,0:05:39.53,0:05:44.62,Default,,0000,0000,0000,,E o que isso fez foi realmente chamar a\Nfunção da criatura, a função construtora. Dialogue: 0,0:05:44.62,0:05:48.34,Default,,0000,0000,0000,,Está chamando essa função mas está\Nchamando e dizendo você deveria chamar Dialogue: 0,0:05:48.34,0:05:53.69,Default,,0000,0000,0000,,a função construtora como se ela estivesse\Nsendo chamada de um objeto Hopper. Dialogue: 0,0:05:53.69,0:05:56.93,Default,,0000,0000,0000,,E como se ela estivesse sendo\Nchamada com esses argumentos. Dialogue: 0,0:05:56.93,0:05:59.43,Default,,0000,0000,0000,,E esses são os argumentos com\Nque Hopper foi chamado. Dialogue: 0,0:05:59.83,0:06:03.68,Default,,0000,0000,0000,,E, no fim, o código vai ser executado\Ncomo se estivesse logo aqui. Dialogue: 0,0:06:03.68,0:06:06.58,Default,,0000,0000,0000,,E isso é exatamente o que\Nqueremos. E funcionou! Dialogue: 0,0:06:06.58,0:06:13.92,Default,,0000,0000,0000,,E podemos ir a frente e copiar essa linha\Ndentro do construtor do Winston também. Dialogue: 0,0:06:15.07,0:06:16.53,Default,,0000,0000,0000,,E funciona! Dialogue: 0,0:06:17.37,0:06:20.56,Default,,0000,0000,0000,,Então olhe aqui, encapsulamos todas as\Npropriedades compartilhadas e Dialogue: 0,0:06:20.56,0:06:24.57,Default,,0000,0000,0000,,funcionalidades dos nossos objetos em um\Núnico tipo de objeto base, criatura. Dialogue: 0,0:06:24.57,0:06:27.95,Default,,0000,0000,0000,,E fizemos dois tipos de objeto que\Nse estendem deste objeto base. Dialogue: 0,0:06:27.95,0:06:31.52,Default,,0000,0000,0000,,Eles herdam funcionalidades mas\Ntambém adicionam suas próprias. Dialogue: 0,0:06:31.72,0:06:33.40,Default,,0000,0000,0000,,E o mais legal sobre isso é que Dialogue: 0,0:06:33.40,0:06:36.44,Default,,0000,0000,0000,,podemos alterar a funcionalidade\Ncompartilhada em um único lugar. Dialogue: 0,0:06:36.44,0:06:38.82,Default,,0000,0000,0000,,Por exemplo, se quiséssemos \Nmudar a idade de novo, Dialogue: 0,0:06:38.82,0:06:41.11,Default,,0000,0000,0000,,poderíamos dizer: mais "anos de idade". Dialogue: 0,0:06:41.51,0:06:43.99,Default,,0000,0000,0000,,Agora todo mundo tem "anos de idade". Dialogue: 0,0:06:44.10,0:06:52.47,Default,,0000,0000,0000,,Ou poderíamos mudar a função {\i1}talk{\i0}. E agora\NWinstons e Hoppers estão dizendo "sup". Dialogue: 0,0:06:52.60,0:06:56.42,Default,,0000,0000,0000,,Então agora que você viu como criar tipos\Nde objeto e herdar de tipos de objetos, Dialogue: 0,0:06:56.42,0:06:58.17,Default,,0000,0000,0000,,você pode começar a pensar como isso\N Dialogue: 0,0:06:58.17,0:07:01.27,Default,,0000,0000,0000,,pode ser útil em nossos desenhos\Ne animações e simulações e jogos. Dialogue: 0,0:07:01.27,0:07:04.97,Default,,0000,0000,0000,,Por exemplo, talvez você tenha um jogo e\Ntenha vários tipos de personagens nele Dialogue: 0,0:07:04.97,0:07:07.66,Default,,0000,0000,0000,,e todos eles podem correr mas\Nsomente alguns podem pular. Dialogue: 0,0:07:07.66,0:07:11.66,Default,,0000,0000,0000,,É um lugar perfeito pra alguns tipos de\Nobjeto e algumas heranças. Dialogue: 0,0:07:11.84,0:07:15.36,Default,,0000,0000,0000,,Mas eu aposto que você pode pensar em\Numa tonelada de outros jeitos também. Dialogue: 0,0:07:15.36,0:07:17.00,Default,,0000,0000,0000,,Legendado por [Alberto Oliveira]\NRevisado por [Fernando dos Reis]