Herencia de Objetos (Version en Video)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Volvimos con nuestro programa que crea Winstons

pero he agregado un nuevo tipo de objeto "Hopper" porque Hopper se sentía un poco

solo. Así ahora defino "Hopper" de la misma forma que defino "Winston", tu sabes,

empezando con la función constructora y tomando las mismas propiedades y después "dibujar"

y después "hablar" y después agrego otro método llamado

"Hooray" porque a los "Hoppers" les gusta celebrar y a los "Winstons" nó.

Ahora, abajo de la función he creado

2 nuevos objetos "Hopper": el pequeño Hopper y el grán Hopper

y los dibujo y llamo la función "talk" (hablar) en uno y "Hooray" en el otro.

Eso es excelente.

Ahora, si vemos éste codigo aquí arriba

notarás algo interesante. Es que

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"

Y después la función "talk" (hablar) es igual al "talk" del Winston.

y ambos tienen función "draw" (dibujar).

así que hay muchas cosas en común acerca de estos dos tipos de objetos

y tiene sentido porque sabes que Hopper y Winston son 2 tipos de objeto muy similares

en nuestro mundo. Si lo consideras, sabes, el mundo real

fuera de la computadora muchos objetos comparten similaridades

con otros tipos de objetos.

Como en el reino animal. Todos los animales

son simliares en algunas formas. Y después tenemos diferentes tipos de animales

como los humanos. Y los humanos comparten esas similarides

pero tambien tienen sos propias similaridades únicas.

Así que podríamos decir que

un animal es un tipo de objeto del cual el tipo de objeto "humano" hereda funcionalidad.

No empezamos de cero, sino agregamos a la funcionalidad que ya tenemos de ser un animal.

como todos los animales que hacen ruido.

pero los humanos tambien tienen lenguaje

Así que este tipo de herencia de objetos

es realmente útil en la programación también.

y podemos crear una cadena de herencia de objetos en nuestro Javascript

Así para hacer esto cuando piensas en

lo que comparten nuestros objetos.

Y se te ocurre un nombre para ella.

porque vamos a crear un nuevo tipo de objeto

que representa el objeto base

así que llamémoslo "Creature" (criatura)

ambos son criaturas

Así que decimos "var creature =" y ahora necesitamos nuestra función constructora.

Vamos y simplemente copiemos la del "Hopper" que igual a la de "Winston"

Está bien

y despues... vamos

ahora quiero...

¿Qué queremos ahora?

Talvez queremos agregar la función de arriba

y solo copiamos la de "Hopper". Pero por supuesto que necesitamos tenerla en el prototipo de la "Creature" en vez de eso.

OK, excelente.

ahora tenemos el tipo de objeto "creature" (criatura).

Pero necesitamos decirle a "Hopper" que debería

basar su funcionalidad según "Creature".

Podemos hacer eso escribiendo ésta línea

y diremos "Hopper.prototype"

es igual a "object.create"

"creature.prototype"

Lo que hace esta linea es decirle a Javascript que base la funcionalidad del prototipo de "Hopper" en la del prototipo de "Creature".

y eso significa que cada vez que busque una función en "Hopper", buscara el prototipo de Hopper

primero, pero si no lo encuentra entonces buscara en el prototipo de "Creature".

Y eso es lo que llamamos una cadena de prototipos.

Ahora, una vez que hemos hecho esto deberíamos de poder borrar la funcion "talk"

en "Hopper"

Porque ya existe en "Creature".

He está mas arriba en la cadena del prototipo.

Listo?

¡Funcionó!

Y funciona porque encuentra la función en el prototipo de "Creature".

Intentémoslo borrándolo en "Winston" también.

OK. No funcionó porque dice que no tiene método "talk".

¿Porqué es eso? Bueno, tenemos nuestro constructor "Winston"

y "draw" y eliminamos el "talk".

Bueno, notarás que se nos olvidó decirle al prototipo de "Winston" decirle que se base

en el prototipo de "Creature".

Necesitamos esa línea muy importante

"Winston.prototype=object.create"

"creature.prototype."

:)

Y notamos algo importante.

Tengo ésta línea después de la función constructora pero antes de agregar cualquier otra cosa

al prototipo constructor.

Eso es algo que usualmente quieres hacer.

Debes decírselo justo

cuando empiezas inmediatamente. esto es en lo que se basará tu prototipo inicial

Pero después seguimos agregando mas cosas a su prototipo

Porque podría habar algo que es único a los "Winstons" o "Hoppers"

que no está en los "Creatures".

Y es muy bueno que también puedes definir eso.

Esta bien. Ahora, si miramos esto, todavía hay código repetido

el código constructor.

¿Verdad? Lo tenemos 3 veces.

¿Podríamos borrarlo?

Intentémoslo.

OK. MMM... no parece haber funcionado.

Porque nuestro "Hopper" salió en el rincón superior izquierdo y parece habérsele olvidado lo demás.

Ésto es porque Javascript no asume que quieres el mismo constructor aún si quieres basar el prototipo de allí.

Te permite definir tu propio constructor para éstos objetos.

Pero también te da una forma fácil de llamar un constructor de un objeto.

La forma en que haremos esto es

escribiendo "Creature.call, this, [apodo], [edad], x, y"

Ahora, lo que esto hace (Nota que funciono. ¡Sí!) Y lo que hizo es que

ahora esta llamando la funcion "Creature", su función constructora

Está llamando la función pero esta pasando y diciendo: "OK, debes llamar este constructor como si..

...estuviera siendo llamada del objeto 'Hopper'"

y como si está siendo llamado con éstos argumentos.

Éstos son los argumentos con los que se llamó "Hopper"

Y eso acabará ejecutando el código como si estuviera allí mismo.

Que es lo que queremos. Y funcionó.

y podemos proceder y hacer

una copia de ésta línea en el constructor

de "Winston" también.

Y funciona. :D

Esta bien. Miremos esto. Hemos encapsulado todas nuestras propiedades compartidas y funcionalidades en un solo objeto base, "Creature".

Y hemos hecho 2 tipos de objeto que extienden el objeto base.

Heredan la funcionalidad pero agregan la propia suya también.

Y lo excelente es que podemos cambiar la funcionalidad compartida en un solo lugar

Como si quisiéramos cambiar la edad de nuevo podríamos agregar el texto "years old" (años de edad).

Ahora todos dicen "years old" al final.

O Podríamos la función "talk" y decir "woo". Y Ahora los "Winstons" y "Hoppers" dirían "sup".

Ahora que has visto como crear tipos de objetos y heredar de otros tipos

puedes empezar a pensar en como esto podría ser útil en tus dibujos y animaciones y simulaciones y juegos.

Por ejemplo, talvez tienes un juego y tienes diferentes personaejs en el.

y todos pueden correr pero solo algunos pueden saltar

ese el el perfecto lugar para los tipos de objetos y algo de herencia.

Pero apuesto a que puedes pensar en más formas de hacerlo al igual.