La verdad oculta sobre las clases en JavaScript

Clase 27 de 55 • Fundamentos de JavaScript 2018

Contenido del curso

Introducción al curso

Primeros pasos en JavaScript

Estructuras de Control y Funciones

Arrays

Programación Orientada a Objetos en JavaScript

Asincronismo

Juego de HTML

Complementos

Tomar examen

Resumen

Los objetos en JavaScript son "contenedores" dinámicos de propiedades. Estos objetos poseen un enlace a un objeto prototipo. Cuando intentamos acceder a la propiedad de un objeto, la propiedad no sólo se busca en el propio objeto sino también en el prototipo del objeto, en el prototipo del prototipo, y así sucesivamente hasta que se encuentre una propiedad que coincida con el nombre o se alcance el final de la cadena de prototipos.

Comentarios

Emerson Cedeño

student•

esto de la herencia prototipal es todo un engendro diabólico! :-/

Jonatan Padilla

student•

Definitivamente

Daniel Vaca

student•

No lo pudiste haber dicho mejor!

Diego Quiroz

student•

Les dejo mi explicación de todo el rollo de esta clase con todo y un ejemplo con autos: Los objetos en JS son como cualquier objeto en otro lenguaje de programación; sin embargo, tienen un approach algo diferente. Primero que nada, un objeto en JS sigue la nomenclatura JSON y la cual está basada en una estructura computacional llamada HashMap que permite el acceso a los datos de manera MUY rápida con solo llamar al atributo, E.g.

var diego = { name: 'Diego' }

diego.name // 'Diego'

// Esta es una de las estructuras de datos más veloces ya que puedes obtener los datos sin analizar todo el conjunto.

La cosa es que en JS, los objetos json tienen una característica que los hace especial: su padre es el objeto Prototipo u "Object.__proto __", eso significa que "heredan" toda cantidad de características de ese prototipo mayor. Esto sucede en todos los lenguajes, siempre hay un objeto mayor del que todos heredan, en el caso de python se llama Object, en JS también, pero lo que se hereda es el atributo __proto __, por lo tanto todos son hijos de "Object.__proto __". Pero... la Programación Orientada a Objetos tiene características como:

Abstracción
Encapsulamiento
Herencia
Polimorfismo En JS no las podemos implementar? La respuesta es sí, pero hasta este punto del curso, no es tan fácil de hacerlo, en la siguiente clase estos problemas parecen ir solucionándose de manera fácil, pero por el momento, hay que entender lo fundamental: los prototipos.

¿Cómo solucionamos esto?

Primero que nada, necesitamos un constructor diferente para nuestro objeto, porque la nomenclatura json no es del todo cómoda ni bonita para programar, ni tampoco es funcional. Para lograr esas características, utilizaremos una función. Las funciones son objetos de primera-clase (según Mozilla), y si es un objeto, significa que también hereda las funciones de prototipo!! Y si es una función significa que la podemos llamar, por lo tanto es funcional.

function Automovil(color, marca) {
	this.color = color;
	this.marca = marca;
}
var fiesta = new Automovil('Blanco', 'Ford');

fiesta.color // 'Blanco'
// Igual de rápido que el JSON, porque la función también es un objeto

Entonces con una función ya tenemos un objeto como un json y con una visualización mucho más cómoda y una mayor funcionalidad. Esto no nos ha solucionado el problema; sin embargo, nos ha abierto las puertas a hacerlo.

Ahora, teniendo una función, significa que tenemos el constructor de un objeto que hereda de "Object.__proto __", pero ¿cómo le metemos funciones a nuestro objeto? Para eso utilizamos el atributo prototype dentro del objeto. El atributo prototype es una propiedad dentro de nuestro objeto y dentro le pondremos las funciones que harán especial a ese objeto.

Automovil.prototype.abrirCajuela = function () {
	console.log('abrir atrás');
}
Automovil.prototype.pitar = function () {
	console.log('realizar pitido');
}

Aquí podemos ver que ahora el Automovil tiene la funcion abrirCajuela() y que hará las acciones para abrir atrás porque la cajuela siempre está detrás.

Herencia

Ahora sí, después de tanto rollo, podemos llegar a la herencia que es lo que importaba de la clase. Para entender esto habrá que crear un nuevo tipo de auto, e.g. Vocho.

function Vocho(color, marca) {
	this.color = color;
	this.marca = marca;
}
var herbie = new Vocho('Blanco', 'Volkswagen');

herbie.color // 'Blanco'

Excelente, pero ¿de qué me sirve si volveré a escribir todo el objeto de nuevo? aquí es donde entra la herencia. Lo que haremos será decirle al Vocho (objeto2) que herede todo del Automovil (objeto1) y así desde el objeto2 tendremos acceso a las funciones del objeto1 como abrirCajuela() y pitar(). Ya con esas funciones lo que queremos es modificar la primera porque el Vocho tiene la cajuela en frente y el motor atrás, por lo que la función abrirCajuela() nos abrirá el motor si no la cambiamos. Para esto, usaremos el mismo hack de Sacha. Una función que dentro tenga 3 prototipos: el padre, el hijo y un prototipo que servirá como referencia al prototipo padre.

function heredaDe(hijo, padre) {
    var fn = function () {}
    fn.prototype = padre.prototype;
    hijo.prototype = new fn;
    hijo.prototype.constructor = hijo;
}

Aquí lo que estamos haciendo es decirle al hijo que su constructor (la función a la que llamamos cuando hacemos "new") sea una instancia de todas las funciones que hay dentro del padre. En nuestro ejemplo el padre es Automovil y el hijo es el Vocho.

heredaDe(Vocho, Automovil)
// es importante que esta función la declaremos antes de crear instancias de los objetos (fiesta y herbie) y de modificar las funciones.

Hasta este punto ya tenemos las funciones abrirCajuela() y pitar() en el Vocho. Pero si le hablamos, veremos que el vocho abrirá atrás como cualquier otro auto y lo que queremos es que abra en frente. Para lograr esto, modificaremos la función abrirCajuela().

Vocho.prototype.abrirCajuela = function () {
	console.log('abrir enfrente');
}

Ahora, ya podemos crear las instancias de nuestros objetos y acceder a sus funciones.

var fiesta = new Automovil('Blanco', 'Ford');
var herbie = new Vocho('Blanco', 'Volkswagen');

fiesta.abrirCajuela(); // 'abrir enfrente'
herbie.abrirCajuela(); // 'abrir atrás'
herbie.pitar(); // 'realizar pitido'

Wow. Gracias si lo leyeron todo, espero haber ayudado en algo.

Jose Colmenares

student•

Me encantó! Gran ejemplo!

Diego Fernando López Martínez

student•

Excelente aporte, muy buena tu explicación!

Evert Escalante

student•

Tremenda clase, para ver varias veces.

Carlos Gómez Mont

student•

😦

Irma Davila

student•

siii.. la vi tres veces!!!

Pablo Andres

student•

Resume de la clase:

Cómo hago para que un prototipo herede de otro?

…“JS no soporta la herencia porque no soporta las clases, no hay clases, hay prototipos a los que les vamos agregando métodos que reciben funciones, saben quien es ‘this’ y saben como ejecutarlas. Pero no existe un sistema como tal donde yo diga: _este prototipo va a heredar de otro”…

Lo que sí existe es la 'herencia prototipal’
Cómo funciona? => es posible crear prototipos ‘hijo’ que van a ser un subtipo de persona en este caso, por ejemplo un ‘desarrollador’.
Este ‘hijo’, cada vez que sea requerido buscará los métodos en sí mismo, luego si no lo encuentra, en su ‘padre’, ‘abuelo’… hasta llegar al prototipo base de todos los objetos que es ‘object’. Si ‘object’ no conoce ese mensaje, recién ahí es que javaScript lanzará el error de que ese método no puede ejecutarse.

Gian Pumayalla

student•

Muy buen aporte, gracias!

Tatiana Karina Valencia Hernández

student•

Muy bueno!

Rulo Code

student•

HERENCIA ENTRE CLASES JavaScript

(Hay que cogerla suave para entender todo esto, así que vamos por partes)

Lo primero que tenemos que entender es que en Js no existen como tal las clases, lo que si existe son prototipos. Entendemos por prototipo a una función creadora, la cual acepta parámetros que definirán las características de un objeto

function Jugador(nickname,score){
    this.nickname = nickname
    this.score = score
}

Ahora si empecemos ! : Sabemos que tenemos un prototipo llamado ++Jugador++ al cual vamos a utilizar para crear un nuevo objeto

var jugador1 = new Jugador('ninjaJs',355)

Una vez creado nuestro objeto necesitamos agregar algún método a este. Un método no es más que otra función que interactua con las caracteristicas de nuestro objeto

Jugador.prototype.saludar = function (){
    console.log(`soy ${this.nickname} y soy un Jugador normal`)
}

El nombre del método será saludar y utilizará los paramertos definidos en el prototipo Jugador

ATRIBUTO .prototype : es un atributo con el cuentan todas las funciones que indica que métodos y parametros entiende

Ahora bien ¿Qué y si queremos crear otro prototipo llamado ++JugadorExperto++ que herede los parametros de ++Jugador++ (nuestro prototipo padre) ?
HERENCIA PROTOTIPAL : en este caso ++JugadorExperto++ será un subtipo del prototipo ++Jugador++ que necesita heredar sus métodos y parametros
Para ello necesitamos crear una función global que sea capaz de cambiar la Herencia que tiene ++JugadorExperto++ por defecto. Entendamos la manera difícil de hacer esto para entenderlo por completo

creamos la función que aceptará por parametro el prototipo/subtipo o (protoripoHijo) y el prototipo/original o (prototipoPadre)

function heredarDe(prototipoHijo, prototipoPadre){}

dentro de nuestra función de cambio de Herencia creamos una dummy function (función que no hace nada) e indicamos que su atributo .prototype apunte al .prototype del prototipoPadre

function heredarDe(prototipoHijo, prototipoPadre){
    var noop = function (){}
    noop.prototype = prototipoPadre.prototype
}

Ahora apuntamos el atributo .prototype del subtipo protipoHijo a un nuevo objeto creado por el prototipo de la dummy Function. por ultimo apuntamos el atributo .constructor al subtipo prototipoHijo

function heredarDe(prototipoHijo, prototipoPadre){
    var noop = function (){}
    noop.prototype = prototipoPadre.prototype
    prototipoHijo.prototype = new noop;
    prototipoHijo.prototype.constructor = prototipoHijo
}

Y listo ! ya tenemos nuestra función para cambiar la herencia prototipal, lo unico que resta es invocarla justo antes de que queramos cambiar la herencia, para ello y volviendo a nuestro ejemplo:

invocaremos heredaDe() para heredar los métodos y parametros de ++Jugador++ en ++JugadorExperto++


heredaDe(JugadorExperto,Jugador);


function JugadorExperto(nombre, score){
    this.nombre = nombre
    this.score = score
}

utilizar método de prototipo padre y modificarlo, lo cuál creará un método en el subtipo que se llame exactamente igual al método original del prototipoPadre pero con las modificaciones sobrescritas o pisadas

JugadorExperto.prototype.jugar = function(){
    console.log(`Soy ${this.nombre} y soy un Jugador Experto`)
}

Si alguien llega a leer hasta aquí y entiende un poco más, me sentiré muy contento :D

Jimmy Ugalde Mora

student•

buena explicacion ?

Giovanni Muñoz

student•

buena explicación solo que en la clase aplica después de prototipo desarrollador heredaDe en tu caso, después JugadorExperto iría heredaDe(JugadorExperto,Jugador); saludos

Carlos Mario

student•

Aurelio ML

student•

gracias!

Gino Ureta

student•

Buen resumen

Alejandro González Reyes

student•

Veo que la mayoría tiene problemas con esta clase. Existen muchas formas para tratar de explicarlo. Según la investigación que llevé a cabo, estas son mis notas y espero que a más de uno logre entender esto.

// La herencia en ES5 era cosa de locos, por tal motivo ES6 trae consigo un wrapper para trabajar orientado a objetos como en otros lenguajes de programación...
// Ejemplo de herencia prototipal en ES5


// Declaración de la clase padre
function Persona(nombre, apellidos, altura) {
    this.nombre = nombre
    this.apellidos = apellidos
    this.altura = altura
}

Persona.prototype.saludar = function() {
    console.log(`Hola, mi nombre es ${this.nombre} ${this.apellidos}`)
}

Persona.prototype.consultarAltura = function()  {
    console.log(`${this.nombre} tiene una estatura de ${this.altura} mts.`)
}



// Declaración de la clase hija
function Desarrollador(nombre, apellidos, altura, lenguajes) {
    // 3. El constructor crea una nueva propiedad llamada super para este objeto, y le asigna como valor el constructor de la clase de la cual se quiere extender, Persona.
    this.super = Persona
    // 4. La declaración anterior convierte el atributo super, en un metodo (vinculo) para invocar al constructor de la clase padre y pasarle todos los parametros que necesita para ser inicializado. La palabra super es solo por convención
    // Durante todo este proceso, this hace referencia a este objeto....
    this.super(nombre, apellidos, altura)
    this.lenguajes = lenguajes
}

// 5. Indicamos que el prototipo base para Desarrollador, es el prototipo Persona (es decir, indicamos de quien extiende o hereda)
Desarrollador.prototype = new Persona

// Sobre-escribir metodos del prototipo padre
Desarrollador.prototype.saludar = function() {
    console.warn(`Desarrollador ${this.nombre} ${this.apellidos}`)
}
// Añadir los metodos propios de la clase hija
Desarrollador.prototype.mostrarLenguajes = function() {
    console.log(`${this.nombre} domina las siguientes tecnologías: ${this.lenguajes.join(', ')}`)
}



var genaro = new Persona('Genaro', 'Tlacoyo Fuentes', 1.89)

// 1. El operador new creará un objeto generico y le asignara a la propiedad _proto el valor de Desarrollador.prototype
// 2. El operador new pasará el nuevo objeto creado al constructor de Desarrollador, como valor de la palabra reservada this. (este objeto) 
var alejandro = new Desarrollador('Alejandro', 'González Reyes', 1.72, ['php','css','html','js','mysql','laravel','vuejs'])

console.log(genaro)
console.log(alejandro)

genaro.saludar()
alejandro.saludar()

genaro.consultarAltura()
alejandro.consultarAltura()

alejandro.mostrarLenguajes()


/**
 * Apuntes finales.
 * 
 * La búsqueda de propiedades en JavaScript comienza en las propias propiedades del objeto, y si este nombre de propiedad no se encuentra, consulta las propiedades del objeto especial __proto__. Este proceso se realiza de manera recursiva.
 * 
 * La propiedad especial __proto__ se define cuando un objeto es construido: su valor corresponde con la propiedad prototype del constructor. Así, la expresión new Foo() crea un objeto con la propiedad __proto__ == Foo.prototype. En consecuencia, los cambios producidos en Foo.prototype alteran la búsqueda de propiedades de todos los objetos creados con new Foo().
 * 
 * Todo objeto tiene una propiedad __proto__, así como una propiedad prototype. Por lo tanto, los objetos pueden relacionarse a través de esta propiedad.
 * 
 * genaro._proto_ = Desarrollador.prototype;
 * genaro._proto_._proto_ = Persona.prototype;
 * genaro._proto_._proto_._proto_ = Object.prototype;
 * genaro._proto_._proto_._proto_._proto_ = null;
 */

Santiago Demierre

student•

Excelente, me encanto la explicación! Gracias

Freivys Antonio Paredes Briceño

student•

Gracias por el aporte. Excelente :+1:

David Alejandro Abreu Abreu

student•

Estuve leyendo este articulo, no se si el curso se quedo anticuado y ya mejoraron la forma de manejar las clases.

Hice las pruebas y funciona de maravilla, es mas fácil que el prototipado.

class Animal{
    constructor(nombre){
        this.nombre = nombre
    }
    hablar(){
        console.log(this.nombre +' hace ruido')
    }
}

class Perro extends Animal{
    hablar(){
        console.log(this.nombre + ' ladra!')
    }
}

Joel Ricci López

student•

La didáctica en el código es más divertida usando animales, y también los uso. Muchas gracias por este código para comparar en ES6.

Rocio Chavoya

student•

creo, justo acaba de mencionar que hasta hace poco no habia manera de pasar la herencia mas que de este modo, me parece que en un futuro tocara el tema de las clases

Pablo Andres

student•

Adjunto el código de la clase:

function heredaDe(prototipoHijo, prototipoPadre) {
	var foo = function(){}
	foo.prototype = prototipoPadre.prototype
	prototipoHijo.prototype = new foo
	prototipoHijo.prototype.constructor = prototipoHijo
}

function Persona(nombre, apellido, altura, genero){
	this.nombre = nombre
	this.apellido = apellido
	this.altura = altura
	this.genero = genero
}

Persona.prototype.saludar = function(){
	console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
}

Persona.prototype.soyAltX = function(){
	var altX = this.genero == 'masculino' ? 'alto' : 'alta'
	var string = this.altura >= 1.8 ? `Soy ${this.nombre} ${this.apellido} y definitivamente soy ${altX}.` 
									: `Soy ${this.nombre} ${this.apellido} y no, no soy ${altX}.`
	console.log(string)
}

function Desarrollador(nombre, apellido){
	this.nombre = nombre
	this.apellido = apellido
}
heredaDe(Desarrollador, Persona)

Desarrollador.prototype.saludar = function(){
	console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy desarrollader.`)
}

Valentina Rúa Carrillo

student•

gracias!! :D

Roberto Prince

student•

Solo utilicen

function Desarrollador(nombre, apellido, edad){
	this.claseBase(nombre, apellido, edad)
}

Desarrollador.prototype = Object.create(Persona.prototype) //Hereda los metodos
Desarrollador.prototype.claseBase = Persona //Hereda el constructor
Desarrollador.prototype.constructor = Desarrollador //Permite el uso de instanceof

Desarrollador.prototype.saludar = function (){ //Sobre escribe el metodo
	console.log("Hola soy un desarrollador")
	//opcionalmente
	Persona.prototype.saludar.call(this) //Hace uso del metodo base
}

Ulises Uriel Cabrera Rubio

student•

Damián Nardini

student•

" un desarrollador es un subtipo de persona " la verdad se ha dicho

Damián Nardini

student•

" un desarrollador es un subtipo de persona " la verdad se ha dicho

Omar Enrique Palacios Cardenas

student•

Hola compañeros, quiero solucionar un duda que me surgio, en el minuto 12:25 de la clase Sacha llama la función arturo.soyAlto() la cual le arroja FALSE y deberia ser TRUE, la razon es porque en el constructor de Desarrolador que se hizo como ejemplo en esta clase no se agrego el atributo de altura, por este motivo la función no lo reconoce, si lo agregamos vemos que funciona perfectamente, espero les sirva compañeros.

function Desarrollador(nombre, apellido, altura) {
  this.nombre = nombre;
  this.apellido = apellido;
  this.altura = altura;
}```

Juan Guillen Fortich

student•

Claro es que la herencia solo se utiliza para que compartan los métodos los atributos ya son diferentes en cada prototipo.

¡Nunca pares de aprender¡ 🚀

Kevin J. Zea Alvarado

student•

Niceee. Tiene sentido. A mí también me surgió esa duda cuando le salió false. ¡Muchas gracias por explicarlo! 🙌

Almudena Pardo Alvarez

student•

Bueno, después de ver el vídeo 4 veces y leerme unas cuantas páginas de información adicional, creo que he entendido lo básica. Es una clase compleja, pero que nos muestra un poco sobre cómo está construido javascript. No nos desanimemos, compañeros!

Iván Darío Sánchez Jiménez

student•

Una aclaración del final del video: Aunque Desarrollador hereda los métodos de Persona, el método soyAlto() aunque se hereda no funciona correctamente ya que los métodos constructor de los prototipos son distintos y el prototipo de Desarrollador no tiene el atributo altura.

Israel Elias Laura Rosas

student•

Me perdi de algo? o porque arturo.soyAlto() da false si su altura es superior a 1.8

Jorge Delfino

student•

Me parece que es porque cuando crea un objeto desarrollador no le pide la altura en el constructor

Kellys Tirado

student•

Si es que cuando usas arrow functions this hace referencia al this global el cual es windows entonces lo que estas preguntando es windows.altura >= 18 donde altura no esta definido como una propiedad de windows obviamente por eso usó la tradicional function () {} . Espero haberte aclarado un poco porque this se comporta como diferente dentro de las arrows functions.

jose zuñiga

student•

Bueno quizá este es el tema mas complejo hasta este punto del curso. Acá dejo mi resumen de lo que he entendido e investigado de este tema (de un novato para novatos):

Debemos entender primero que es un prototipo. Lo podemos ver como un “formulario” que usaremos para llenar rápidamente la información (atributos) y funcionalidades (métodos) que le corresponden a un objeto. Acá tenemos dos objetos con dos prototipos propios (ósea formularios).
Por favor usen la palabra “formulario” solo como una referencia para entender el funcionamiento de un prototipo, no es una definición muy acertada pero tampoco dista demasiado de lo que termina ejecutando.
Bien esta estructuración de formularios es propia de todas las funciones. Ósea todas las funciones tienen un prototipo y lo podemos copiar entre funciones.
Ahora teniendo eso en mente, hay “formularios” que pueden contener información general de un objeto que los tomaremos como el prototipo Padre. A medida que creamos nuevos objetos mas especializados notamos que estos tienen información (atributos) y funciones (métodos) similares a un objeto padre y claro está su propia información (atributos) y funciones (métodos). Para ahorrar tiempos es más fácil si copiamos estos atributos y métodos a nuestro nuevo objeto. Este es el concepto de herencia en JS.
JS no posee el concepto de clases como tal así que el proceso de herencia no se hace tan directo como en otros lenguajes. Acá lo que debemos hacer es una copia de los métodos de la clase padre, haciendo uso de la palabra prototype.
Otro detalle de esta copia, esta no queda directamente en nuestro objeto hijo. Lo que se hace es anidar nuestro objeto, es como si metiéramos nuestro nuevo objeto hijo dentro del padre, es como abrir una muñeca rusa desde adentro. Cuando no encontramos respuesta a nuestra pregunta dentro de nuestra muñeca (objeto hijo), abrimos la tapa y miramos en la muñeca que esta sobre nosotros (padre), así sucesivamente (padre del padre, etc) hasta que obtenemos o no una respuesta.

Y mas detalles, en este momento al copiar el prototype solo se copian los métodos (funciones). Es un quebradero de cabeza intentar hacer que un objeto Desarrollador ejecute el método soyAlto() y nos de un resultado deseado. Si revisas si el atributo altura está dentro de nuestro objeto Desarrollador veras un undefine. Aún si lo has pasado como atributo del objeto.

var arturo = new Desarrollador('Arturo', 'Martinez', 1.89)
arturo.altura
undefined

Esto se debe a que el atributo altura no lo hereda directamente de Persona, hay dos soluciones una al nivel de lo visto hasta este momento y es agregar al prototipo Desarrollador el atributo altura.

function Desarrollador(nombre, apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
}

La otra opción, es hacer que Desarrollador herede de Persona sus atributos para esto usamos la palabra clave padre.call(this, atributos). Me estoy saltando algunas clases, pero mi intención es mostrar que en realidad es posible heredar los atributos desde el objeto padre.

function Desarrollador(nombre, apellido,altura) {
    Persona.call(this,nombre, apellido,altura);
}

Ahora procedo a analizar el proceso de herencia de nuestras funciones Persona (Padre) a Desarrollador (Hijo). Lo primero es construir una función que al ser invocada envié Persona e Hijo para hacer este proceso.

heredaDe(Desarrollador, Persona)
function heredaDe(prototipoHijo, prototipoPadre) {
    
}

Como lo mencione todas las funciones tienen como estructura un prototipo, si definimos una función vacía será como tener una hoja de un formulario limpia. Aprovechando estas características usaremos una función vacía fn como auxiliar. En ella podemos copiar el prototipo de mi clase padre. En esta copia fn tendremos todas las funciones de Persona: saludar y soyAlto.

function heredaDe(prototipoHijo, prototipoPadre) {
    var fn = function () {}
    fn.prototype = prototipoPadre.prototype 
}

Procedamos a “anidar” nuestro objeto Desarrollador (hijo) dentro de Persona (Padre). Para esto instanciamos dentro de nuestro prototipo Desarrollador el prototipo de fn que es una copia de Persona.

function heredaDe(prototipoHijo, prototipoPadre) {
    var fn = function () {}
    fn.prototype = prototipoPadre.prototype
    prototipoHijo.prototype = new fn
}

En este punto ya tenemos anidados los prototipos de nuestros dos objetos (Persona y Desarrollador). Si me he explicado bien has entendido que toda la información del prototipo persona (formulario de persona) se ha copiado en Desarrollador.
Pero es necesario hacer un ultimo paso, y es indicar cual de los dos prototipos será con el que se inicie nuestros objetos Desarrollador, si el que acabamos de copiar o el que definimos para Desarrollador. En este punto iniciaríamos con el de Persona, pero esto no es lo que deseamos. Seria tirar las líneas de código de nuestro prototipo Desarrollador a la basura. Así que le indicamos a JS que deseamos iniciar nuestro objeto con el prototipo de Desarrollador. Esta es la ultima línea de código que agregamos.

function heredaDe(prototipoHijo, prototipoPadre) {
    var fn = function () {}
    fn.prototype = prototipoPadre.prototype
    prototipoHijo.prototype = new fn
    prototipoHijo.prototype.constructor = prototipoHijo
}

Esta es la manera antigua de hacer este proceso. En este momento tenemos mas fáciles y directas de cumplir con este proceso. Pero en el fondo hacemos lo mismo. Es por esto importante que entiendas lo que se ha desarrollado en esta clase.

Bryan Duarte

student•

Me paso en esta sección de POO en Js que no comprendía los conceptos y por ende estaba solo copiando lo que hacia el profe. Si a alguien mas le pasó, le recomiendo tomar el curso de Programación orientada a objetos, me despejó todas las dudas y ahora entiendo todo :)

Usuario anónimo

user•

🤯

Felipe Molano Corredor

student•

sinceramente no se que decir, NO ENTIENDO ABSOLUTAMENTE NADA :( de verdad sera normal? pareciera que quienes ven este curso ya vienen con unos conocimientos amplios del tema, pero quienes venimos apenas del curso basico de Js creeria que la mayoria no entendemos NADA :(

Omar Daniel Centeno

student•

¡Hola!

La programación no es tan sencilla, es necesario mucha paciencia y práctica diaria para ir dominando los conceptos poco a poco. No te des por vencido y repasa aquello que no entiendas. Puedes escribir al team@platzi.com para que te den recomendaciones de que temas repasar o qué cursos hacer antes de este para que llegues con más conocimiento a estos temas.

¡Nunca pares de aprender!

Daniela Díaz Graziani

student•

Hola 😊

Entiendo un poco tu frustración, sentí lo mismo cuando empecé a ver este curso. Luego comprendí que la mayor parte del tiempo en esta carrera se basa en investigar, lo cual nos dará un poco más de autonomía a la hora de entrar en el campo laboral, si bien aquí nos facilitan ciertas herramientas, queda de nuestra parte profundizar en los conceptos que no tengamos 100% claros, ya sea a través de esta misma plataforma o mediante documentación oficial.

No te rindas 🤘🏻

ANGEL DAVID SULBARAN CALDERON

student•

ok me falto agregarle las fotos de la consola debido a que esta las necesita si o si (clases anteriores ya cuentan con las fotos de la consola) por lo que la explicación de esa parte estará en el archivo doc con sus respectivas imágenes y lo compartiré al final del curso, esto la verdad es mucho mas sencillo de lo que parece la verdad al menos yo lo entendí de esta manera.

LA VERDAD OCULTA SOBRE LA CLASES EN JAVASCRIPT

Otros lenguajes de programación soportan la herencia entre clases, y tal vez te estes preguntando si Javascript posee es te soporte de herencia, como hacer para que un prototipo herede de otro. Javascript como tal no soporta la herencia porque no soporta las clases, las clases en javascript no existen, lo que si existe es la herencia prototipal. Siendo asi, como ya creamos prototipos, vamos a crear prototipos “hijos” que vendrían siendo subtipos, lo que vamos a hacer es que vamos a ver si nuestro subtipo sabe responder al método en el cual lo vamos a llamar, si no sabe responder al método, va a buscar en el prototipo padre a ver si lo encuentra, si no lo encuentra va a seguir esa cadena de buscar en el prototipo padre, luego en el de arriba y asi, hasta llegar al prototipo base de todos los objetos que es “object” si object no conoce ese mensaje allí es que javascript lanzara el error de que no se puede ejecutar ese método. Esto lo explicaremos de la siguiente manera, primero que todo, seguiremos con el código de la clase pasada, porque crearemos este “prototipoHijo” y le agregaremos ciertas cosas que harán que esta comunicación prototipal funcione, también recalco con esto que esto solia usarse antes, hoy en dia existe un método aun mas sencillo de hacer esto, pero igual debes aprender este método, es complicado pero aca se detallara. Bien primero lo primero, vamos a crear el prototipo Desarrollador y haremos los objetos creados nos saluden y nos digan que son desarrolladores;

function Desarrollador(nombre, apellido) {
    this.nombre = nombre
    this.apellido = apellido

}

Desarrollador.prototype.saludar = function (){
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy desarrollador`)
}

Bien esto no tiene mucha explicación, básicamente hemos hecho lo mismo que en clases anteriores, crear un constructor y crear una función para este que utilice los objetos creados con este constructor. Luego de esto viene la parte interesante, vamos a crear la funcion “heredaDe” que para simplificar la explicacion, esto lo que hará en palabras resumidas es ser un puente entre el protipo hijo y el prototipo padre;

function heredaDe(PrototipoHijo, PrototipoPadre){
    var fn = function () {}
    fn.prototype = PrototipoPadre.prototype
    PrototipoHijo.prototype = new fn
    PrototipoHijo.prototype.constructor = PrototipoHijo
}

Esto la verdad, se puede ver como algo complejo, pero la verdad es que no lo es tanto, así que vamos a desglosarlo, primero que nada creamos la función y al ponerle los parámetros indicamos de esa manera que los mismos son “(PrototipoHijo, PrototipoPadre)” luego de esto podemos ver que existe una funcion vacia, esto siempre ira al momento de crear este puente y casi siempre tendrá este nombre o también puede denominarse “noop”(no operational), mas abajo le asignamos a la funcion “fn.prototype” y creamos la base de la conexión prototipal “PrototipoPadre.prototype”, debajo de esto podemos observar “PrototipoHijo.prototype. = new fn” esto es para hacer que nos pase un nuevo objeto sin que pise el object anterior y por ultimo “PrototipoHijo.prototype.constructor = PrototipoHijo” esto es para asignar la funcion constructora del prototipo padre, debido a que si no se agrega esta línea se llama por defecto a l a funcion constructora del prototipo padre . Ya explicado esto pasamos a llamar la función y de qué manera la vamos a llamar;

Primero que nada, vamos a llamar la función de la siguiente manera:

heredaDe(Desarrollador, persona)

Como podemos observar al llamar la funcion “heredaDe()” como ya sabemos podemos asignarle los parámetros que necesitemos en funcion a nuestro código, en este caso, le indicaremos en sus parámetros por orden cual es el prototipo hijo y el prototipo padre, de manera que concuerde con los parámetro asignados según el orden al crear la función que será nuestro puente entre los prototipos.

Un detalle muy importante a tener en cuenta es que al llamar la funcion de herencia, debemos colocarla justo debajo de las funciones de desarrollador en este caso, de la siguiente manera:

function heredaDe(PrototipoHijo, PrototipoPadre){
    var fn = function () {}
    fn.prototype = PrototipoPadre.prototype
    PrototipoHijo.prototype = new fn
    PrototipoHijo.prototype.constructor = PrototipoHijo
}

function persona(nombre,apellido,altura) {
 this.nombre = nombre
 this.apellido = apellido
 this.altura = altura
 return this
}

persona.prototype.saludar = function() {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}

persona.prototype.soyAlto = function (){
    return this.altura >= 1.80
}

function Desarrollador(nombre, apellido) {
    this.nombre = nombre
    this.apellido = apellido

}
heredaDe(Desarrollador, persona)

Desarrollador.prototype.saludar = function (){
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy desarrollador`)
}

¿Por qué? Esto es debido al hecho de que, si llamamos la función justo debajo de la función “saludar” de desarrollador, que ya de por si está pisando la función “saludar” de persona, esto causaría que la función saludar se vuelva a pisar con el saludar de persona. por lo que no podríamos llamar la función saludar de desarrollador, recuerden que los prototipos deben tener cierto orden como lo vimos en clases pasadas.

function Automovil(color, marca) {
	this.color = color;
	this.marca = marca;
}
var fiesta = new Automovil('Blanco', 'Ford');

fiesta.color // 'Blanco'
// Igual de rápido que el JSON, porque la función también es un objeto

var fiesta = new Automovil('Blanco', 'Ford');
var herbie = new Vocho('Blanco', 'Volkswagen');

fiesta.abrirCajuela(); // 'abrir enfrente'
herbie.abrirCajuela(); // 'abrir atrás'
herbie.pitar(); // 'realizar pitido'

function heredarDe(prototipoHijo, prototipoPadre){
    var noop = function (){}
    noop.prototype = prototipoPadre.prototype
    prototipoHijo.prototype = new noop;
    prototipoHijo.prototype.constructor = prototipoHijo
}

// La herencia en ES5 era cosa de locos, por tal motivo ES6 trae consigo un wrapper para trabajar orientado a objetos como en otros lenguajes de programación...
// Ejemplo de herencia prototipal en ES5


// Declaración de la clase padre
function Persona(nombre, apellidos, altura) {
    this.nombre = nombre
    this.apellidos = apellidos
    this.altura = altura
}

Persona.prototype.saludar = function() {
    console.log(`Hola, mi nombre es ${this.nombre} ${this.apellidos}`)
}

Persona.prototype.consultarAltura = function()  {
    console.log(`${this.nombre} tiene una estatura de ${this.altura} mts.`)
}



// Declaración de la clase hija
function Desarrollador(nombre, apellidos, altura, lenguajes) {
    // 3. El constructor crea una nueva propiedad llamada super para este objeto, y le asigna como valor el constructor de la clase de la cual se quiere extender, Persona.
    this.super = Persona
    // 4. La declaración anterior convierte el atributo super, en un metodo (vinculo) para invocar al constructor de la clase padre y pasarle todos los parametros que necesita para ser inicializado. La palabra super es solo por convención
    // Durante todo este proceso, this hace referencia a este objeto....
    this.super(nombre, apellidos, altura)
    this.lenguajes = lenguajes
}

// 5. Indicamos que el prototipo base para Desarrollador, es el prototipo Persona (es decir, indicamos de quien extiende o hereda)
Desarrollador.prototype = new Persona

// Sobre-escribir metodos del prototipo padre
Desarrollador.prototype.saludar = function() {
    console.warn(`Desarrollador ${this.nombre} ${this.apellidos}`)
}
// Añadir los metodos propios de la clase hija
Desarrollador.prototype.mostrarLenguajes = function() {
    console.log(`${this.nombre} domina las siguientes tecnologías: ${this.lenguajes.join(', ')}`)
}



var genaro = new Persona('Genaro', 'Tlacoyo Fuentes', 1.89)

// 1. El operador new creará un objeto generico y le asignara a la propiedad _proto el valor de Desarrollador.prototype
// 2. El operador new pasará el nuevo objeto creado al constructor de Desarrollador, como valor de la palabra reservada this. (este objeto) 
var alejandro = new Desarrollador('Alejandro', 'González Reyes', 1.72, ['php','css','html','js','mysql','laravel','vuejs'])

console.log(genaro)
console.log(alejandro)

genaro.saludar()
alejandro.saludar()

genaro.consultarAltura()
alejandro.consultarAltura()

alejandro.mostrarLenguajes()


/**
 * Apuntes finales.
 * 
 * La búsqueda de propiedades en JavaScript comienza en las propias propiedades del objeto, y si este nombre de propiedad no se encuentra, consulta las propiedades del objeto especial __proto__. Este proceso se realiza de manera recursiva.
 * 
 * La propiedad especial __proto__ se define cuando un objeto es construido: su valor corresponde con la propiedad prototype del constructor. Así, la expresión new Foo() crea un objeto con la propiedad __proto__ == Foo.prototype. En consecuencia, los cambios producidos en Foo.prototype alteran la búsqueda de propiedades de todos los objetos creados con new Foo().
 * 
 * Todo objeto tiene una propiedad __proto__, así como una propiedad prototype. Por lo tanto, los objetos pueden relacionarse a través de esta propiedad.
 * 
 * genaro._proto_ = Desarrollador.prototype;
 * genaro._proto_._proto_ = Persona.prototype;
 * genaro._proto_._proto_._proto_ = Object.prototype;
 * genaro._proto_._proto_._proto_._proto_ = null;
 */

class Animal{
    constructor(nombre){
        this.nombre = nombre
    }
    hablar(){
        console.log(this.nombre +' hace ruido')
    }
}

class Perro extends Animal{
    hablar(){
        console.log(this.nombre + ' ladra!')
    }
}

function heredaDe(prototipoHijo, prototipoPadre) {
	var foo = function(){}
	foo.prototype = prototipoPadre.prototype
	prototipoHijo.prototype = new foo
	prototipoHijo.prototype.constructor = prototipoHijo
}

function Persona(nombre, apellido, altura, genero){
	this.nombre = nombre
	this.apellido = apellido
	this.altura = altura
	this.genero = genero
}

Persona.prototype.saludar = function(){
	console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
}

Persona.prototype.soyAltX = function(){
	var altX = this.genero == 'masculino' ? 'alto' : 'alta'
	var string = this.altura >= 1.8 ? `Soy ${this.nombre} ${this.apellido} y definitivamente soy ${altX}.` 
									: `Soy ${this.nombre} ${this.apellido} y no, no soy ${altX}.`
	console.log(string)
}

function Desarrollador(nombre, apellido){
	this.nombre = nombre
	this.apellido = apellido
}
heredaDe(Desarrollador, Persona)

Desarrollador.prototype.saludar = function(){
	console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy desarrollader.`)
}

function Desarrollador(nombre, apellido, edad){
	this.claseBase(nombre, apellido, edad)
}

Desarrollador.prototype = Object.create(Persona.prototype) //Hereda los metodos
Desarrollador.prototype.claseBase = Persona //Hereda el constructor
Desarrollador.prototype.constructor = Desarrollador //Permite el uso de instanceof

Desarrollador.prototype.saludar = function (){ //Sobre escribe el metodo
	console.log("Hola soy un desarrollador")
	//opcionalmente
	Persona.prototype.saludar.call(this) //Hace uso del metodo base
}

function heredaDe(prototipoHijo, prototipoPadre) {
    var fn = function () {}
    fn.prototype = prototipoPadre.prototype
    prototipoHijo.prototype = new fn
    prototipoHijo.prototype.constructor = prototipoHijo
}

function Desarrollador(nombre, apellido) {
    this.nombre = nombre
    this.apellido = apellido

}

Desarrollador.prototype.saludar = function (){
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy desarrollador`)
}

function heredaDe(PrototipoHijo, PrototipoPadre){
    var fn = function () {}
    fn.prototype = PrototipoPadre.prototype
    PrototipoHijo.prototype = new fn
    PrototipoHijo.prototype.constructor = PrototipoHijo
}

function heredaDe(PrototipoHijo, PrototipoPadre){
    var fn = function () {}
    fn.prototype = PrototipoPadre.prototype
    PrototipoHijo.prototype = new fn
    PrototipoHijo.prototype.constructor = PrototipoHijo
}

function persona(nombre,apellido,altura) {
 this.nombre = nombre
 this.apellido = apellido
 this.altura = altura
 return this
}

persona.prototype.saludar = function() {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}

persona.prototype.soyAlto = function (){
    return this.altura >= 1.80
}

function Desarrollador(nombre, apellido) {
    this.nombre = nombre
    this.apellido = apellido

}
heredaDe(Desarrollador, persona)

Desarrollador.prototype.saludar = function (){
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy desarrollador`)
}

La verdad oculta sobre las clases en JavaScript

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this