1
00:00:01,012 --> 00:00:05,499
Agora que já sabe o básico de JavaScript,
quero ensinar um uso interessante dele.
2
00:00:05,629 --> 00:00:09,546
Algo que chamamos de
"programação orientada a objetos"
3
00:00:09,546 --> 00:00:12,570
Mas primeiro precisamos
entender porque isso é útil.
4
00:00:12,570 --> 00:00:17,089
Pensei em um programa que faça sentido
o uso da Orientação a Objetos.
5
00:00:17,479 --> 00:00:19,518
Agora, é bom um programa para se começar.
6
00:00:19,518 --> 00:00:24,031
No topo tenho duas variáveis que
armazenam dados de um objeto.
7
00:00:25,021 --> 00:00:28,414
Agora, o objeto literal é um
tipo de objeto que já vimos,
8
00:00:28,414 --> 00:00:30,448
que criamos com duas chaves
9
00:00:30,448 --> 00:00:33,419
e colocamos todos os nomes e valores
dessas propriedades dentro.
10
00:00:34,259 --> 00:00:39,071
Então temos duas dessas variáveis objetos,
e embaixo temos essa função drawWinston
11
00:00:39,071 --> 00:00:41,129
que recebe um único argumento,
12
00:00:41,129 --> 00:00:47,842
e então desenha uma imagem baseada
nas propriedades x e y dos objetos.
13
00:00:47,842 --> 00:00:52,447
e um título de acordo com as
propriedades apelido e idade do objeto.
14
00:00:52,747 --> 00:00:57,624
E agora embaixo finalmente, chamamos
drawWinston() no adolescente e no adulto,
15
00:00:58,054 --> 00:01:00,382
e isso é o que faz isso aparecer.
16
00:01:02,562 --> 00:01:10,956
Agora, se vamos aqui, e olharmos para
esses objetos, veja que eles são parecidos
17
00:01:10,988 --> 00:01:13,840
Ambos tem as mesmas propriedades,
18
00:01:13,850 --> 00:01:17,337
e ambos podem ser usados para
chamar a função "drawWinston()."
19
00:01:17,787 --> 00:01:19,564
Na verdade, se você para pra pensar,
20
00:01:19,624 --> 00:01:24,072
ambos estão descrevendo
um tipo Winston, certo?
21
00:01:24,072 --> 00:01:28,074
E podemos imaginar que talvez exista
esse tipo abstrato de Winston no mundo.
22
00:01:28,074 --> 00:01:31,336
e todo Winston tem os
mesmos tipos de propriedades,
23
00:01:31,336 --> 00:01:35,950
como apelido, idade, x e y.
24
00:01:36,260 --> 00:01:41,898
E aqui o que fizemos foi criar
duas instâncias de Winston
25
00:01:41,898 --> 00:01:44,506
para descrever um tipo único de Winston,
26
00:01:44,506 --> 00:01:48,255
um é Winston adolescente e este um adulto.
27
00:01:48,255 --> 00:01:54,381
Eles são realmente bem parecidos, e sabe,
há muitas coisas similares entre eles.
28
00:01:54,551 --> 00:01:57,437
Se você pensar nisso, há muito do modo
como o mundo funciona também
29
00:01:57,437 --> 00:02:00,867
por isso temos esses tipos de objetos
abstratos como humanos e pessoas.
30
00:02:00,867 --> 00:02:03,057
e então somos apenas
instâncias específicas
31
00:02:03,057 --> 00:02:05,564
de objetos com nossas pequenas
propriedades próprias.
32
00:02:05,754 --> 00:02:09,931
Podemos usar técnicas
de orientação a objeto em JavaScript
33
00:02:09,931 --> 00:02:14,088
para essas variáveis do Winston
34
00:02:14,868 --> 00:02:17,805
são instâncias formais do objeto Winston,
35
00:02:17,805 --> 00:02:21,194
eles sabem que eles
compartilham essas propriedades.
36
00:02:21,683 --> 00:02:27,314
Pra isso, a primeira coisa que fazemos
é descrever este tipo abstrato de Winston.
37
00:02:27,844 --> 00:02:30,497
E faremos isso com uma variável
38
00:02:30,737 --> 00:02:32,420
Você armazenará o tipo em uma variável.
39
00:02:32,440 --> 00:02:38,444
Então var Winston, usaremos W, pois sempre
iniciamos nosso objetos com maiúsculo
40
00:02:38,824 --> 00:02:41,136
e vamos configurá-lo como uma função.
41
00:02:42,116 --> 00:02:46,350
E essa função é um tipo especial que
chamamos de "construtor da função"
42
00:02:46,990 --> 00:02:51,742
pois é isso o que será executado toda vez
que criarmos uma nova instância do Winston
43
00:02:51,962 --> 00:02:57,400
Se quisermos criar um Winston adolescente
ou adulto, chamaremos essa função.
44
00:02:57,400 --> 00:03:03,238
Significa que essa função deverá receber
qualquer argumento que precise saber,
45
00:03:03,238 --> 00:03:06,387
afim de criar um Winston completo.
46
00:03:06,387 --> 00:03:10,624
Nesse caso, precisa saber
o apelido, idade, x e y.
47
00:03:11,264 --> 00:03:15,063
Agora, uma vez que recebemos esses
argumentos precisamos fazer algo com eles,
48
00:03:15,063 --> 00:03:21,069
Precisamos na verdade associar
a informação ao objeto Winston.
49
00:03:21,069 --> 00:03:24,655
Usaremos uma nova
palavra chave, chamada this.
50
00:03:25,325 --> 00:03:28,632
E this se refere a
instância atual do objeto.
51
00:03:28,632 --> 00:03:34,611
Então, this.nickname, a propriedade
nickname do objeto é igual a
52
00:03:34,861 --> 00:03:38,199
o que for passado para
o construtor da função, ok?
53
00:03:38,419 --> 00:03:44,688
E this.age é igual idade que é
passada, this.x é igual ao x e this.y
54
00:03:45,728 --> 00:03:47,672
igual ao y da entrada.
55
00:03:48,282 --> 00:03:52,826
Muito bem, agora temos este
tipo abstrato chamado Winston,
56
00:03:53,096 --> 00:03:56,790
e tem o construtor da função que
usamos para criar o novo Winston.
57
00:03:57,340 --> 00:03:59,185
Vamos tentar usá-lo.
58
00:04:00,165 --> 00:04:02,010
Criaremos o Winston adolescente novamente
59
00:04:02,090 --> 00:04:05,245
mas dessa vez
faremos winstonTeen, igual,
60
00:04:05,245 --> 00:04:10,376
e ao invés de chaves,
usaremos igual newWinston.
61
00:04:10,376 --> 00:04:13,790
Estamos dizendo "Queremos criar
uma nova instância do tipo Winston"
62
00:04:13,790 --> 00:04:21,105
e então passaremos a informação
necessária, "Winsteen", 15, 20, 50.
63
00:04:22,175 --> 00:04:25,652
E então podemos deletar esse antigo,
porque não precisamos mais.
64
00:04:27,362 --> 00:04:30,202
E agora está criado o novo Winsteen.
65
00:04:31,052 --> 00:04:34,942
E agora podemos fazer
winstonAdult = new Winston()
66
00:04:35,422 --> 00:04:39,101
e é claro o nome dele é
"Mr. Winst-a-lot", bom nome,
67
00:04:39,721 --> 00:04:43,320
e ele tem 30 anos, e a posição é 229 e 50.
68
00:04:43,750 --> 00:04:46,580
Tudo bem? E então
podemos deletar esse objeto.
69
00:04:47,280 --> 00:04:50,744
E, nosso código ainda funciona.
70
00:04:50,884 --> 00:04:52,948
O que fizemos aqui foi o que
eu disse certo,
71
00:04:52,948 --> 00:04:57,754
há esse, e esse tipo de dado
abstrato que são um Winston
72
00:04:57,754 --> 00:05:04,262
e podemos criar novas instâncias que tem
essas propriedades deles que são únicas.
73
00:05:05,152 --> 00:05:08,179
E apenas lembraremos
das propriedades dentro deles
74
00:05:08,799 --> 00:05:14,299
Lembrar é muito importante. Você sabe que
aqui dentro temos this.nickname, this.age.
75
00:05:14,299 --> 00:05:19,832
Se acidentalmente, não tiver essa idade,
perceba que agora diz, "undifined"
76
00:05:20,172 --> 00:05:22,913
É porque lá embaixo,
essa função drawWinston,
77
00:05:22,913 --> 00:05:27,972
aguarda todos os objetos serem
informados, inclusive "age" (idade).
78
00:05:28,162 --> 00:05:30,324
E se não colocarmos this.age,
79
00:05:30,664 --> 00:05:33,543
Não terá uma propriedade "age", certo?
Passamos para o construtor da função
80
00:05:33,543 --> 00:05:35,132
Mas não fizemos nada com isso,
81
00:05:35,132 --> 00:05:38,873
temos que incluir isto no objeto
usando a palavra chave this
82
00:05:39,133 --> 00:05:40,432
Vamos adicionar novamente.
83
00:05:41,022 --> 00:05:42,521
Agora,você deve estar pensando,
84
00:05:42,521 --> 00:05:46,361
Ok, você tem o um código que funciona
e está fazendo essas mudanças.
85
00:05:46,361 --> 00:05:50,542
Mas, sabe, o que
fizemos já foi feito antes.
86
00:05:50,542 --> 00:05:51,873
Mas aqui está a parte legal.
87
00:05:51,873 --> 00:05:55,746
Agora, todo o nosso Winston
usa o mesmo construtor.
88
00:05:55,816 --> 00:06:00,467
Se quisermos, podemos
mudar propriedades do Winston.
89
00:06:00,717 --> 00:06:02,478
Todos os Winstons, aqui dentro.
90
00:06:02,478 --> 00:06:05,830
Talvez "age" (idade), talvez
queiramos mudar para "years old" (anos).
91
00:06:05,920 --> 00:06:07,282
Podemos mudar apenas aqui,
92
00:06:07,372 --> 00:06:12,545
e agora em todos os nossos Winstons ficará
"15 years old", "30 years old", certo?
93
00:06:12,545 --> 00:06:14,618
Eles estão pegando a parte que
é única deles
94
00:06:14,618 --> 00:06:16,961
mas também está usando coisas que são
compartilhadas entre eles.
95
00:06:16,961 --> 00:06:19,481
Isso é a parte legal da programação
orientada a objeto
96
00:06:19,481 --> 00:06:22,721
essa ideia que há esses
tipos de objetos no mundo,
97
00:06:22,721 --> 00:06:26,022
e você pode criar novas
instâncias desses objetos.
98
00:06:26,022 --> 00:06:29,190
Há coisas que são parecidas neles, como a
mesma propriedade,
99
00:06:29,190 --> 00:06:31,078
e há coisas que são diferentes como,
100
00:06:31,078 --> 00:06:35,028
essa propriedade na verdade tem um valor
diferente dessa outra propriedade, certo?
101
00:06:35,118 --> 00:06:39,688
Então, podemos ter o mesmo comportamento,
como chamar as mesmas funções.
102
00:06:40,538 --> 00:06:42,758
e então usá-las de modo parecido.
103
00:06:43,108 --> 00:06:46,069
Essa é uma das coisas legais em
programação orientada a objeto.
104
00:06:46,069 --> 00:06:48,344
mas como você verá, há mais coisas.
105
00:06:48,344 --> 00:06:49,810
Então, fique ligado!
106
00:06:49,810 --> 00:06:51,000
Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]