[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,,Estamos de regreso con nuestro programa para crear "Winstons"
Dialogue: 0,0:00:03.17,0:00:08.80,Default,,0000,0000,0000,,pero añadí un nuevo tipo de objeto "Hooper" porque "Hooper" se sentía un poco solo.
Dialogue: 0,0:00:08.80,0:00:11.92,Default,,0000,0000,0000,,Ahora, defino a "Hooper" de la misma manera que definí a "Winston", ya 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 luego "draw" (dibujar)
Dialogue: 0,0:00:15.84,0:00:19.91,Default,,0000,0000,0000,,y luego "talk" (hablar), y luego también añadí otro método
Dialogue: 0,0:00:19.91,0:00:25.39,Default,,0000,0000,0000,,llamado "Horray" porque a los "Hoppers" realmente le gusta celebrar y a los "Winstons" en realidad no.
Dialogue: 0,0:00:25.39,0:00:27.92,Default,,0000,0000,0000,,Ahora, al final de la función he creado
Dialogue: 0,0:00:27.92,0:00:31.17,Default,,0000,0000,0000,,dos nuevos objetos "Hooper": "Little Hopper" y "Big Hooper",
Dialogue: 0,0:00:31.17,0:00:36.51,Default,,0000,0000,0000,,los dibujo y en uno llamo la función "talk" y en el otro "Horray".
Dialogue: 0,0:00:36.51,0:00:37.51,Default,,0000,0000,0000,,Eso está muy bien.
Dialogue: 0,0:00:37.51,0:00:39.93,Default,,0000,0000,0000,,Ahora, si miramos este código que está aquí arriba
Dialogue: 0,0:00:39.93,0:00:42.31,Default,,0000,0000,0000,,te darás cuenta de algo interesante.
Dialogue: 0,0:00:42.31,0:00:49.32,Default,,0000,0000,0000,,Y es que el código para "Hooper" es muy similar al código para "Winston". Particularmente el constructor.
Dialogue: 0,0:00:49.32,0:00:54.99,Default,,0000,0000,0000,,No se si recuerdes pero básicamente es el mismo código que nuestra función constructora de"Winston".
Dialogue: 0,0:00:54.99,0:01:00.75,Default,,0000,0000,0000,,Y luego en esta función "talk" el código es exactamente el mismo que en la función "talk" de "Winston",
Dialogue: 0,0:01:00.76,0:01:03.90,Default,,0000,0000,0000,,y ambos tienen funciones "draw",
Dialogue: 0,0:01:03.90,0:01:07.27,Default,,0000,0000,0000,,así que tienen muchas cosas en común en estos dos tipos de objetos,
Dialogue: 0,0:01:07.27,0:01:11.34,Default,,0000,0000,0000,,y eso tiene sentido porque ya sabes "Hooper" y "Winston" son dos tipos de objetos muy similares
Dialogue: 0,0:01:11.34,0:01:15.30,Default,,0000,0000,0000,,en nuestro mundo. Si piensas en eso, ya sabes, en el mundo real
Dialogue: 0,0:01:15.30,0:01:20.01,Default,,0000,0000,0000,,fuera de la computadora, muchos tipos de objetos tienen semejanzas
Dialogue: 0,0:01:20.01,0:01:21.29,Default,,0000,0000,0000,,con otros tipos de objetos.
Dialogue: 0,0:01:21.29,0:01:25.48,Default,,0000,0000,0000,,Como en el reino animal. Todos los animales son similares de alguna forma.
Dialogue: 0,0:01:25.48,0:01:29.42,Default,,0000,0000,0000,,Y luego tenemos diferentes tipos de animales como los humanos.
Dialogue: 0,0:01:29.42,0:01:31.59,Default,,0000,0000,0000,,Y los humanos comparten esas similitudes
Dialogue: 0,0:01:31.59,0:01:34.33,Default,,0000,0000,0000,,pero también tiene sus propias similitudes únicas.
Dialogue: 0,0:01:34.33,0:01:35.80,Default,,0000,0000,0000,,Así que podríamos decir que
Dialogue: 0,0:01:35.80,0:01:41.92,Default,,0000,0000,0000,,un animal es un tipo de objeto del que el tipo de objeto humano hereda funcionalidad.
Dialogue: 0,0:01:41.92,0:01:46.86,Default,,0000,0000,0000,,No iniciamos completamente de cero sino que 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 que todos los animales hacen ruidos,
Dialogue: 0,0:01:49.20,0:01:51.41,Default,,0000,0000,0000,,pero los humanos también tienen lenguaje.
Dialogue: 0,0:01:51.41,0:01:54.12,Default,,0000,0000,0000,,Así que este concepto de herencia de objetos
Dialogue: 0,0:01:54.12,0:01:56.38,Default,,0000,0000,0000,,en realidad también es muy útil en programación.
Dialogue: 0,0:01:56.38,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í que para hacer esto cuando piensas
Dialogue: 0,0:02:02.53,0:02:04.42,Default,,0000,0000,0000,,qué es lo que comparten nuestros tipos de objetos,
Dialogue: 0,0:02:04.42,0:02:06.63,Default,,0000,0000,0000,,y tienes un nombre para ello,
Dialogue: 0,0:02:06.63,0:02:08.68,Default,,0000,0000,0000,,porque vamos a crear un 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:13.72,Default,,0000,0000,0000,,así que vamos a llamarle "Creatures" (criaturas). Ambos son criaturas.
Dialogue: 0,0:02:13.72,0:02:17.97,Default,,0000,0000,0000,,Así que decimos "var Creature = ". Y ahora necesitamos nuestra función constructora.
Dialogue: 0,0:02:17.97,0:02:22.81,Default,,0000,0000,0000,,Así que solamente vamos y copiemos la de "Hopper" para que tenga lo mismo que "Winston" tiene.
Dialogue: 0,0:02:22.81,0:02:23.77,Default,,0000,0000,0000,,Muy bien.
Dialogue: 0,0:02:23.77,0:02:26.63,Default,,0000,0000,0000,,Y luego, vamos a ver.
Dialogue: 0,0:02:26.63,0:02:27.79,Default,,0000,0000,0000,,Ahora queremos,
Dialogue: 0,0:02:27.79,0:02:29.42,Default,,0000,0000,0000,,¿Qué es lo que queremos ahora?
Dialogue: 0,0:02:29.42,0:02:32.85,Default,,0000,0000,0000,,Tal vez queremos añadirle la función "talk".
Dialogue: 0,0:02:32.85,0:02:39.73,Default,,0000,0000,0000,,Así que para la función "talk", sólo la copiamos de "Hooper". Pero por supuesto necesitamos que diga "Creature.prototype" en lugar de esto.
Dialogue: 0,0:02:39.73,0:02:41.25,Default,,0000,0000,0000,,Ok, genial.
Dialogue: 0,0:02:41.25,0:02:45.62,Default,,0000,0000,0000,,Así que ahora tenemos este tipo de objeto "Creature".
Dialogue: 0,0:02:45.62,0:02:48.87,Default,,0000,0000,0000,,Pero en realidad necesitamos decirle a "Hooper" que
Dialogue: 0,0:02:48.87,0:02:52.60,Default,,0000,0000,0000,,"Hooper" debe basar su funcionalidad en "Creature".
Dialogue: 0,0:02:52.60,0:02:55.33,Default,,0000,0000,0000,,Así que podemos hacer eso escribiendo esta línea aquí.
Dialogue: 0,0:02:55.33,0:03:02.59,Default,,0000,0000,0000,,Decimos "Hopper.prototype = Object.create"
Dialogue: 0,0:03:02.59,0:03:04.83,Default,,0000,0000,0000,,"(Creature.prototype);"
Dialogue: 0,0:03:04.83,0:03:09.86,Default,,0000,0000,0000,,Entonces, lo que hace esta línea es decirle a Javascript que base el prototipo de "Hopper", es decir,
Dialogue: 0,0:03:09.86,0:03:15.03,Default,,0000,0000,0000,,toda la funcionalidad de "Hopper" en el prototipo de "Creature".
Dialogue: 0,0:03:15.03,0:03:22.31,Default,,0000,0000,0000,,Y entonces esto significa que cada vez que busque una función en "Hooper" buscará primero en el prototipo de "Hooper"
Dialogue: 0,0:03:22.31,0:03:26.78,Default,,0000,0000,0000,,pero si no lo encuentra lo buscará en el prototipo de "Creature".
Dialogue: 0,0:03:26.78,0:03:29.85,Default,,0000,0000,0000,,Y esto es a lo que llamamos cadena de prototipos.
Dialogue: 0,0:03:29.85,0:03:33.93,Default,,0000,0000,0000,,Ahora una vez que hemos hecho esto deberíamos poder borrar la función "talk".
Dialogue: 0,0:03:33.93,0:03:35.33,Default,,0000,0000,0000,,En "Hooper".
Dialogue: 0,0:03:35.33,0:03:37.37,Default,,0000,0000,0000,,Porque ya existe en "Creature".
Dialogue: 0,0:03:37.37,0:03:39.57,Default,,0000,0000,0000,,Que está más arriba en la cadena de prototipos.
Dialogue: 0,0:03:39.57,0:03:41.62,Default,,0000,0000,0000,,¿Listo? ¡Tan tan tan!
Dialogue: 0,0:03:41.62,0:03:42.86,Default,,0000,0000,0000,,¡Funcionó!
Dialogue: 0,0:03:42.86,0:03:48.95,Default,,0000,0000,0000,,Y funcionó porque encuentra la función en el prototipo de "Creature".
Dialogue: 0,0:03:48.95,0:03:53.67,Default,,0000,0000,0000,,Mmm. Así que tratemos de borrarla de "Winston" también.
Dialogue: 0,0:03:53.67,0:03:57.86,Default,,0000,0000,0000,,Ok. No funcionó, nos dice que el objeto no tiene método "talk".
Dialogue: 0,0:03:57.86,0:04:00.89,Default,,0000,0000,0000,,¿Y por qué es eso? Bueno, tenemos nuestro constructor de "Winston",
Dialogue: 0,0:04:00.89,0:04:02.85,Default,,0000,0000,0000,,y "draw" y borramos la función "talk".
Dialogue: 0,0:04:02.85,0:04:07.12,Default,,0000,0000,0000,,Bueno, notarás que en realidad olvidamos decirle que el prototipo de "Winston" debe estar basado
Dialogue: 0,0:04:07.12,0:04:08.47,Default,,0000,0000,0000,,en el prototipo de "Creature".
Dialogue: 0,0:04:08.47,0:04:10.23,Default,,0000,0000,0000,,Así que necesitamos esa línea tan importante.
Dialogue: 0,0:04:10.23,0:04:13.57,Default,,0000,0000,0000,,"Winston.prototype = Object.create"
Dialogue: 0,0:04:13.57,0:04:18.04,Default,,0000,0000,0000,,"(Creature.prototype);"
Dialogue: 0,0:04:18.04,0:04:18.97,Default,,0000,0000,0000,,¡Tan tan!
Dialogue: 0,0:04:18.97,0:04:20.53,Default,,0000,0000,0000,,Y fíjense en algo importante.
Dialogue: 0,0:04:20.53,0:04:25.40,Default,,0000,0000,0000,,Tengo esta línea después de la función constructora pero antes de añadir cualquier cosa
Dialogue: 0,0:04:25.40,0:04:27.15,Default,,0000,0000,0000,,al prototipo de "Winston".
Dialogue: 0,0:04:27.15,0:04:28.64,Default,,0000,0000,0000,,Eso es lo que generalmente quieres hacer.
Dialogue: 0,0:04:28.64,0:04:30.76,Default,,0000,0000,0000,,Quieres decírselo inmediatamente cuando empiezas
Dialogue: 0,0:04:30.76,0:04:34.27,Default,,0000,0000,0000,,en esto se basa tu prototipo inicial.
Dialogue: 0,0:04:34.27,0:04:37.30,Default,,0000,0000,0000,,Pero luego seguimos añadiendo más cosas al prototipo.
Dialogue: 0,0:04:37.30,0:04:41.82,Default,,0000,0000,0000,,Porque habrá alguna cosa que es única a los "Winstons" o única a los "Hoopers"
Dialogue: 0,0:04:41.82,0:04:42.95,Default,,0000,0000,0000,,que no tiene los "Creatures".
Dialogue: 0,0:04:42.95,0:04:46.32,Default,,0000,0000,0000,,Y es genial que puedas definir esas cosas.
Dialogue: 0,0:04:46.32,0:04:49.84,Default,,0000,0000,0000,,Muy bien. Ahora, si miramos esto, todavía tenemos código repetido.
Dialogue: 0,0:04:49.84,0:04:51.30,Default,,0000,0000,0000,,El código constructor.
Dialogue: 0,0:04:51.30,0:04:54.18,Default,,0000,0000,0000,,¿Cierto? Tenemos todo esto tres veces.
Dialogue: 0,0:04:54.18,0:04:58.06,Default,,0000,0000,0000,,¿Podríamos simplemente borrarlo?
Dialogue: 0,0:04:58.06,0:05:01.05,Default,,0000,0000,0000,,Tratemos.
Dialogue: 0,0:05:01.05,0:05:03.67,Default,,0000,0000,0000,,Ok, mmm. No parece haber funcionado.
Dialogue: 0,0:05:03.67,0:05:07.96,Default,,0000,0000,0000,,Porque nuestro "Hooper" aparece en la esquina superior izquierda, parece que olvidó todo sobre él.
Dialogue: 0,0:05:07.96,0:05:16.23,Default,,0000,0000,0000,,Y esto es porque Javascript no asume que quieres el mismo constructor incluso si quieres basar el prototipo en él.
Dialogue: 0,0:05:16.23,0:05:19.30,Default,,0000,0000,0000,,Ya sabes, te permite definir tu propio constructor para esos objetos.
Dialogue: 0,0:05:19.30,0:05:26.02,Default,,0000,0000,0000,,Pero también te da una forma fácil de llamar al constructor de un objeto.
Dialogue: 0,0:05:26.02,0:05:27.65,Default,,0000,0000,0000,,Así que la forma en que haremos esto es
Dialogue: 0,0:05:27.65,0:05:36.66,Default,,0000,0000,0000,,escribiendo "Creature.call(this, nickname, age, x, y);"
Dialogue: 0,0:05:36.66,0:05:40.78,Default,,0000,0000,0000,,Ahora, lo que esto hace (Nota que funcionó. Sí), lo que hizo es
Dialogue: 0,0:05:40.78,0:05:44.27,Default,,0000,0000,0000,,que en realidad está llamando a la función "Creature", la función constructora.
Dialogue: 0,0:05:44.27,0:05:50.33,Default,,0000,0000,0000,,Está llamando esa función pero está pasando y está diciendo: "ok, debes llamar la función constructora como
Dialogue: 0,0:05:50.33,0:05:54.35,Default,,0000,0000,0000,,si la estuviera llamando este objeto 'Hooper'
Dialogue: 0,0:05:54.35,0:05:57.00,Default,,0000,0000,0000,,y como si la estuviera llamando con estos argumentos".
Dialogue: 0,0:05:57.00,0:05:59.50,Default,,0000,0000,0000,,Estos son argumentos con los que se llamó "Hooper".
Dialogue: 0,0:05:59.50,0:06:03.80,Default,,0000,0000,0000,,Y terminará ejecutando este código como si estuviera justo aquí.
Dialogue: 0,0:06:03.80,0:06:06.49,Default,,0000,0000,0000,,Y es exactamente lo que queremos. Y funcionó.
Dialogue: 0,0:06:06.49,0:06:07.83,Default,,0000,0000,0000,,Y podemos continuar y
Dialogue: 0,0:06:07.83,0:06:11.68,Default,,0000,0000,0000,,copiar esta línea en la función constructora
Dialogue: 0,0:06:11.68,0:06:15.16,Default,,0000,0000,0000,,de "Winston" también.
Dialogue: 0,0:06:15.16,0:06:17.09,Default,,0000,0000,0000,,Y funcionó. ¡Sí!
Dialogue: 0,0:06:17.09,0:06:22.18,Default,,0000,0000,0000,,Muy bien. Revisemos esto. Hemos encapsulado todas nuestras propiedades compartidas y funcionalidades
Dialogue: 0,0:06:22.18,0:06:24.67,Default,,0000,0000,0000,,en este tipo de objeto base, "Creature".
Dialogue: 0,0:06:24.67,0:06:28.41,Default,,0000,0000,0000,,Y hemos hecho dos tipos de objeto que provienen de este tipo de objeto base.
Dialogue: 0,0:06:28.41,0:06:31.40,Default,,0000,0000,0000,,Ellos heredan la funcionalidad pero añaden la suya propia también.
Dialogue: 0,0:06:31.40,0:06:36.26,Default,,0000,0000,0000,,Y lo interesante de esto es que podemos cambiar la funcionalidad compartida en un sólo lugar.
Dialogue: 0,0:06:36.26,0:06:41.37,Default,,0000,0000,0000,,Como si quisiéramos cambiar la edad de nuevo, podríamos decir más "years old" (años de edad).
Dialogue: 0,0:06:41.37,0:06:44.11,Default,,0000,0000,0000,,Ahora todos tienen "years old" al final.
Dialogue: 0,0:06:44.11,0:06:53.18,Default,,0000,0000,0000,,O podríamos cambiar la función "talk" y poner "SUPPP!?!?!?!?". Y ahora los "Winstons" y los "Hoopers" dirán "SUP".
Dialogue: 0,0:06:53.18,0:06:56.78,Default,,0000,0000,0000,,Entonces, ahora has visto como crear tipos de objetos y heredar de los tipos de objetos,
Dialogue: 0,0:06:56.78,0:07:01.46,Default,,0000,0000,0000,,puedes empezar a pensar cómo sería útil esto en tus dibujos, animaciones, simulaciones y juegos.
Dialogue: 0,0:07:01.46,0:07:05.05,Default,,0000,0000,0000,,Por ejemplo, tal vez tienes un juego y tienes muchos tipos de personajes en él,
Dialogue: 0,0:07:05.05,0:07:07.45,Default,,0000,0000,0000,,y todos ellos pueden correr pero sólo algunos de ellos pueden saltar.
Dialogue: 0,0:07:07.45,0:07:12.07,Default,,0000,0000,0000,,Ese es un lugar perfecto para usar algunos tipos de objetos y algo de herencia.
Dialogue: 0,0:07:12.07,0:07:15.63,Default,,0000,0000,0000,,Pero apuesto a que puedes pensar en muchas más formas de hacerlo.