WEBVTT

00:00:01.012 --> 00:00:05.499
Agora que já sabe o básico de JavaScript,
quero ensinar um uso interessante dele.

00:00:05.629 --> 00:00:09.546
Algo que chamamos de 
"programação orientada a objetos"

00:00:09.546 --> 00:00:12.570
Mas primeiro precisamos 
entender porque isso é útil.

00:00:12.570 --> 00:00:17.089
Pensei em um programa que faça sentido
o uso da Orientação a Objetos.

00:00:17.479 --> 00:00:19.518
Agora, é bom um programa para se começar.

00:00:19.518 --> 00:00:24.031
No topo tenho duas variáveis que 
armazenam dados de um objeto.

00:00:25.021 --> 00:00:28.414
Agora, o objeto literal é um 
tipo de objeto que já vimos,

00:00:28.414 --> 00:00:30.448
que criamos com duas chaves

00:00:30.448 --> 00:00:33.419
e colocamos todos os nomes e valores
dessas propriedades dentro.

00:00:34.259 --> 00:00:39.071
Então temos duas dessas variáveis objetos,
e embaixo temos essa função <i>drawWinston</i>

00:00:39.071 --> 00:00:41.129
que recebe um único argumento,

00:00:41.129 --> 00:00:47.842
e então desenha uma imagem baseada 
nas propriedades x e y dos objetos.

00:00:47.842 --> 00:00:52.447
e um título de acordo com as 
propriedades apelido e idade do objeto.

00:00:52.747 --> 00:00:57.624
E agora embaixo finalmente, chamamos
<i>drawWinston()</i> no adolescente e no adulto,

00:00:58.054 --> 00:01:00.382
e isso é o que faz isso aparecer.

00:01:02.562 --> 00:01:10.956
Agora, se vamos aqui, e olharmos para
esses objetos, veja que eles são parecidos

00:01:10.988 --> 00:01:13.840
Ambos tem as mesmas propriedades,

00:01:13.850 --> 00:01:17.337
e ambos podem ser usados para 
chamar a função "drawWinston()."

00:01:17.787 --> 00:01:19.564
Na verdade, se você para pra pensar,

00:01:19.624 --> 00:01:24.072
ambos estão descrevendo 
um tipo Winston, certo?

00:01:24.072 --> 00:01:28.074
E podemos imaginar que talvez exista 
esse tipo abstrato de Winston no mundo.

00:01:28.074 --> 00:01:31.336
e todo Winston tem os 
mesmos tipos de propriedades,

00:01:31.336 --> 00:01:35.950
como apelido, idade, x e y.

00:01:36.260 --> 00:01:41.898
E aqui o que fizemos foi criar 
duas instâncias de Winston

00:01:41.898 --> 00:01:44.506
para descrever um tipo único de Winston,

00:01:44.506 --> 00:01:48.255
um é Winston adolescente e este um adulto.

00:01:48.255 --> 00:01:54.381
Eles são realmente bem parecidos, e sabe,
há muitas coisas similares entre eles.

00:01:54.551 --> 00:01:57.437
Se você pensar nisso, há muito do modo
como o mundo funciona também

00:01:57.437 --> 00:02:00.867
por isso temos esses tipos de objetos 
abstratos como humanos e pessoas.

00:02:00.867 --> 00:02:03.057
e então somos apenas 
instâncias específicas

00:02:03.057 --> 00:02:05.564
de objetos com nossas pequenas
propriedades próprias.

00:02:05.754 --> 00:02:09.931
Podemos usar técnicas 
de orientação a objeto em JavaScript

00:02:09.931 --> 00:02:14.088
para essas variáveis do Winston

00:02:14.868 --> 00:02:17.805
são instâncias formais do objeto Winston,

00:02:17.805 --> 00:02:21.194
eles sabem que eles 
compartilham essas propriedades.

00:02:21.683 --> 00:02:27.314
Pra isso, a primeira coisa que fazemos
é descrever este tipo abstrato de Winston.

00:02:27.844 --> 00:02:30.497
E faremos isso com uma variável

00:02:30.737 --> 00:02:32.420
Você armazenará o tipo em uma variável.

00:02:32.440 --> 00:02:38.444
Então var Winston, usaremos W, pois sempre
iniciamos nosso objetos com maiúsculo

00:02:38.824 --> 00:02:41.136
e vamos configurá-lo como uma função.

00:02:42.116 --> 00:02:46.350
E essa função é um tipo especial que 
chamamos de "construtor da função"

00:02:46.990 --> 00:02:51.742
pois é isso o que será executado toda vez
que criarmos uma nova instância do Winston

00:02:51.962 --> 00:02:57.400
Se quisermos criar um Winston adolescente
ou adulto, chamaremos essa função.

00:02:57.400 --> 00:03:03.238
Significa que essa função deverá receber
qualquer argumento que precise saber,

00:03:03.238 --> 00:03:06.387
afim de criar um Winston completo.

00:03:06.387 --> 00:03:10.624
Nesse caso, precisa saber 
o apelido, idade, x e y.

00:03:11.264 --> 00:03:15.063
Agora, uma vez que recebemos esses 
argumentos precisamos fazer algo com eles,

00:03:15.063 --> 00:03:21.069
Precisamos na verdade associar 
a informação ao objeto Winston.

00:03:21.069 --> 00:03:24.655
Usaremos uma nova 
palavra chave, chamada <i>this</i>.

00:03:25.325 --> 00:03:28.632
E <i>this</i> se refere a 
instância atual do objeto.

00:03:28.632 --> 00:03:34.611
Então, <i>this.nickname</i>, a propriedade 
nickname do objeto é igual a

00:03:34.861 --> 00:03:38.199
o que for passado para 
o construtor da função, ok?

00:03:38.419 --> 00:03:44.688
E <i>this.age</i> é igual idade que é 
passada, <i>this.x</i> é igual ao x e <i>this.y</i>

00:03:45.728 --> 00:03:47.672
igual ao y da entrada.

00:03:48.282 --> 00:03:52.826
Muito bem, agora temos este 
tipo abstrato chamado Winston,

00:03:53.096 --> 00:03:56.790
e tem o construtor da função que 
usamos para criar o novo Winston.

00:03:57.340 --> 00:03:59.185
Vamos tentar usá-lo.

00:04:00.165 --> 00:04:02.010
Criaremos o Winston adolescente novamente

00:04:02.090 --> 00:04:05.245
mas dessa vez 
faremos <i>winstonTeen</i>, igual,

00:04:05.245 --> 00:04:10.376
e ao invés de chaves, 
usaremos igual <i>newWinston</i>.

00:04:10.376 --> 00:04:13.790
Estamos dizendo "Queremos criar 
uma nova instância do tipo Winston"

00:04:13.790 --> 00:04:21.105
e então passaremos a informação 
necessária, "Winsteen", 15, 20, 50.

00:04:22.175 --> 00:04:25.652
E então podemos deletar esse antigo, 
porque não precisamos mais.

00:04:27.362 --> 00:04:30.202
E agora está criado o novo Winsteen.

00:04:31.052 --> 00:04:34.942
E agora podemos fazer 
<i>winstonAdult = new Winston()</i>

00:04:35.422 --> 00:04:39.101
e é claro o nome dele é 
"Mr. Winst-a-lot", bom nome,

00:04:39.721 --> 00:04:43.320
e ele tem 30 anos, e a posição é 229 e 50.

00:04:43.750 --> 00:04:46.580
Tudo bem? E então 
podemos deletar esse objeto.

00:04:47.280 --> 00:04:50.744
E, nosso código ainda funciona.

00:04:50.884 --> 00:04:52.948
O que fizemos aqui foi o que
eu disse certo,

00:04:52.948 --> 00:04:57.754
há esse, e esse tipo de dado 
abstrato que são um Winston

00:04:57.754 --> 00:05:04.262
e podemos criar novas instâncias que tem
essas propriedades deles que são únicas.

00:05:05.152 --> 00:05:08.179
E apenas lembraremos 
das propriedades dentro deles

00:05:08.799 --> 00:05:14.299
Lembrar é muito importante. Você sabe que
aqui dentro temos this.nickname, this.age.

00:05:14.299 --> 00:05:19.832
Se acidentalmente, não tiver essa idade, 
perceba que agora diz, "undifined"

00:05:20.172 --> 00:05:22.913
É porque lá embaixo,
essa função drawWinston,

00:05:22.913 --> 00:05:27.972
aguarda todos os objetos serem 
informados, inclusive "age" (idade).

00:05:28.162 --> 00:05:30.324
E se não colocarmos <i>this.age</i>,

00:05:30.664 --> 00:05:33.543
Não terá uma propriedade "age", certo? 
Passamos para o construtor da função

00:05:33.543 --> 00:05:35.132
Mas não fizemos nada com isso,

00:05:35.132 --> 00:05:38.873
temos que incluir isto no objeto 
usando a palavra chave <i>this</i>

00:05:39.133 --> 00:05:40.432
Vamos adicionar novamente.

00:05:41.022 --> 00:05:42.521
Agora,você deve estar pensando,

00:05:42.521 --> 00:05:46.361
Ok, você tem o um código que funciona
e está fazendo essas mudanças.

00:05:46.361 --> 00:05:50.542
Mas, sabe, o que 
fizemos já foi feito antes.

00:05:50.542 --> 00:05:51.873
Mas aqui está a parte legal.

00:05:51.873 --> 00:05:55.746
Agora, todo o nosso Winston 
usa o mesmo construtor.

00:05:55.816 --> 00:06:00.467
Se quisermos, podemos 
mudar propriedades do Winston.

00:06:00.717 --> 00:06:02.478
Todos os Winstons, aqui dentro.

00:06:02.478 --> 00:06:05.830
Talvez "age" (idade), talvez 
queiramos mudar para "years old" (anos).

00:06:05.920 --> 00:06:07.282
Podemos mudar apenas aqui,

00:06:07.372 --> 00:06:12.545
e agora em todos os nossos Winstons ficará
"15 years old", "30 years old", certo?

00:06:12.545 --> 00:06:14.618
Eles estão pegando a parte que
é única deles

00:06:14.618 --> 00:06:16.961
mas também está usando coisas que são
compartilhadas entre eles.

00:06:16.961 --> 00:06:19.481
Isso é a parte legal da programação
orientada a objeto

00:06:19.481 --> 00:06:22.721
essa ideia que há esses 
tipos de objetos no mundo,

00:06:22.721 --> 00:06:26.022
e você pode criar novas 
instâncias desses objetos.

00:06:26.022 --> 00:06:29.190
Há coisas que são parecidas neles, como a
mesma propriedade,

00:06:29.190 --> 00:06:31.078
e há coisas que são diferentes como,

00:06:31.078 --> 00:06:35.028
essa propriedade na verdade tem um valor
diferente dessa outra propriedade, certo?

00:06:35.118 --> 00:06:39.688
Então, podemos ter o mesmo comportamento,
como chamar as mesmas funções.

00:06:40.538 --> 00:06:42.758
e então usá-las de modo parecido.

00:06:43.108 --> 00:06:46.069
Essa é uma das coisas legais em
programação orientada a objeto.

00:06:46.069 --> 00:06:48.344
mas como você verá, há mais coisas.

00:06:48.344 --> 00:06:49.810
Então, fique ligado!

00:06:49.810 --> 00:06:51.000
Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]