WEBVTT

00:00:01.187 --> 00:00:03.173
Estamos de regreso con nuestro programa para crear "Winstons"

00:00:03.173 --> 00:00:08.799
pero añadí un nuevo tipo de objeto "Hooper" porque "Hooper" se sentía un poco solo.

00:00:08.799 --> 00:00:11.924
Ahora, defino a "Hooper" de la misma manera que definí a "Winston", ya sabes,

00:00:11.924 --> 00:00:15.843
empezando con la función constructora y tomando las mismas propiedades y luego "draw" (dibujar)

00:00:15.843 --> 00:00:19.908
y luego "talk" (hablar), y luego también añadí otro método

00:00:19.908 --> 00:00:25.388
llamado "Horray" porque a los "Hoppers" realmente le gusta celebrar y a los "Winstons" en realidad no.

00:00:25.388 --> 00:00:27.924
Ahora, al final de la función he creado

00:00:27.924 --> 00:00:31.174
dos nuevos objetos "Hooper": "Little Hopper" y "Big Hooper",

00:00:31.174 --> 00:00:36.507
los dibujo y en uno llamo la función "talk" y en el otro "Horray".

00:00:36.507 --> 00:00:37.508
Eso está muy bien.

00:00:37.508 --> 00:00:39.928
Ahora, si miramos este código que está aquí arriba

00:00:39.928 --> 00:00:42.313
te darás cuenta de algo interesante.

00:00:42.313 --> 00:00:49.324
Y es que el código para "Hooper" es muy similar al código para "Winston". Particularmente el constructor.

00:00:49.324 --> 00:00:54.994
No se si recuerdes pero básicamente es el mismo código que nuestra función constructora de"Winston".

00:00:54.994 --> 00:01:00.748
Y luego en esta función "talk" el código es exactamente el mismo que en la función "talk" de "Winston",

00:01:00.763 --> 00:01:03.897
y ambos tienen funciones "draw",

00:01:03.897 --> 00:01:07.272
así que tienen muchas cosas en común en estos dos tipos de objetos,

00:01:07.272 --> 00:01:11.341
y eso tiene sentido porque ya sabes "Hooper" y "Winston" son dos tipos de objetos muy similares

00:01:11.341 --> 00:01:15.299
en nuestro mundo. Si piensas en eso, ya sabes, en el mundo real

00:01:15.299 --> 00:01:20.009
fuera de la computadora, muchos tipos de objetos tienen semejanzas

00:01:20.009 --> 00:01:21.293
con otros tipos de objetos.

00:01:21.293 --> 00:01:25.483
Como en el reino animal. Todos los animales son similares de alguna forma.

00:01:25.483 --> 00:01:29.422
Y luego tenemos diferentes tipos de animales como los humanos.

00:01:29.422 --> 00:01:31.588
Y los humanos comparten esas similitudes

00:01:31.588 --> 00:01:34.331
pero también tiene sus propias similitudes únicas.

00:01:34.331 --> 00:01:35.800
Así que podríamos decir que

00:01:35.800 --> 00:01:41.917
un animal es un tipo de objeto del que el tipo de objeto humano hereda funcionalidad.

00:01:41.917 --> 00:01:46.864
No iniciamos completamente de cero sino que agregamos a la funcionalidad que ya tenemos de ser un animal.

00:01:46.864 --> 00:01:49.196
Como que todos los animales hacen ruidos,

00:01:49.196 --> 00:01:51.407
pero los humanos también tienen lenguaje.

00:01:51.407 --> 00:01:54.123
Así que este concepto de herencia de objetos

00:01:54.123 --> 00:01:56.385
en realidad también es muy útil en programación.

00:01:56.385 --> 00:01:59.865
Y podemos crear una cadena de herencia de objetos en nuestro Javascript.

00:01:59.865 --> 00:02:02.529
Así que para hacer esto cuando piensas

00:02:02.529 --> 00:02:04.425
qué es lo que comparten nuestros tipos de objetos,

00:02:04.425 --> 00:02:06.633
y tienes un nombre para ello,

00:02:06.633 --> 00:02:08.675
porque vamos a crear un tipo de objeto

00:02:08.675 --> 00:02:10.576
que representa el objeto base

00:02:10.576 --> 00:02:13.724
así que vamos a llamarle "Creatures" (criaturas). Ambos son criaturas.

00:02:13.724 --> 00:02:17.973
Así que decimos "var Creature = ". Y ahora necesitamos nuestra función constructora.

00:02:17.973 --> 00:02:22.811
Así que solamente vamos y copiemos la de "Hopper" para que tenga lo mismo que "Winston" tiene.

00:02:22.811 --> 00:02:23.772
Muy bien.

00:02:23.772 --> 00:02:26.632
Y luego, vamos a ver.

00:02:26.632 --> 00:02:27.792
Ahora queremos,

00:02:27.792 --> 00:02:29.425
¿Qué es lo que queremos ahora?

00:02:29.425 --> 00:02:32.846
Tal vez queremos añadirle la función "talk".

00:02:32.846 --> 00:02:39.726
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.

00:02:39.726 --> 00:02:41.253
Ok, genial.

00:02:41.253 --> 00:02:45.623
Así que ahora tenemos este tipo de objeto "Creature".

00:02:45.623 --> 00:02:48.870
Pero en realidad necesitamos decirle a "Hooper" que

00:02:48.870 --> 00:02:52.600
"Hooper" debe basar su funcionalidad en "Creature".

00:02:52.600 --> 00:02:55.331
Así que podemos hacer eso escribiendo esta línea aquí.

00:02:55.331 --> 00:03:02.589
Decimos "Hopper.prototype = Object.create"

00:03:02.589 --> 00:03:04.827
"(Creature.prototype);"

00:03:04.827 --> 00:03:09.857
Entonces, lo que hace esta línea es decirle a Javascript que base el prototipo de "Hopper", es decir,

00:03:09.857 --> 00:03:15.027
toda la funcionalidad de "Hopper" en el prototipo de "Creature".

00:03:15.027 --> 00:03:22.307
Y entonces esto significa que cada vez que busque una función en "Hooper" buscará primero en el prototipo de "Hooper"

00:03:22.307 --> 00:03:26.782
pero si no lo encuentra lo buscará en el prototipo de "Creature".

00:03:26.782 --> 00:03:29.849
Y esto es a lo que llamamos cadena de prototipos.

00:03:29.849 --> 00:03:33.926
Ahora una vez que hemos hecho esto deberíamos poder borrar la función "talk".

00:03:33.926 --> 00:03:35.332
En "Hooper".

00:03:35.332 --> 00:03:37.374
Porque ya existe en "Creature".

00:03:37.374 --> 00:03:39.572
Que está más arriba en la cadena de prototipos.

00:03:39.572 --> 00:03:41.621
¿Listo? ¡Tan tan tan!

00:03:41.621 --> 00:03:42.861
¡Funcionó!

00:03:42.861 --> 00:03:48.954
Y funcionó porque encuentra la función en el prototipo de "Creature".

00:03:48.954 --> 00:03:53.674
Mmm. Así que tratemos de borrarla de "Winston" también.

00:03:53.674 --> 00:03:57.864
Ok. No funcionó, nos dice que el objeto no tiene método "talk".

00:03:57.864 --> 00:04:00.890
¿Y por qué es eso? Bueno, tenemos nuestro constructor de "Winston",

00:04:00.890 --> 00:04:02.853
y "draw" y borramos la función "talk".

00:04:02.853 --> 00:04:07.117
Bueno, notarás que en realidad olvidamos decirle que el prototipo de "Winston" debe estar basado

00:04:07.117 --> 00:04:08.474
en el prototipo de "Creature".

00:04:08.474 --> 00:04:10.229
Así que necesitamos esa línea tan importante.

00:04:10.229 --> 00:04:13.571
"Winston.prototype = Object.create"

00:04:13.571 --> 00:04:18.043
"(Creature.prototype);"

00:04:18.043 --> 00:04:18.974
¡Tan tan!

00:04:18.974 --> 00:04:20.530
Y fíjense en algo importante.

00:04:20.530 --> 00:04:25.396
Tengo esta línea después de la función constructora pero antes de añadir cualquier cosa

00:04:25.396 --> 00:04:27.147
al prototipo de "Winston".

00:04:27.147 --> 00:04:28.638
Eso es lo que generalmente quieres hacer.

00:04:28.638 --> 00:04:30.764
Quieres decírselo inmediatamente cuando empiezas

00:04:30.764 --> 00:04:34.270
en esto se basa tu prototipo inicial.

00:04:34.270 --> 00:04:37.300
Pero luego seguimos añadiendo más cosas al prototipo.

00:04:37.300 --> 00:04:41.824
Porque habrá alguna cosa que es única a los "Winstons" o única a los "Hoopers"

00:04:41.824 --> 00:04:42.953
que no tiene los "Creatures".

00:04:42.953 --> 00:04:46.319
Y es genial que puedas definir esas cosas.

00:04:46.319 --> 00:04:49.845
Muy bien. Ahora, si miramos esto, todavía tenemos código repetido.

00:04:49.845 --> 00:04:51.296
El código constructor.

00:04:51.296 --> 00:04:54.184
¿Cierto? Tenemos todo esto tres veces.

00:04:54.184 --> 00:04:58.056
¿Podríamos simplemente borrarlo?

00:04:58.056 --> 00:05:01.048
Tratemos.

00:05:01.048 --> 00:05:03.670
Ok, mmm. No parece haber funcionado.

00:05:03.670 --> 00:05:07.959
Porque nuestro "Hooper" aparece en la esquina superior izquierda, parece que olvidó todo sobre él.

00:05:07.959 --> 00:05:16.230
Y esto es porque Javascript no asume que quieres el mismo constructor incluso si quieres basar el prototipo en él.

00:05:16.230 --> 00:05:19.304
Ya sabes, te permite definir tu propio constructor para esos objetos.

00:05:19.304 --> 00:05:26.019
Pero también te da una forma fácil de llamar al constructor de un objeto.

00:05:26.019 --> 00:05:27.648
Así que la forma en que haremos esto es

00:05:27.648 --> 00:05:36.656
escribiendo "Creature.call(this, nickname, age, x, y);"

00:05:36.656 --> 00:05:40.780
Ahora, lo que esto hace (Nota que funcionó. Sí), lo que hizo es

00:05:40.780 --> 00:05:44.268
que en realidad está llamando a la función "Creature", la función constructora.

00:05:44.268 --> 00:05:50.329
Está llamando esa función pero está pasando y está diciendo: "ok, debes llamar la función constructora como

00:05:50.329 --> 00:05:54.349
si la estuviera llamando este objeto 'Hooper'

00:05:54.349 --> 00:05:57.004
y como si la estuviera llamando con estos argumentos".

00:05:57.004 --> 00:05:59.498
Estos son argumentos con los que se llamó "Hooper".

00:05:59.498 --> 00:06:03.797
Y terminará ejecutando este código como si estuviera justo aquí.

00:06:03.797 --> 00:06:06.489
Y es exactamente lo que queremos. Y funcionó.

00:06:06.489 --> 00:06:07.827
Y podemos continuar y

00:06:07.827 --> 00:06:11.679
copiar esta línea en la función constructora

00:06:11.679 --> 00:06:15.165
de "Winston" también.

00:06:15.165 --> 00:06:17.087
Y funcionó. ¡Sí!

00:06:17.087 --> 00:06:22.177
Muy bien. Revisemos esto. Hemos encapsulado todas nuestras propiedades compartidas y funcionalidades

00:06:22.177 --> 00:06:24.671
en este tipo de objeto base, "Creature".

00:06:24.671 --> 00:06:28.411
Y hemos hecho dos tipos de objeto que provienen de este tipo de objeto base.

00:06:28.411 --> 00:06:31.397
Ellos heredan la funcionalidad pero añaden la suya propia también.

00:06:31.397 --> 00:06:36.261
Y lo interesante de esto es que podemos cambiar la funcionalidad compartida en un sólo lugar.

00:06:36.261 --> 00:06:41.369
Como si quisiéramos cambiar la edad de nuevo, podríamos decir más "years old" (años de edad).

00:06:41.369 --> 00:06:44.112
Ahora todos tienen "years old" al final.

00:06:44.112 --> 00:06:53.178
O podríamos cambiar la función "talk" y poner "SUPPP!?!?!?!?". Y ahora los "Winstons" y los "Hoopers" dirán "SUP".

00:06:53.178 --> 00:06:56.781
Entonces, ahora has visto como crear tipos de objetos y heredar de los tipos de objetos,

00:06:56.781 --> 00:07:01.464
puedes empezar a pensar cómo sería útil esto en tus dibujos, animaciones, simulaciones y juegos.

00:07:01.464 --> 00:07:05.048
Por ejemplo, tal vez tienes un juego y tienes muchos tipos de personajes en él,

00:07:05.048 --> 00:07:07.447
y todos ellos pueden correr pero sólo algunos de ellos pueden saltar.

00:07:07.447 --> 00:07:12.073
Ese es un lugar perfecto para usar algunos tipos de objetos y algo de herencia.

00:07:12.073 --> 00:07:15.630
Pero apuesto a que puedes pensar en muchas más formas de hacerlo.