[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.19,0:00:03.17,Default,,0000,0000,0000,,Volvimos con nuestro programa que crea Winstons
Dialogue: 0,0:00:03.17,0:00:07.59,Default,,0000,0000,0000,,pero he agregado un nuevo tipo de objeto "Hopper" porque Hopper se sentía un poco
Dialogue: 0,0:00:07.59,0:00:11.92,Default,,0000,0000,0000,,solo. Así ahora defino "Hopper" de la misma forma que defino "Winston", tu sabes,
Dialogue: 0,0:00:11.92,0:00:15.84,Default,,0000,0000,0000,,empezando con la función constructora y tomando las mismas propiedades y después "dibujar"
Dialogue: 0,0:00:15.84,0:00:20.50,Default,,0000,0000,0000,,y después "hablar" y después agrego otro método llamado
Dialogue: 0,0:00:20.50,0:00:23.81,Default,,0000,0000,0000,,"Hooray" porque a los "Hoppers" les gusta celebrar y a los "Winstons" nó.
Dialogue: 0,0:00:23.81,0:00:27.92,Default,,0000,0000,0000,,Ahora, abajo de la función he creado
Dialogue: 0,0:00:27.92,0:00:31.17,Default,,0000,0000,0000,,2 nuevos objetos "Hopper": el pequeño Hopper y el grán Hopper
Dialogue: 0,0:00:31.17,0:00:35.35,Default,,0000,0000,0000,,y los dibujo y llamo la función "talk" (hablar) en uno y "Hooray" en el otro.
Dialogue: 0,0:00:35.35,0:00:37.51,Default,,0000,0000,0000,,Eso es excelente.
Dialogue: 0,0:00:37.51,0:00:39.93,Default,,0000,0000,0000,,Ahora, si vemos éste codigo aquí arriba
Dialogue: 0,0:00:39.93,0:00:41.82,Default,,0000,0000,0000,,notarás algo interesante. Es que
Dialogue: 0,0:00:41.97,0:00:52.32,Default,,0000,0000,0000,,el código para l "Hopper" es muy similar al codigo para "Winston". Particularmente el constructor. No sé si recuerdas pero ésa es basicamente el mismo código del constructor de "Winston"
Dialogue: 0,0:00:52.32,0:01:00.75,Default,,0000,0000,0000,,Y después la función "talk" (hablar) es igual al "talk" del Winston.
Dialogue: 0,0:01:00.76,0:01:03.90,Default,,0000,0000,0000,,y ambos tienen función "draw" (dibujar).
Dialogue: 0,0:01:03.90,0:01:07.92,Default,,0000,0000,0000,,así que hay muchas cosas en común acerca de estos dos tipos de objetos
Dialogue: 0,0:01:07.92,0:01:11.34,Default,,0000,0000,0000,,y tiene sentido porque sabes que Hopper y Winston son 2 tipos de objeto muy similares
Dialogue: 0,0:01:11.34,0:01:15.30,Default,,0000,0000,0000,,en nuestro mundo. Si lo consideras, sabes, el mundo real
Dialogue: 0,0:01:15.30,0:01:20.01,Default,,0000,0000,0000,,fuera de la computadora muchos objetos comparten similaridades
Dialogue: 0,0:01:20.01,0:01:21.42,Default,,0000,0000,0000,,con otros tipos de objetos.
Dialogue: 0,0:01:21.42,0:01:23.64,Default,,0000,0000,0000,,Como en el reino animal. Todos los animales
Dialogue: 0,0:01:23.64,0:01:26.81,Default,,0000,0000,0000,,son simliares en algunas formas. Y después tenemos diferentes tipos de animales
Dialogue: 0,0:01:26.81,0:01:31.59,Default,,0000,0000,0000,,como los humanos. Y los humanos comparten esas similarides
Dialogue: 0,0:01:31.59,0:01:34.33,Default,,0000,0000,0000,,pero tambien tienen sos propias similaridades únicas.
Dialogue: 0,0:01:34.33,0:01:35.82,Default,,0000,0000,0000,,Así que podríamos decir que
Dialogue: 0,0:01:36.20,0:01:38.97,Default,,0000,0000,0000,,un animal es un tipo de objeto del cual el tipo de objeto "humano" hereda funcionalidad.
Dialogue: 0,0:01:38.97,0:01:46.86,Default,,0000,0000,0000,,No empezamos de cero, sino agregamos a la funcionalidad que ya tenemos de ser un animal.
Dialogue: 0,0:01:46.86,0:01:49.20,Default,,0000,0000,0000,,como todos los animales que hacen ruido.
Dialogue: 0,0:01:49.20,0:01:51.41,Default,,0000,0000,0000,,pero los humanos tambien tienen lenguaje
Dialogue: 0,0:01:51.41,0:01:54.67,Default,,0000,0000,0000,,Así que este tipo de herencia de objetos
Dialogue: 0,0:01:54.67,0:01:56.70,Default,,0000,0000,0000,,es realmente útil en la programación también.
Dialogue: 0,0:01:56.70,0:01:59.86,Default,,0000,0000,0000,,y podemos crear una cadena de herencia de objetos en nuestro Javascript
Dialogue: 0,0:01:59.86,0:02:02.53,Default,,0000,0000,0000,,Así para hacer esto cuando piensas en
Dialogue: 0,0:02:02.53,0:02:04.42,Default,,0000,0000,0000,,lo que comparten nuestros objetos.
Dialogue: 0,0:02:04.42,0:02:06.63,Default,,0000,0000,0000,,Y se te ocurre un nombre para ella.
Dialogue: 0,0:02:06.63,0:02:08.68,Default,,0000,0000,0000,,porque vamos a crear un nuevo tipo de objeto
Dialogue: 0,0:02:08.68,0:02:10.58,Default,,0000,0000,0000,,que representa el objeto base
Dialogue: 0,0:02:10.58,0:02:12.09,Default,,0000,0000,0000,,así que llamémoslo "Creature" (criatura)
Dialogue: 0,0:02:12.09,0:02:13.87,Default,,0000,0000,0000,,ambos son criaturas
Dialogue: 0,0:02:13.87,0:02:17.83,Default,,0000,0000,0000,,Así que decimos "var creature =" y ahora necesitamos nuestra función constructora.
Dialogue: 0,0:02:17.83,0:02:22.34,Default,,0000,0000,0000,,Vamos y simplemente copiemos la del "Hopper" que igual a la de "Winston"
Dialogue: 0,0:02:22.34,0:02:23.76,Default,,0000,0000,0000,,Está bien
Dialogue: 0,0:02:23.76,0:02:27.17,Default,,0000,0000,0000,,y despues... vamos
Dialogue: 0,0:02:27.17,0:02:28.14,Default,,0000,0000,0000,,ahora quiero...
Dialogue: 0,0:02:28.14,0:02:29.51,Default,,0000,0000,0000,,¿Qué queremos ahora?
Dialogue: 0,0:02:29.51,0:02:31.97,Default,,0000,0000,0000,,Talvez queremos agregar la función de arriba
Dialogue: 0,0:02:31.97,0:02:39.30,Default,,0000,0000,0000,,y solo copiamos la de "Hopper". Pero por supuesto que necesitamos tenerla en el prototipo de la "Creature" en vez de eso.
Dialogue: 0,0:02:39.30,0:02:41.68,Default,,0000,0000,0000,,OK, excelente.
Dialogue: 0,0:02:41.68,0:02:45.30,Default,,0000,0000,0000,,ahora tenemos el tipo de objeto "creature" (criatura).
Dialogue: 0,0:02:45.30,0:02:47.81,Default,,0000,0000,0000,,Pero necesitamos decirle a "Hopper" que debería
Dialogue: 0,0:02:47.81,0:02:51.14,Default,,0000,0000,0000,,basar su funcionalidad según "Creature".
Dialogue: 0,0:02:51.25,0:02:51.25,Default,,0000,0000,0000,,Podemos hacer eso escribiendo ésta línea
Dialogue: 0,0:02:53.82,0:02:58.60,Default,,0000,0000,0000,,y diremos "Hopper.prototype"
Dialogue: 0,0:02:58.60,0:03:01.97,Default,,0000,0000,0000,,es igual a "object.create"
Dialogue: 0,0:03:01.97,0:03:04.98,Default,,0000,0000,0000,,"creature.prototype"
Dialogue: 0,0:03:04.98,0:03:14.20,Default,,0000,0000,0000,,Lo que hace esta linea es decirle a Javascript que base la funcionalidad del prototipo de "Hopper" en la del prototipo de "Creature".
Dialogue: 0,0:03:14.20,0:03:22.34,Default,,0000,0000,0000,,y eso significa que cada vez que busque una función en "Hopper", buscara el prototipo de Hopper
Dialogue: 0,0:03:22.34,0:03:26.43,Default,,0000,0000,0000,,primero, pero si no lo encuentra entonces buscara en el prototipo de "Creature".
Dialogue: 0,0:03:26.43,0:03:29.20,Default,,0000,0000,0000,,Y eso es lo que llamamos una cadena de prototipos.
Dialogue: 0,0:03:29.20,0:03:34.03,Default,,0000,0000,0000,,Ahora, una vez que hemos hecho esto deberíamos de poder borrar la funcion "talk"
Dialogue: 0,0:03:34.03,0:03:35.63,Default,,0000,0000,0000,,en "Hopper"
Dialogue: 0,0:03:35.63,0:03:38.30,Default,,0000,0000,0000,,Porque ya existe en "Creature".
Dialogue: 0,0:03:38.30,0:03:40.23,Default,,0000,0000,0000,,He está mas arriba en la cadena del prototipo.
Dialogue: 0,0:03:40.23,0:03:42.54,Default,,0000,0000,0000,,Listo?
Dialogue: 0,0:03:42.54,0:03:43.92,Default,,0000,0000,0000,,¡Funcionó!
Dialogue: 0,0:03:43.92,0:03:46.80,Default,,0000,0000,0000,,Y funciona porque encuentra la función en el prototipo de "Creature".
Dialogue: 0,0:03:46.80,0:03:51.23,Default,,0000,0000,0000,,Intentémoslo borrándolo en "Winston" también.
Dialogue: 0,0:03:51.23,0:03:57.68,Default,,0000,0000,0000,,OK. No funcionó porque dice que no tiene método "talk".
Dialogue: 0,0:03:57.68,0:04:01.26,Default,,0000,0000,0000,,¿Porqué es eso? Bueno, tenemos nuestro constructor "Winston"
Dialogue: 0,0:04:01.26,0:04:03.52,Default,,0000,0000,0000,,y "draw" y eliminamos el "talk".
Dialogue: 0,0:04:03.52,0:04:07.92,Default,,0000,0000,0000,,Bueno, notarás que se nos olvidó decirle al prototipo de "Winston" decirle que se base
Dialogue: 0,0:04:07.92,0:04:09.41,Default,,0000,0000,0000,,en el prototipo de "Creature".
Dialogue: 0,0:04:09.41,0:04:10.71,Default,,0000,0000,0000,,Necesitamos esa línea muy importante
Dialogue: 0,0:04:10.71,0:04:13.04,Default,,0000,0000,0000,,"Winston.prototype=object.create"
Dialogue: 0,0:04:13.04,0:04:15.19,Default,,0000,0000,0000,,"creature.prototype."
Dialogue: 0,0:04:15.19,0:04:19.29,Default,,0000,0000,0000,,:)
Dialogue: 0,0:04:19.29,0:04:20.43,Default,,0000,0000,0000,,Y notamos algo importante.
Dialogue: 0,0:04:20.43,0:04:26.10,Default,,0000,0000,0000,,Tengo ésta línea después de la función constructora pero antes de agregar cualquier otra cosa
Dialogue: 0,0:04:26.10,0:04:28.64,Default,,0000,0000,0000,,al prototipo constructor.
Dialogue: 0,0:04:28.64,0:04:29.33,Default,,0000,0000,0000,,Eso es algo que usualmente quieres hacer.
Dialogue: 0,0:04:29.33,0:04:31.23,Default,,0000,0000,0000,,Debes decírselo justo
Dialogue: 0,0:04:31.23,0:04:33.86,Default,,0000,0000,0000,,cuando empiezas inmediatamente. esto es en lo que se basará tu prototipo inicial
Dialogue: 0,0:04:33.86,0:04:36.80,Default,,0000,0000,0000,,Pero después seguimos agregando mas cosas a su prototipo
Dialogue: 0,0:04:36.80,0:04:41.67,Default,,0000,0000,0000,,Porque podría habar algo que es único a los "Winstons" o "Hoppers"
Dialogue: 0,0:04:41.67,0:04:43.91,Default,,0000,0000,0000,,que no está en los "Creatures".
Dialogue: 0,0:04:43.91,0:04:45.40,Default,,0000,0000,0000,,Y es muy bueno que también puedes definir eso.
Dialogue: 0,0:04:45.40,0:04:50.26,Default,,0000,0000,0000,,Esta bien. Ahora, si miramos esto, todavía hay código repetido
Dialogue: 0,0:04:50.26,0:04:51.52,Default,,0000,0000,0000,,el código constructor.
Dialogue: 0,0:04:51.52,0:04:53.37,Default,,0000,0000,0000,,¿Verdad? Lo tenemos 3 veces.
Dialogue: 0,0:04:53.37,0:04:56.64,Default,,0000,0000,0000,,¿Podríamos borrarlo?
Dialogue: 0,0:04:56.64,0:04:57.84,Default,,0000,0000,0000,,Intentémoslo.
Dialogue: 0,0:04:57.84,0:05:03.51,Default,,0000,0000,0000,,OK. MMM... no parece haber funcionado.
Dialogue: 0,0:05:03.51,0:05:07.34,Default,,0000,0000,0000,,Porque nuestro "Hopper" salió en el rincón superior izquierdo y parece habérsele olvidado lo demás.
Dialogue: 0,0:05:07.34,0:05:15.26,Default,,0000,0000,0000,,Ésto es porque Javascript no asume que quieres el mismo constructor aún si quieres basar el prototipo de allí.
Dialogue: 0,0:05:15.26,0:05:19.36,Default,,0000,0000,0000,,Te permite definir tu propio constructor para éstos objetos.
Dialogue: 0,0:05:19.36,0:05:23.98,Default,,0000,0000,0000,,Pero también te da una forma fácil de llamar un constructor de un objeto.
Dialogue: 0,0:05:23.98,0:05:28.93,Default,,0000,0000,0000,,La forma en que haremos esto es
Dialogue: 0,0:05:28.93,0:05:35.47,Default,,0000,0000,0000,,escribiendo "Creature.call, this, [apodo], [edad], x, y"
Dialogue: 0,0:05:35.47,0:05:40.60,Default,,0000,0000,0000,,Ahora, lo que esto hace (Nota que funciono. ¡Sí!) Y lo que hizo es que
Dialogue: 0,0:05:40.60,0:05:43.68,Default,,0000,0000,0000,,ahora esta llamando la funcion "Creature", su función constructora
Dialogue: 0,0:05:43.68,0:05:50.34,Default,,0000,0000,0000,,Está llamando la función pero esta pasando y diciendo: "OK, debes llamar este constructor como si..
Dialogue: 0,0:05:50.34,0:05:53.76,Default,,0000,0000,0000,,...estuviera siendo llamada del objeto 'Hopper'"
Dialogue: 0,0:05:53.76,0:05:56.97,Default,,0000,0000,0000,,y como si está siendo llamado con éstos argumentos.
Dialogue: 0,0:05:56.97,0:05:59.43,Default,,0000,0000,0000,,Éstos son los argumentos con los que se llamó "Hopper"
Dialogue: 0,0:05:59.43,0:06:03.59,Default,,0000,0000,0000,,Y eso acabará ejecutando el código como si estuviera allí mismo.
Dialogue: 0,0:06:03.59,0:06:05.40,Default,,0000,0000,0000,,Que es lo que queremos. Y funcionó.
Dialogue: 0,0:06:05.40,0:06:09.71,Default,,0000,0000,0000,,y podemos proceder y hacer
Dialogue: 0,0:06:09.71,0:06:11.52,Default,,0000,0000,0000,,una copia de ésta línea en el constructor
Dialogue: 0,0:06:11.52,0:06:13.76,Default,,0000,0000,0000,,de "Winston" también.
Dialogue: 0,0:06:13.76,0:06:16.53,Default,,0000,0000,0000,,Y funciona. :D
Dialogue: 0,0:06:16.53,0:06:24.90,Default,,0000,0000,0000,,Esta bien. Miremos esto. Hemos encapsulado todas nuestras propiedades compartidas y funcionalidades en un solo objeto base, "Creature".
Dialogue: 0,0:06:24.90,0:06:28.21,Default,,0000,0000,0000,,Y hemos hecho 2 tipos de objeto que extienden el objeto base.
Dialogue: 0,0:06:28.21,0:06:30.98,Default,,0000,0000,0000,,Heredan la funcionalidad pero agregan la propia suya también.
Dialogue: 0,0:06:30.98,0:06:36.34,Default,,0000,0000,0000,,Y lo excelente es que podemos cambiar la funcionalidad compartida en un solo lugar
Dialogue: 0,0:06:36.34,0:06:40.30,Default,,0000,0000,0000,,Como si quisiéramos cambiar la edad de nuevo podríamos agregar el texto "years old" (años de edad).
Dialogue: 0,0:06:40.30,0:06:43.91,Default,,0000,0000,0000,,Ahora todos dicen "years old" al final.
Dialogue: 0,0:06:43.91,0:06:49.87,Default,,0000,0000,0000,,O Podríamos la función "talk" y decir "woo". Y Ahora los "Winstons" y "Hoppers" dirían "sup".
Dialogue: 0,0:06:49.87,0:06:57.17,Default,,0000,0000,0000,,Ahora que has visto como crear tipos de objetos y heredar de otros tipos
Dialogue: 0,0:06:57.17,0:07:01.35,Default,,0000,0000,0000,,puedes empezar a pensar en como esto podría ser útil en tus dibujos y animaciones y simulaciones y juegos.
Dialogue: 0,0:07:01.35,0:07:05.26,Default,,0000,0000,0000,,Por ejemplo, talvez tienes un juego y tienes diferentes personaejs en el.
Dialogue: 0,0:07:05.26,0:07:07.68,Default,,0000,0000,0000,,y todos pueden correr pero solo algunos pueden saltar
Dialogue: 0,0:07:07.68,0:07:11.97,Default,,0000,0000,0000,,ese el el perfecto lugar para los tipos de objetos y algo de herencia.
Dialogue: 0,0:07:11.97,0:07:15.97,Default,,0000,0000,0000,,Pero apuesto a que puedes pensar en más formas de hacerlo al igual.