WEBVTT

00:00:01.342 --> 00:00:05.959
Ahora que entiendes los fundamentos de Javascript, quiero enseñarte una forma genial de usar Javascript.

00:00:05.959 --> 00:00:09.546
Algo que llamamos "Programación Orientada a Objetos"

00:00:09.546 --> 00:00:12.570
Pero primero debemos entender porqué es realmente útil.

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.

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.

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 ({}),

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.

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",

00:00:39.241 --> 00:00:41.129
que espera recibir un argumento simple,

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,

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.

00:00:53.107 --> 00:00:58.164
Y finalmente hasta abajo, llamamos la función "drawWinston()" para el adolescente y para el adulto,

00:00:58.164 --> 00:01:01.012
que es lo que hace que se muestren.

00:01:01.012 --> 00:01:06.366
Muy bien. Ahora si vamos de este lado y vemos estas literales de objeto,

00:01:06.366 --> 00:01:11.410
fíjense que se ven muy similares.

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()".

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

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,

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",

00:01:36.460 --> 00:01:42.162
y aquí, hemos creado dos instancias de "Winston"

00:01:42.162 --> 00:01:48.465
para describir un "Winston" particular. Éste es un "Winston" adolescente, y éste es un "Winston" adulto.

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.

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,

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.

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"

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.

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".

00:02:27.974 --> 00:02:30.900
Y lo haremos con una variable.

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,

00:02:38.934 --> 00:02:42.196
y lo igualaremos a una función.

00:02:42.196 --> 00:02:47.030
Y esta función es una función especial que llamamos "función constructora",

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".

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.

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.

00:03:06.417 --> 00:03:11.324
En este caso necesita conocer el sobrenombre ("nickname"), la edad ("age"), la "x" y la "y".

00:03:11.324 --> 00:03:15.063
Ahora, una vez que tenemos esos argumentos, vamos a hacer algo con ellos,

00:03:15.063 --> 00:03:21.483
tenemos que ligar esa información al objeto "Winston".

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.

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

00:03:34.921 --> 00:03:38.419
lo que sea que le pasemos a la función constructora, ¿ok?

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"

00:03:45.728 --> 00:03:48.385
es igual a la "y" que le pasemos.

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".

00:03:57.500 --> 00:04:00.327
Así que probemos.

00:04:00.327 --> 00:04:05.245
Vamos a crear un "winstonTeen" de nuevo, pero esta vez vamos a decir "winstonTeen" es igual,

00:04:05.245 --> 00:04:10.376
y en lugar de poner llaves, vamos a escribir "new Winston".

00:04:10.376 --> 00:04:13.950
Así que estamos diciendo que vamos a crear una nueva instancia de "Winston",

00:04:13.950 --> 00:04:22.305
y vamos a pasar la información que necesita, "Winsteen", 15, 20, 50, ¿ok?

00:04:22.305 --> 00:04:27.502
Y entonces podemos borrar este código anterior porque ya no lo necesitamos.

00:04:27.502 --> 00:04:31.082
¿Correcto? Ahora hemos creado un nuevo "Winsteen".

00:04:31.082 --> 00:04:35.722
Y ahora podemos decir "winstonAdult" es igual a "new Winston"

00:04:35.722 --> 00:04:39.960
y por supuesto, su nombre es "Mr. Winst-a-lot", un nombre lindo,

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.

00:04:47.410 --> 00:04:50.812
¡Tan tan! Nuestro código sigue funcionando.

00:04:50.812 --> 00:04:58.094
Lo que hicimos aquí fue hacer un tipo de dato abstracto que es este "Winston"

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.

00:05:05.272 --> 00:05:08.799
Y tenemos que recordar las propiedades que tiene.

00:05:08.799 --> 00:05:14.379
Recordar es muy importante. Aquí tenemos "this.nickname" y "this.age",

00:05:14.379 --> 00:05:20.212
si accidentalmente no ponemos este "this.age", fíjense que nos marca "undefined".

00:05:20.212 --> 00:05:23.103
Y eso es porque aquí abajo, la función "drawWinston",

00:05:23.103 --> 00:05:28.162
espera lo que el objeto le pase, espera tener algo en la propiedad edad.

00:05:28.162 --> 00:05:30.894
Y si no escribimos "this.age",

00:05:30.894 --> 00:05:34.029
entonces no va a tener esta propiedad, ¿ok? Se la pasamos en la función constructora

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".

00:05:39.363 --> 00:05:41.357
Así que lo arreglamos.

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,

00:05:46.361 --> 00:05:50.589
pero, en realidad sólo hemos logrado lo mismo que teníamos antes".

00:05:50.589 --> 00:05:55.996
Bueno, aquí hay algo genial. Ahora todos nuestros "Winstons" pasan por la misma función constructora.

00:05:55.996 --> 00:06:00.830
Y podemos cambiar las cosas, si queremos cambiar algo de "Winston"...

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").

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?

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.

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

00:06:20.968 --> 00:06:26.632
hay este tipo de objetos en el mundo, y puedes crear instancias de esos objetos

00:06:26.632 --> 00:06:29.925
y que hay cosas que son similares entre ellos como tener las mismas propiedades,

00:06:29.925 --> 00:06:35.528
pero hay cosas que son diferentes como el valor de las propiedades de cada uno, ¿cierto?

00:06:35.528 --> 00:06:40.741
Pero podemos hacer el mismo tipo de cosas con ellos, como llamar las mismas funciones

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,

00:06:46.050 --> 00:06:48.802
pero como te vas a dar cuenta, hay muchísimas cosas más que puedes hacer.

00:06:48.802 --> 00:06:50.672
¡Así que sigue atento!