[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.34,0:00:05.96,Default,,0000,0000,0000,,Ahora que entiendes los fundamentos de Javascript, quiero enseñarte una forma genial de usar Javascript.
Dialogue: 0,0:00:05.96,0:00:09.55,Default,,0000,0000,0000,,Algo que llamamos "Programación Orientada a Objetos"
Dialogue: 0,0:00:09.55,0:00:12.57,Default,,0000,0000,0000,,Pero primero debemos entender porqué es realmente útil.
Dialogue: 0,0:00:12.57,0:00:17.67,Default,,0000,0000,0000,,Así que puse aquí un programa que quedará mejorado una vez que lo hagamos más orientado a objeto.
Dialogue: 0,0:00:17.67,0:00:25.14,Default,,0000,0000,0000,,Ahora, éste es un buen programa para empezar. En la parte superior, tenemos dos variables que almacenan literales de objeto.
Dialogue: 0,0:00:25.14,0:00:30.45,Default,,0000,0000,0000,,Los literales de objeto son un tipo de objetos que aprendimos antes y que creamos con dos llaves ({}),
Dialogue: 0,0:00:30.45,0:00:34.41,Default,,0000,0000,0000,,y dentro de las cuales ponemos la información de los nombres y valores de las propiedades.
Dialogue: 0,0:00:34.41,0:00:39.24,Default,,0000,0000,0000,,Así que aquí tenemos dos de esas variables literales de objeto, y aquí abajo tenemos esta función "drawWinston",
Dialogue: 0,0:00:39.24,0:00:41.13,Default,,0000,0000,0000,,que espera recibir un argumento simple,
Dialogue: 0,0:00:41.13,0:00:47.88,Default,,0000,0000,0000,,y después dibuja el argumento: dibuja una imagen basada en la "x" y "y" que son propiedades del objeto,
Dialogue: 0,0:00:47.88,0:00:53.11,Default,,0000,0000,0000,,y luego un título basado en el sobrenombre y la edad que son propiedades del objeto.
Dialogue: 0,0:00:53.11,0:00:58.16,Default,,0000,0000,0000,,Y finalmente hasta abajo, llamamos la función "drawWinston()" para el adolescente y para el adulto,
Dialogue: 0,0:00:58.16,0:01:01.01,Default,,0000,0000,0000,,que es lo que hace que se muestren.
Dialogue: 0,0:01:01.01,0:01:06.37,Default,,0000,0000,0000,,Muy bien. Ahora si vamos de este lado y vemos estas literales de objeto,
Dialogue: 0,0:01:06.37,0:01:11.41,Default,,0000,0000,0000,,fíjense que se ven muy similares.
Dialogue: 0,0:01:11.41,0:01:17.84,Default,,0000,0000,0000,,Las dos tienen el mismo conjunto de propiedades, y las dos pueden ser usadas por la misma función "drawWinston()".
Dialogue: 0,0:01:17.84,0:01:24.07,Default,,0000,0000,0000,,De hecho, si piensas en esto, las dos están describiendo un tipo de "Winston", ¿cierto?
Dialogue: 0,0:01:24.07,0:01:28.80,Default,,0000,0000,0000,,Y podríamos pensar que existe algo así como un tipo abstracto de "Winston" en el mundo,
Dialogue: 0,0:01:28.80,0:01:36.46,Default,,0000,0000,0000,,y que cada "Winston" tiene el mismo conjunto de propiedades como un sobrenombre ("nickname"), edad ("age"), una "x" y una "y",
Dialogue: 0,0:01:36.46,0:01:42.16,Default,,0000,0000,0000,,y aquí, hemos creado dos instancias de "Winston"
Dialogue: 0,0:01:42.16,0:01:48.46,Default,,0000,0000,0000,,para describir un "Winston" particular. Éste es un "Winston" adolescente, y éste es un "Winston" adulto.
Dialogue: 0,0:01:48.46,0:01:54.76,Default,,0000,0000,0000,,Pero los dos en realidad son muy similares, y hay muchas cosas que son similares entre ellos.
Dialogue: 0,0:01:54.76,0:02:01.30,Default,,0000,0000,0000,,Y si lo piensas bien, así es como funciona el mundo, tenemos tipos de datos abstractos como seres humanos y gente,
Dialogue: 0,0:02:01.30,0:02:05.96,Default,,0000,0000,0000,,y cada uno de nosotros somos instancias específicas de ellos con nuestras propias pequeñas propiedades.
Dialogue: 0,0:02:05.96,0:02:14.95,Default,,0000,0000,0000,,Ahora, podemos usar técnicas orientadas a objetos en Javascript de tal forma que estas variables de "Winston"
Dialogue: 0,0:02:14.95,0:02:21.83,Default,,0000,0000,0000,,sean instancias formales del objeto "Winston", de manera que ellos sepan que están compartiendo cosas en común.
Dialogue: 0,0:02:21.83,0:02:27.97,Default,,0000,0000,0000,,Entonces, para hacer eso, en primer lugar tenemos que describir este tipo de dato abstracto llamado "Winston".
Dialogue: 0,0:02:27.97,0:02:30.90,Default,,0000,0000,0000,,Y lo haremos con una variable.
Dialogue: 0,0:02:30.90,0:02:38.93,Default,,0000,0000,0000,,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,
Dialogue: 0,0:02:38.93,0:02:42.20,Default,,0000,0000,0000,,y lo igualaremos a una función.
Dialogue: 0,0:02:42.20,0:02:47.03,Default,,0000,0000,0000,,Y esta función es una función especial que llamamos "función constructora",
Dialogue: 0,0:02:47.03,0:02:52.04,Default,,0000,0000,0000,,porque vamos a llamar esta función cada vez que queramos crear una nueva instancia de "Winston".
Dialogue: 0,0:02:52.04,0:02:57.86,Default,,0000,0000,0000,,Así que si queremos crear un "Winston" adolescente llamaremos esta función y si queremos crear un "Winston" adulto llamaremos esta función.
Dialogue: 0,0:02:57.86,0:03:06.42,Default,,0000,0000,0000,,Esto significa que esta función debe tomar cualquier argumento que necesite saber para crear un "Winston" completo.
Dialogue: 0,0:03:06.42,0:03:11.32,Default,,0000,0000,0000,,En este caso necesita conocer el sobrenombre ("nickname"), la edad ("age"), la "x" y la "y".
Dialogue: 0,0:03:11.32,0:03:15.06,Default,,0000,0000,0000,,Ahora, una vez que tenemos esos argumentos, vamos a hacer algo con ellos,
Dialogue: 0,0:03:15.06,0:03:21.48,Default,,0000,0000,0000,,tenemos que ligar esa información al objeto "Winston".
Dialogue: 0,0:03:21.48,0:03:28.67,Default,,0000,0000,0000,,Para eso usaremos una nueva y especial palabra clave: "this". Y "this" se referirá a la instancia actual del objeto.
Dialogue: 0,0:03:28.67,0:03:34.92,Default,,0000,0000,0000,,Así que escribimos "this.nickname", y esto significa que la propiedad "nickname" de este objeto es igual a
Dialogue: 0,0:03:34.92,0:03:38.42,Default,,0000,0000,0000,,lo que sea que le pasemos a la función constructora, ¿ok?
Dialogue: 0,0:03:38.42,0:03:45.73,Default,,0000,0000,0000,,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"
Dialogue: 0,0:03:45.73,0:03:48.38,Default,,0000,0000,0000,,es igual a la "y" que le pasemos.
Dialogue: 0,0:03:48.38,0:03:57.50,Default,,0000,0000,0000,,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".
Dialogue: 0,0:03:57.50,0:04:00.33,Default,,0000,0000,0000,,Así que probemos.
Dialogue: 0,0:04:00.33,0:04:05.24,Default,,0000,0000,0000,,Vamos a crear un "winstonTeen" de nuevo, pero esta vez vamos a decir "winstonTeen" es igual,
Dialogue: 0,0:04:05.24,0:04:10.38,Default,,0000,0000,0000,,y en lugar de poner llaves, vamos a escribir "new Winston".
Dialogue: 0,0:04:10.38,0:04:13.95,Default,,0000,0000,0000,,Así que estamos diciendo que vamos a crear una nueva instancia de "Winston",
Dialogue: 0,0:04:13.95,0:04:22.30,Default,,0000,0000,0000,,y vamos a pasar la información que necesita, "Winsteen", 15, 20, 50, ¿ok?
Dialogue: 0,0:04:22.30,0:04:27.50,Default,,0000,0000,0000,,Y entonces podemos borrar este código anterior porque ya no lo necesitamos.
Dialogue: 0,0:04:27.50,0:04:31.08,Default,,0000,0000,0000,,¿Correcto? Ahora hemos creado un nuevo "Winsteen".
Dialogue: 0,0:04:31.08,0:04:35.72,Default,,0000,0000,0000,,Y ahora podemos decir "winstonAdult" es igual a "new Winston"
Dialogue: 0,0:04:35.72,0:04:39.96,Default,,0000,0000,0000,,y por supuesto, su nombre es "Mr. Winst-a-lot", un nombre lindo,
Dialogue: 0,0:04:39.96,0:04:47.41,Default,,0000,0000,0000,,tiene 30 años, y está en 229 y 50. ¿Cierto? Y entonces podemos borrar este literal de objeto.
Dialogue: 0,0:04:47.41,0:04:50.81,Default,,0000,0000,0000,,¡Tan tan! Nuestro código sigue funcionando.
Dialogue: 0,0:04:50.81,0:04:58.09,Default,,0000,0000,0000,,Lo que hicimos aquí fue hacer un tipo de dato abstracto que es este "Winston"
Dialogue: 0,0:04:58.09,0:05:05.27,Default,,0000,0000,0000,,y podemos crear una nueva instancia de "Winston" que tenga esas propiedades que son únicas para ellos.
Dialogue: 0,0:05:05.27,0:05:08.80,Default,,0000,0000,0000,,Y tenemos que recordar las propiedades que tiene.
Dialogue: 0,0:05:08.80,0:05:14.38,Default,,0000,0000,0000,,Recordar es muy importante. Aquí tenemos "this.nickname" y "this.age",
Dialogue: 0,0:05:14.38,0:05:20.21,Default,,0000,0000,0000,,si accidentalmente no ponemos este "this.age", fíjense que nos marca "undefined".
Dialogue: 0,0:05:20.21,0:05:23.10,Default,,0000,0000,0000,,Y eso es porque aquí abajo, la función "drawWinston",
Dialogue: 0,0:05:23.10,0:05:28.16,Default,,0000,0000,0000,,espera lo que el objeto le pase, espera tener algo en la propiedad edad.
Dialogue: 0,0:05:28.16,0:05:30.89,Default,,0000,0000,0000,,Y si no escribimos "this.age",
Dialogue: 0,0:05:30.89,0:05:34.03,Default,,0000,0000,0000,,entonces no va a tener esta propiedad, ¿ok? Se la pasamos en la función constructora
Dialogue: 0,0:05:34.03,0:05:39.36,Default,,0000,0000,0000,,pero no hicimos nada con ella, en realidad tenemos que adjuntarla al objeto usando la palabra clave"this".
Dialogue: 0,0:05:39.36,0:05:41.36,Default,,0000,0000,0000,,Así que lo arreglamos.
Dialogue: 0,0:05:41.36,0:05:46.36,Default,,0000,0000,0000,,Ahora probablemente estés pensando, "ok, estás haciendo que este código funcione y estás haciendo estas cosas interesantes,
Dialogue: 0,0:05:46.36,0:05:50.59,Default,,0000,0000,0000,,pero, en realidad sólo hemos logrado lo mismo que teníamos antes".
Dialogue: 0,0:05:50.59,0:05:55.100,Default,,0000,0000,0000,,Bueno, aquí hay algo genial. Ahora todos nuestros "Winstons" pasan por la misma función constructora.
Dialogue: 0,0:05:55.100,0:06:00.83,Default,,0000,0000,0000,,Y podemos cambiar las cosas, si queremos cambiar algo de "Winston"...
Dialogue: 0,0:06:00.83,0:06:06.59,Default,,0000,0000,0000,,de todos los "Winstons", sólo cambiamos aquí dentro. Así que probablemente queramos modificar aquí y escribir "years old" ("años de edad").
Dialogue: 0,0:06:06.59,0:06:12.80,Default,,0000,0000,0000,,Podemos poner esto aquí, y ahora todos los "Winstons" dicen "15 years old", "30 years old", ¿cierto?
Dialogue: 0,0:06:12.80,0:06:17.28,Default,,0000,0000,0000,,Así que están tomando la parte que es única de cada uno de ellos pero también tienen cosas que comparten.
Dialogue: 0,0:06:17.28,0:06:20.97,Default,,0000,0000,0000,,Y lo que es realmente interesante sobre la programación orientada a objetos es la idea de que
Dialogue: 0,0:06:20.97,0:06:26.63,Default,,0000,0000,0000,,hay este tipo de objetos en el mundo, y puedes crear instancias de esos objetos
Dialogue: 0,0:06:26.63,0:06:29.92,Default,,0000,0000,0000,,y que hay cosas que son similares entre ellos como tener las mismas propiedades,
Dialogue: 0,0:06:29.92,0:06:35.53,Default,,0000,0000,0000,,pero hay cosas que son diferentes como el valor de las propiedades de cada uno, ¿cierto?
Dialogue: 0,0:06:35.53,0:06:40.74,Default,,0000,0000,0000,,Pero podemos hacer el mismo tipo de cosas con ellos, como llamar las mismas funciones
Dialogue: 0,0:06:40.74,0:06:46.05,Default,,0000,0000,0000,,y usarlos en formas similares. Así que éstas son algunas de las cosas geniales que podemos hacer con la programación orientada a objetos,
Dialogue: 0,0:06:46.05,0:06:48.80,Default,,0000,0000,0000,,pero como te vas a dar cuenta, hay muchísimas cosas más que puedes hacer.
Dialogue: 0,0:06:48.80,0:06:50.67,Default,,0000,0000,0000,,¡Así que sigue atento!