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 porqué es realmente útil.

4
00:00:12,570 --> 00:00:17,668
Así que puse aquí un programa que quedará 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
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 funció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. Éste es un "Winston" adolescente, y éste 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 ligar 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
Así que probemos.

45
00:04:00,327 --> 00:04:05,245
Vamos a crear un "winstonTeen" de nuevo, pero esta vez vamos a decir "winstonTeen" es igual,

46
00:04:05,245 --> 00:04:10,376
y en lugar de poner llaves, vamos a escribir "new Winston".

47
00:04:10,376 --> 00:04:13,950
Así que estamos diciendo que vamos a crear una nueva instancia de "Winston",

48
00:04:13,950 --> 00:04:22,305
y vamos a pasar la información que necesita, "Winsteen", 15, 20, 50, ¿ok?

49
00:04:22,305 --> 00:04:27,502
Y entonces podemos borrar este código anterior porque ya no lo necesitamos.

50
00:04:27,502 --> 00:04:31,082
¿Correcto? Ahora hemos creado un nuevo "Winsteen".

51
00:04:31,082 --> 00:04:35,722
Y ahora podemos decir "winstonAdult" es igual a "new Winston"

52
00:04:35,722 --> 00:04:39,960
y por supuesto, su nombre es "Mr. Winst-a-lot", un nombre lindo,

53
00:04:39,960 --> 00:04:47,410
tiene 30 años, y está en 229 y 50. ¿Cierto? Y entonces podemos borrar este literal de objeto.

54
00:04:47,410 --> 00:04:50,812
¡Tan tan! Nuestro código sigue funcionando.

55
00:04:50,812 --> 00:04:58,094
Lo que hicimos aquí fue hacer un tipo de dato abstracto que es este "Winston"

56
00:04:58,094 --> 00:05:05,272
y podemos crear una nueva instancia de "Winston" que tenga esas propiedades que son únicas para ellos.

57
00:05:05,272 --> 00:05:08,799
Y tenemos que recordar las propiedades que tiene.

58
00:05:08,799 --> 00:05:14,379
Recordar es muy importante. Aquí tenemos "this.nickname" y "this.age",

59
00:05:14,379 --> 00:05:20,212
si accidentalmente no ponemos este "this.age", fíjense que nos marca "undefined".

60
00:05:20,212 --> 00:05:23,103
Y eso es porque aquí abajo, la función "drawWinston",

61
00:05:23,103 --> 00:05:28,162
espera lo que el objeto le pase, espera tener algo en la propiedad edad.

62
00:05:28,162 --> 00:05:30,894
Y si no escribimos "this.age",

63
00:05:30,894 --> 00:05:34,029
entonces no va a tener esta propiedad, ¿ok? Se la pasamos en la función constructora

64
00:05:34,029 --> 00:05:39,363
pero no hicimos nada con ella, en realidad tenemos que adjuntarla al objeto usando la palabra clave"this".

65
00:05:39,363 --> 00:05:41,357
Así que lo arreglamos.

66
00:05:41,357 --> 00:05:46,361
Ahora probablemente estés pensando, "ok, estás haciendo que este código funcione y estás haciendo estas cosas interesantes,

67
00:05:46,361 --> 00:05:50,589
pero, en realidad sólo hemos logrado lo mismo que teníamos antes".

68
00:05:50,589 --> 00:05:55,996
Bueno, aquí hay algo genial. Ahora todos nuestros "Winstons" pasan por la misma función constructora.

69
00:05:55,996 --> 00:06:00,830
Y podemos cambiar las cosas, si queremos cambiar algo de "Winston"...

70
00:06:00,830 --> 00:06:06,590
de todos los "Winstons", sólo cambiamos aquí dentro. Así que probablemente queramos modificar aquí y escribir "years old" ("años de edad").

71
00:06:06,590 --> 00:06:12,804
Podemos poner esto aquí, y ahora todos los "Winstons" dicen "15 years old", "30 years old", ¿cierto?

72
00:06:12,804 --> 00:06:17,281
Así que están tomando la parte que es única de cada uno de ellos pero también tienen cosas que comparten.

73
00:06:17,281 --> 00:06:20,968
Y lo que es realmente interesante sobre la programación orientada a objetos es la idea de que

74
00:06:20,968 --> 00:06:26,632
hay este tipo de objetos en el mundo, y puedes crear instancias de esos objetos

75
00:06:26,632 --> 00:06:29,925
y que hay cosas que son similares entre ellos como tener las mismas propiedades,

76
00:06:29,925 --> 00:06:35,528
pero hay cosas que son diferentes como el valor de las propiedades de cada uno, ¿cierto?

77
00:06:35,528 --> 00:06:40,741
Pero podemos hacer el mismo tipo de cosas con ellos, como llamar las mismas funciones

78
00:06:40,741 --> 00:06:46,050
y usarlos en formas similares. Así que éstas son algunas de las cosas geniales que podemos hacer con la programación orientada a objetos,

79
00:06:46,050 --> 00:06:48,802
pero como te vas a dar cuenta, hay muchísimas cosas más que puedes hacer.

80
00:06:48,802 --> 00:06:50,672
¡Así que sigue atento!