WEBVTT

00:00:01.187 --> 00:00:03.173
Volvimos con nuestro programa que crea Winstons

00:00:03.173 --> 00:00:07.589
pero he agregado un nuevo tipo de objeto "Hopper" porque Hopper se sentía un poco

00:00:07.589 --> 00:00:11.924
solo. Así ahora defino "Hopper" de la misma forma que defino "Winston", tu sabes,

00:00:11.924 --> 00:00:15.843
empezando con la función constructora y tomando las mismas propiedades y después "dibujar"

00:00:15.843 --> 00:00:20.498
y después "hablar" y después agrego otro método llamado

00:00:20.498 --> 00:00:23.808
"Hooray" porque a los "Hoppers" les gusta celebrar y a los "Winstons" nó.

00:00:23.808 --> 00:00:27.924
Ahora, abajo de la función he creado

00:00:27.924 --> 00:00:31.174
2 nuevos objetos "Hopper": el pequeño Hopper y el grán Hopper

00:00:31.174 --> 00:00:35.347
y los dibujo y llamo la función "talk" (hablar) en uno y "Hooray" en el otro.

00:00:35.347 --> 00:00:37.508
Eso es excelente.

00:00:37.508 --> 00:00:39.928
Ahora, si vemos éste codigo aquí arriba

00:00:39.928 --> 00:00:41.823
notarás algo interesante. Es que

00:00:41.973 --> 00:00:52.324
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"

00:00:52.324 --> 00:01:00.748
Y después la función "talk" (hablar) es igual al "talk" del Winston.

00:01:00.763 --> 00:01:03.897
y ambos tienen función "draw" (dibujar).

00:01:03.897 --> 00:01:07.922
así que hay muchas cosas en común acerca de estos dos tipos de objetos

00:01:07.922 --> 00:01:11.341
y tiene sentido porque sabes que Hopper y Winston son 2 tipos de objeto muy similares

00:01:11.341 --> 00:01:15.299
en nuestro mundo. Si lo consideras, sabes, el mundo real

00:01:15.299 --> 00:01:20.009
fuera de la computadora muchos objetos comparten similaridades

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

00:01:21.423 --> 00:01:23.643
Como en el reino animal. Todos los animales

00:01:23.643 --> 00:01:26.812
son simliares en algunas formas. Y después tenemos diferentes tipos de animales

00:01:26.812 --> 00:01:31.588
como los humanos. Y los humanos comparten esas similarides

00:01:31.588 --> 00:01:34.331
pero tambien tienen sos propias similaridades únicas.

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

00:01:36.205 --> 00:01:38.967
un animal es un tipo de objeto del cual el tipo de objeto "humano" hereda funcionalidad.

00:01:38.967 --> 00:01:46.864
No empezamos de cero, sino agregamos a la funcionalidad que ya tenemos de ser un animal.

00:01:46.864 --> 00:01:49.196
como todos los animales que hacen ruido.

00:01:49.196 --> 00:01:51.407
pero los humanos tambien tienen lenguaje

00:01:51.407 --> 00:01:54.673
Así que este tipo de herencia de objetos

00:01:54.673 --> 00:01:56.695
es realmente útil en la programación también.

00:01:56.695 --> 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í para hacer esto cuando piensas en

00:02:02.529 --> 00:02:04.425
lo que comparten nuestros objetos.

00:02:04.425 --> 00:02:06.633
Y se te ocurre un nombre para ella.

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

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

00:02:10.576 --> 00:02:12.094
así que llamémoslo "Creature" (criatura)

00:02:12.094 --> 00:02:13.873
ambos son criaturas

00:02:13.873 --> 00:02:17.831
Así que decimos "var creature =" y ahora necesitamos nuestra función constructora.

00:02:17.831 --> 00:02:22.342
Vamos y simplemente copiemos la del "Hopper" que igual a la de "Winston"

00:02:22.342 --> 00:02:23.762
Está bien

00:02:23.762 --> 00:02:27.172
y despues... vamos

00:02:27.172 --> 00:02:28.135
ahora quiero...

00:02:28.135 --> 00:02:29.506
¿Qué queremos ahora?

00:02:29.506 --> 00:02:31.966
Talvez queremos agregar la función de arriba

00:02:31.966 --> 00:02:39.303
y solo copiamos la de "Hopper". Pero por supuesto que necesitamos tenerla en el prototipo de la "Creature" en vez de eso.

00:02:39.303 --> 00:02:41.683
OK, excelente.

00:02:41.683 --> 00:02:45.300
ahora tenemos el tipo de objeto "creature" (criatura).

00:02:45.300 --> 00:02:47.810
Pero necesitamos decirle a "Hopper" que debería

00:02:47.810 --> 00:02:51.141
basar su funcionalidad según "Creature".

00:02:51.248 --> 00:02:51.249
Podemos hacer eso escribiendo ésta línea

00:02:53.816 --> 00:02:58.595
y diremos "Hopper.prototype"

00:02:58.595 --> 00:03:01.967
es igual a "object.create"

00:03:01.967 --> 00:03:04.977
"creature.prototype"

00:03:04.977 --> 00:03:14.197
Lo que hace esta linea es decirle a Javascript que base la funcionalidad del prototipo de "Hopper" en la del prototipo de "Creature".

00:03:14.197 --> 00:03:22.342
y eso significa que cada vez que busque una función en "Hopper", buscara el prototipo de Hopper

00:03:22.342 --> 00:03:26.429
primero, pero si no lo encuentra entonces buscara en el prototipo de "Creature".

00:03:26.429 --> 00:03:29.196
Y eso es lo que llamamos una cadena de prototipos.

00:03:29.196 --> 00:03:34.032
Ahora, una vez que hemos hecho esto deberíamos de poder borrar la funcion "talk"

00:03:34.032 --> 00:03:35.634
en "Hopper"

00:03:35.634 --> 00:03:38.302
Porque ya existe en "Creature".

00:03:38.302 --> 00:03:40.231
He está mas arriba en la cadena del prototipo.

00:03:40.231 --> 00:03:42.541
Listo?

00:03:42.541 --> 00:03:43.924
¡Funcionó!

00:03:43.924 --> 00:03:46.804
Y funciona porque encuentra la función en el prototipo de "Creature".

00:03:46.804 --> 00:03:51.234
Intentémoslo borrándolo en "Winston" también.

00:03:51.234 --> 00:03:57.680
OK. No funcionó porque dice que no tiene método "talk".

00:03:57.680 --> 00:04:01.263
¿Porqué es eso? Bueno, tenemos nuestro constructor "Winston"

00:04:01.263 --> 00:04:03.517
y "draw" y eliminamos el "talk".

00:04:03.517 --> 00:04:07.924
Bueno, notarás que se nos olvidó decirle al prototipo de "Winston" decirle que se base

00:04:07.924 --> 00:04:09.409
en el prototipo de "Creature".

00:04:09.409 --> 00:04:10.711
Necesitamos esa línea muy importante

00:04:10.711 --> 00:04:13.043
"Winston.prototype=object.create"

00:04:13.043 --> 00:04:15.194
"creature.prototype."

00:04:15.194 --> 00:04:19.290
:)

00:04:19.290 --> 00:04:20.426
Y notamos algo importante.

00:04:20.426 --> 00:04:26.097
Tengo ésta línea después de la función constructora pero antes de agregar cualquier otra cosa

00:04:26.097 --> 00:04:28.638
al prototipo constructor.

00:04:28.638 --> 00:04:29.334
Eso es algo que usualmente quieres hacer.

00:04:29.334 --> 00:04:31.230
Debes decírselo justo

00:04:31.230 --> 00:04:33.860
cuando empiezas inmediatamente. esto es en lo que se basará tu prototipo inicial

00:04:33.860 --> 00:04:36.804
Pero después seguimos agregando mas cosas a su prototipo

00:04:36.804 --> 00:04:41.673
Porque podría habar algo que es único a los "Winstons" o "Hoppers"

00:04:41.673 --> 00:04:43.909
que no está en los "Creatures".

00:04:43.909 --> 00:04:45.405
Y es muy bueno que también puedes definir eso.

00:04:45.405 --> 00:04:50.256
Esta bien. Ahora, si miramos esto, todavía hay código repetido

00:04:50.256 --> 00:04:51.524
el código constructor.

00:04:51.524 --> 00:04:53.366
¿Verdad? Lo tenemos 3 veces.

00:04:53.366 --> 00:04:56.638
¿Podríamos borrarlo?

00:04:56.638 --> 00:04:57.840
Intentémoslo.

00:04:57.840 --> 00:05:03.509
OK. MMM... no parece haber funcionado.

00:05:03.509 --> 00:05:07.340
Porque nuestro "Hopper" salió en el rincón superior izquierdo y parece habérsele olvidado lo demás.

00:05:07.340 --> 00:05:15.264
Ésto es porque Javascript no asume que quieres el mismo constructor aún si quieres basar el prototipo de allí.

00:05:15.264 --> 00:05:19.359
Te permite definir tu propio constructor para éstos objetos.

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

00:05:23.978 --> 00:05:28.926
La forma en que haremos esto es

00:05:28.926 --> 00:05:35.470
escribiendo "Creature.call, this, [apodo], [edad], x, y"

00:05:35.470 --> 00:05:40.598
Ahora, lo que esto hace (Nota que funciono. ¡Sí!) Y lo que hizo es que

00:05:40.598 --> 00:05:43.679
ahora esta llamando la funcion "Creature", su función constructora

00:05:43.679 --> 00:05:50.339
Está llamando la función pero esta pasando y diciendo: "OK, debes llamar este constructor como si..

00:05:50.339 --> 00:05:53.764
...estuviera siendo llamada del objeto 'Hopper'"

00:05:53.764 --> 00:05:56.968
y como si está siendo llamado con éstos argumentos.

00:05:56.968 --> 00:05:59.427
Éstos son los argumentos con los que se llamó "Hopper"

00:05:59.427 --> 00:06:03.589
Y eso acabará ejecutando el código como si estuviera allí mismo.

00:06:03.589 --> 00:06:05.397
Que es lo que queremos. Y funcionó.

00:06:05.397 --> 00:06:09.709
y podemos proceder y hacer

00:06:09.709 --> 00:06:11.515
una copia de ésta línea en el constructor

00:06:11.515 --> 00:06:13.757
de "Winston" también.

00:06:13.757 --> 00:06:16.531
Y funciona. :D

00:06:16.531 --> 00:06:24.901
Esta bien. Miremos esto. Hemos encapsulado todas nuestras propiedades compartidas y funcionalidades en un solo objeto base, "Creature".

00:06:24.901 --> 00:06:28.207
Y hemos hecho 2 tipos de objeto que extienden el objeto base.

00:06:28.207 --> 00:06:30.981
Heredan la funcionalidad pero agregan la propia suya también.

00:06:30.981 --> 00:06:36.339
Y lo excelente es que podemos cambiar la funcionalidad compartida en un solo lugar

00:06:36.339 --> 00:06:40.302
Como si quisiéramos cambiar la edad de nuevo podríamos agregar el texto "years old" (años de edad).

00:06:40.302 --> 00:06:43.908
Ahora todos dicen "years old" al final.

00:06:43.908 --> 00:06:49.871
O Podríamos la función "talk" y decir "woo". Y Ahora los "Winstons" y "Hoppers" dirían "sup".

00:06:49.871 --> 00:06:57.174
Ahora que has visto como crear tipos de objetos y heredar de otros tipos

00:06:57.174 --> 00:07:01.348
puedes empezar a pensar en como esto podría ser útil en tus dibujos y animaciones y simulaciones y juegos.

00:07:01.348 --> 00:07:05.257
Por ejemplo, talvez tienes un juego y tienes diferentes personaejs en el.

00:07:05.257 --> 00:07:07.683
y todos pueden correr pero solo algunos pueden saltar

00:07:07.683 --> 00:07:11.970
ese el el perfecto lugar para los tipos de objetos y algo de herencia.

00:07:11.970 --> 00:07:15.970
Pero apuesto a que puedes pensar en más formas de hacerlo al igual.