1
00:00:01,342 --> 00:00:05,959
Ahora que entiendes los fundamentos de Javascript, quiero enseñarte una forma genial de usar Javascript.

2
00:00:05,959 --> 00:00:09,546
Algo que llamamos "Programación orientada a objetos"

3
00:00:09,546 --> 00:00:12,570
Pero primero debemos entender por qué es realmente útil.

4
00:00:12,570 --> 00:00:17,668
Así que puse aquí un programa que estará mejorado una vez que lo hagamos más orientado a objeto.

5
00:00:17,668 --> 00:00:25,138
Ahora, éste es un buen programa para empezar. En la parte superior, tenemos dos variables que almacenan literales de objeto.

6
00:00:25,138 --> 00:00:30,448
Ahora, los literales de objeto son un tipo de objetos que aprendimos antes y que creamos con dos llaves ({}),

7
00:00:30,448 --> 00:00:34,409
y dentro de las cuales ponemos la información de los nombres y valores de las propiedades.

8
00:00:34,409 --> 00:00:39,241
Así que aquí tenemos dos de esas variables literales de objeto, y aquí abajo tenemos esta función "drawWinston",

9
00:00:39,241 --> 00:00:41,129
que espera recibir un argumento simple,

10
00:00:41,129 --> 00:00:47,882
y después dibuja el argumento, dibuja una imagen basada en la "x" y "y" que son propiedades del objeto,

11
00:00:47,882 --> 00:00:53,107
y luego un título basado en el sobrenombre y la edad que son propiedades del objeto.

12
00:00:53,107 --> 00:00:58,164
Y finalmente hasta abajo, llamamos la fución "drawWinston()" para el adolescente y para el adulto,

13
00:00:58,164 --> 00:01:01,012
que es lo que hace que se muestren.

14
00:01:01,012 --> 00:01:06,366
Muy bien. Ahora si vamos de este lado y vemos estas literales de objeto,

15
00:01:06,366 --> 00:01:11,410
fíjense que se ven muy similares.

16
00:01:11,410 --> 00:01:17,842
Las dos tienen el mismo conjunto de propiedades, y las dos pueden ser usadas por la misma función "drawWinston()".

17
00:01:17,842 --> 00:01:24,072
De hecho, si piensas en esto, las dos están describiendo un tipo de "Winston", ¿cierto?

18
00:01:24,072 --> 00:01:28,796
Y podríamos pensar que existe algo así como un tipo abstracto de "Winston" en el mundo,

19
00:01:28,796 --> 00:01:36,460
y que cada "Winston" tiene el mismo conjunto de propiedades como un sobrenombre ("nickname"), edad ("age"), una "x" y una "y",

20
00:01:36,460 --> 00:01:42,162
y aquí, hemos creado dos instancias de "Winston"

21
00:01:42,162 --> 00:01:48,465
para describir un "Winston" particular. Este es un "Winston" adolescente, y este es un "Winston" adulto.

22
00:01:48,465 --> 00:01:54,762
Pero los dos en realidad son muy similares, y hay muchas cosas que son similares entre ellos.

23
00:01:54,762 --> 00:02:01,295
Y si lo piensas bien, así es como funciona el mundo, tenemos tipos de datos abstractos como seres humanos y gente,

24
00:02:01,295 --> 00:02:05,958
y cada uno de nosotros somos instancias específicas de ellos con nuestras propias pequeñas propiedades.

25
00:02:05,958 --> 00:02:14,948
Ahora, podemos usar técnicas orientadas a objetos en Javascript de tal forma que estas variables de "Winston"

26
00:02:14,948 --> 00:02:21,834
sean instancias formales del objeto "Winston", de manera que ellos sepan que están compartiendo cosas en común.

27
00:02:21,834 --> 00:02:27,974
Entonces, para hacer eso, en primer lugar tenemos que describir este tipo de dato abstracto llamado "Winston".

28
00:02:27,974 --> 00:02:30,900
Y lo haremos con una variable.

29
00:02:30,900 --> 00:02:38,934
Almacenaremos el tipo de dato en una variable. Así que "var Winston" y usaremos "W" mayúscula porque debemos iniciar nuestros objetos con mayúscula,

30
00:02:38,934 --> 00:02:42,196
y lo igualaremos a una función.

31
00:02:42,196 --> 00:02:47,030
Y esta función es una función especial que llamamos "función constructora",

32
00:02:47,030 --> 00:02:52,042
porque vamos a llamar esta función cada vez que queramos crear una nueva instancia de "Winston".

33
00:02:52,042 --> 00:02:57,860
Así que si queremos crear un "Winston" adolescente llamaremos esta función y si queremos crear un "Winston" adulto llamaremos esta función.

34
00:02:57,860 --> 00:03:06,417
Esto significa que esta función debe tomar cualquier argumento que necesite saber para crear un "Winston" completo.

35
00:03:06,417 --> 00:03:11,324
En este caso necesita conocer el sobrenombre ("nickname"), la edad ("age"), la "x" y la "y".

36
00:03:11,324 --> 00:03:15,063
Ahora, una vez que tenemos esos argumentos, vamos a hacer algo con ellos,

37
00:03:15,063 --> 00:03:21,483
tenemos que adjuntar esa información al objeto "Winston".

38
00:03:21,483 --> 00:03:28,672
Para eso usaremos una nueva y especial palabra clave: "this". Y "this" se referirá a la instancia actual del objeto.

39
00:03:28,672 --> 00:03:34,921
Así que escribimos "this.nickname", y esto significa que la propiedad "nickname" de este objeto es igual a

40
00:03:34,921 --> 00:03:38,419
lo que sea que le pasemos a la función constructora, ¿ok?

41
00:03:38,419 --> 00:03:45,728
Y "this.age" es igual a lo que le pasemos en "age", "this.x" es igual a la "x" que le pasemos, y "this.y"

42
00:03:45,728 --> 00:03:48,385
es igual a la "y" que le pasemos.

43
00:03:48,385 --> 00:03:57,500
Muy bien, ahora tenemos este tipo de dato abstracto llamado "Winston", y tiene una función constructora que podemos usar para crear un nuevo "Winston".

44
00:03:57,500 --> 00:04:00,327


45
00:04:00,327 --> 00:04:05,245


46
00:04:05,245 --> 00:04:10,376


47
00:04:10,376 --> 00:04:13,950


48
00:04:13,950 --> 00:04:22,305


49
00:04:22,305 --> 00:04:27,502


50
00:04:27,502 --> 00:04:31,082


51
00:04:31,082 --> 00:04:35,722


52
00:04:35,722 --> 00:04:39,960


53
00:04:39,960 --> 00:04:47,410


54
00:04:47,410 --> 00:04:50,812


55
00:04:50,812 --> 00:04:58,094


56
00:04:58,094 --> 00:05:05,272


57
00:05:05,272 --> 00:05:08,799


58
00:05:08,799 --> 00:05:14,379


59
00:05:14,379 --> 00:05:20,212


60
00:05:20,212 --> 00:05:23,103


61
00:05:23,103 --> 00:05:28,162


62
00:05:28,162 --> 00:05:30,894


63
00:05:30,894 --> 00:05:34,029


64
00:05:34,029 --> 00:05:39,363


65
00:05:39,363 --> 00:05:41,444


66
00:05:41,444 --> 00:05:46,361


67
00:05:46,361 --> 00:05:50,589


68
00:05:50,589 --> 00:05:55,996


69
00:05:55,996 --> 00:06:00,830


70
00:06:00,830 --> 00:06:06,590


71
00:06:06,590 --> 00:06:12,804


72
00:06:12,804 --> 00:06:17,281


73
00:06:17,281 --> 00:06:20,968


74
00:06:20,968 --> 00:06:26,632


75
00:06:26,632 --> 00:06:29,925


76
00:06:29,925 --> 00:06:35,528


77
00:06:35,528 --> 00:06:40,741


78
00:06:40,741 --> 00:06:45,829


79
00:06:45,829 --> 00:06:48,690


80
00:06:48,690 --> 00:06:51,000