Es un poco complicado para los que ven esto por primera vez, creo que todos nos sentimos en las nubes cuando entramos en los últimos 2 videos que ya empieza lo dulce de JS, pero la práctica hace al maestro, yo tampoco entendía esto hace un par de meses, pero practicando paso a paso pude hacerlo, así que no se desanimen ya cuando vean como es la metodología o la guía a seguir después será muy fácil y comprenderán todo... todo esta en la practica colegas Gracias Jon de nuevo eres un Crack
Gracias por motivarnos, en esta clase si me senti un poco perdido jjajajaj, hasta en mis notas tuve que poner que debo reforzar a produndidad, y agradecer al teacher por su contenido y ganas de ayudar a los demas.
colega espero me puedas ayudar que consejos me das este ultimo video me revento y eso que vi el video varias veces que tiepo de ejercicios realizaste ?
He tomado tres cursos de Javascript nativo, y ahora que estoy aprendiendo React busqué reforzar los conocimientos que tengo de Javascript y me encontré con este curso. Debo decir que por lejos es el mejor curso de Javascript que he tomado, mejor incluso que los de pago que tengo en Udemy. Gracias Jon por tu dedicación y excelente contenido.
Me ha explotado la cabeza con estas ultimas dos clases jaja, aunque con las clases sera mas facil, pero debo entener como funcionan los prototipos. Saludos y gracias por el contenido
Gracias JON y gracias a dios nos dieron las CLASES porque esto la verdad es un lio, lo entendí, pero no dejar de ser un lio y otro montón de cosas para recordar o no funciona, de seguro en algún video posterior existe una forma mas fácil que hace los mismo. Me hace acordar a una vez que fui a un parque y pregunte a un tipo en la entrada, como se llega a las termas, me dijo seguí los carteles y comencé a dar vueltas por toda la ciudad, cantidad de vueltas, no podía creer lo que me hacían hacer con el auto. Cuando llegue al parque lo primero que pregunte es "no hay forma de irme de aqui si tanto lio", y la chica me dijo SI, agarra esta calle y pégale derecho hasta la ruta, respondí "no te puedo creer hay una calle que llega desde la ruta directo aqui, y me contesto SI, LO QUE PASA ES QUE PONEN ESOS CARTELES PARA QUE LA GENTE NO SOLO VENGA AL PARQUE SINO TAMBIEN CONOZCAN LA CIUDAD" hasta el día de hoy me acuerdo y me quiero MATAR. Y por si quieren saber donde, esto fue en San Clemente del Tuyu en la costa Argentina para llegar al parque de Aguas Termales (me recorrí media ciudad) no sigan los carteles.
@@jonmircha Si vos te reis, a mi me crearon un complejo, veo un cartel y lloro. JAJAJA, lo peor de todo es que la historia es 100% cierta, dios quiera algún Argentino la confirme.... la explicacion que el 90% de la gente va a San Clemente mas por el parque de Mundo Marino o Las termas y por eso usan esa estrategia, quieren que la gente conozca también la ciudad y lo que tiene para ofrecer..... (un laberinto) --- jajajaja. Un abrazo. Espero que el video que sigue me muestre la recta a la ruta y la herencia.
Ufff, joyita de canal. Ahora necesito sacar ganas de donde sea para poder avanzar muchisimo hasta junio que comienzo la uni; mejor llegar adelantado y no tener que aprender todo a palo, apurado y mal
Veo que no soy el único al que le has reventado la cabeza. Creo que aún no estoy entendiendo bien como funciona todo esto. Aun así sigo a ver si consigo entenderlo más adelante. Gracias Sr. Mircha
Yo no entiendo una mierda desde la clase anterior y eso que estuve repasando todo lo visto de nuevo y hasta hago resúmenes de las clases. Voy a seguir intentando aprender.
ya parezco un radio viejo repitiendo lo meeeeeeeeeeeeeeeesmo, pero este y el video anterior fueron unas excelentes clases, ya en el pasado habias explicado esto del prototipo, pero esta vez le distes profundidad y tambien tenes un video antes del ecmaScript 6 de la POO en javascript aquí le diste vigencia y muuuuuuuuuuuuuuucha.....! hey compa ya te comparti con todos hasta le di tu link a la nasa para que en la proxima sonda que vaya a salir se vaya tu lista de reproducción
A mi me parece excelente estas explicaciones.Hay que recordad que nosotros como programadores debemos de construir y crear, entonces es importante que entendamos como funcionan las cosas, ya que des esta manera tendremos todo controlado.
Excelente curso para los que estamos empezando desde cero, actualizado , completo y con buenas explicaciones detallada ,gracias jonmircha por tus aportes, gracias a Dios que todo lo que se de la web es por este canal
Muy buen profesor, debo decir que sus métodos de enseñanza y la paciencia al explicar, hacen que sea mucho mas entendible, la clave en esto es entender lo que es el prototipo y como funciona, gracias por todo el gran trabajo que haces!
La mejor clase de herencia que he visto, empece a ver este concepto en typescript pero ahora verlo en JavaScript vanilla me hace entender muchas cosas. No es nada facil ni de entender ni de explicar. Muchas gracias por esta clase profe
Estos Ultimos videos creo que son parte de esa meseta que dicen que....o seguis o abandonas. Me alegra saber que somos muchos los que tenemos que volver a reproducir algunos videos por lo complejo de JS en algunas cosas.
Trate de no ver los comentarios para avanzar sin miedo/distracciones y ahora que los leo al terminar esta clase, quedé impactada, porque pienso igual que la mayoría jaja, pero la forma en que lo enseñas @jonmircha es genial y lo hace mas ameno. Gracias 🙏
Y aqui ya se empieza a poner interesante JS jaja, estaba aprendiendo POO con C# pero aqui con los prototipos se pone algo confuso pero entendible, me esta encantando esto, gracias profe Jon.
Muchas gracias profesor Jon Mircha tuve que ver varias veces este video porque me estaba mareando pero ya voy entendiendo, además es la primera vez que escucho sobre herencia prototípica, pero mis ganas de aprender mas sobre JS es mucha.
cuando vi esto por primera ves se me dificulto entenderlo pero ahora que ya acabe todo el curso y vuelvo a ver esto para darle un repaso lo entiendo completamente y lo veo mucho mas sencillo de lo que pense
Es de reconocer todo el esmero puesto para explicar en cada clase maestro, pero en esta al explicarnos que es lo que JavaScript hace tras bambalinas se nota ese amor que hay por la docencia y el bello arte de la programacion. infinitas gracias!!
Gracias Jon por todo el contenido creado. Si bien ya he estudiado JS con tu curso estoy aprendiendo un montón de detalles que no me habían mencionado en el curso que hice anteriormente! Un abrazo
Me toco vérmelo 2 veces, la primera no entendí nada, pero lo escribí en VS, y en la segunda, repitiendo cada explicación y anotando en mi cuaderno, ahora lo entendí mejor, e hice un ejercicio ahí con motos y entendí mejor, el mejor explicando!!
Maestro Jon ya voy 3era reproduccion jeje , me esta quedando claro me hice un par de ejemplos inventados para ver lo aprendido y si estoy avanzando bien muchas gracias por los videos maestro
Te amo eres un duro, me di cuenta de que si los métodos de la clase padre están declarados en el constructor no se pueden sobreescribir o por lo menos no de la forma que vimos
Maestro Jon, este sí que me explotó la cabeza XDDD. Pero después de unas varias horas para entenderlo hice un "ejercicio" para recordarlo mejor. Tratando de hacer algo tipo arbol de vida de nuestra decendencia etc Pero antes de ponerlo y que lo que quiera decir se pierda entre el código. Quiero decirte que realmente aprecio, como muchos lo que estás haciendo! No sabes cuánto te agradezco Maestro Jon!, poco a poco me va gustando más lo que es la programación gracias a ti. Terminé tus cursos de html y css y responsive y me fue súper bien, podría decir. Haciendo páginas complejas con puro maquetado y css. Después de un tiempo puliendo sin frameworks, o herramientas que me agilicen el trabajo, porque de verdad quería entender bien. Y todo gracias a ti! En fin, una vez más muchas gracias Jon! function Chordata(vertebra, respira) { this.vertebrado = vertebra; this.respira = respira; }
Hola Jon muchas gracias por esta clase, acá si tuve que prestar mucha atención pero igual lo bueno es que para mas adelante se me va ser mas fácil cuando me toque realizar de la manera mas sencilla ya que ahora soy mas novato, muchas gracias por esta clase como siempre!!!
19:15 hahaha como me hizo reir eso, lo cual es cierto ya me empezaba a asustar pero es un gran docente y pude entender muy bien la herencia con los prototipos, voy avanzando muy emocionado por el curso. Muchas gracias Profe!
esta clase me encanto es bueno saber esta información por mas que actualmente ya se use la azúcar sintáctica de Clases en JS (me agrada como suena eso ajaja), ayuda de gran forma saber como funciona en realidad esto de JS basada en prototipos. Muy buena clase.
Muchas gracias, esta genial el curso! Explicas muy bien. Lo que no me queda claro es el prototipo, es decir entiendo lo que hace pero si tendría que definirlo no sabría explicarlo.
Jon, soy senior en POO, en JS soy novato, me parece que los que venimos de POO, tenemos que desaprender algunas cosas antes de tratar de entender la herencia de JS basada en prototipos, según lo que te entendí e investigué, hice esto, tratando de que sea muy simple y funcione el mecanismo de herencia, sin el azúcar sintáctico de las "clases": Es un ejemplo sencillo para principiantes y que resume la herencia basada en prototipos. function Animal (nombre,genero){ this.nombre=nombre; this.genero=genero; } Animal.prototype.comer=function(){console.log(`Yo como`)}; function Perro (nombre,genero,raza){ Animal.call(this,nombre,genero); this.raza=raza; } Perro.prototype=Object.create(Animal.prototype); Perro.prototype.constructor=Perro; miPerro=new Perro("Dog","Macho","Labrador"); console.log(miPerro); function Pitbull(nombre,genero,raza,edad){ Perro.call(this,nombre,genero,raza,edad); this.edad=edad; } Pitbull.prototype=Object.create(Perro.prototype); Pitbull.prototype.constructor=Pitbull; miPitbull=new Pitbull("Malote","Macho","Pitbull",5); console.log(miPitbull);
@@jorgemariobenjumeaaguirre5056 te recomiendo el video del canal "Programando el destino" en donde usan esa forma de indicar y explican especificamente el uso de ese this th-cam.com/video/qH_gb10K_MQ/w-d-xo.html
No hay nada mejor que ver la documentación oficial... jjejeje. Está chévere el ejercicio, me abrió los ojos para ir a buscar en la documentación, como realmente es la sintaxys.
@@jorgemariobenjumeaaguirre5056 this si no entiendo mal ahi hace referencia a la funcion constructora animal, es un requisito de la funcion call, y ya los otros parametros son los de la funcion constructora Animal en si.
Lo voy a tomar con pinzas, o sea por un lado esta bueno saber el origen, o lo que se utilizaba 2015 para atrás, si creo que es fundamental saber diferenciar que en js las class no son necesariamente clases en si, sino mas bien es una forma de escritura que se utiliza para mejorar la legibilidad, y que aun así, todo se basa en prototipos. Estoy seguro que el próximo video es el que cuenta con la implementación de class. xD Buen video, te sigo y recomiendo como siempre. Saludos desde ARG (Y)
Esto que vemos con los prototipos y la herencia es el mismo mecanismo que se ejecuta, por ejemplo, con el objeto Sting o Array los cuales tienen al Object como prototipo padre?
espero que a alguien le sirva de algo las notas personales que hice de este video. Pero usando otro ejercicio más cortito jeje se asignó la función constructora principal llamada Animal, de ahí vamos a sacar el tipo de animal. A esta misma se le asignó a su prototype (que en este caso es object y su constructor es Animal) un método el cual nos va servir para sus hijos respectivamente. en este caso Perro es una función constructora la cual vamos a basar de Animal para esto le decimos function Perro(pelo, ojos, apodo) { Animal.call(this, pelo, ojos) this.apodo = apodo; } Nombre de la función constructora padre . punto call (this (para indicar el contexto, en este caso Perro), Args (pelo, ojos)) adicionalmente le agregamos un nuevo parámetro llamado apodo el cual lo debemos poner en la propiedades de Perro, ya que es propio de este. //Perro.prototype = Object.create(Animal.prototype); Aquí le decimos que el prototipo de perro ahora va a ser igual a la función Animal Perro.prototype = new Animal(); Y aquí cambiamos (asignamos realmente) el constructor al prototype Animal, porque al cambiar el prototipo que tenía antes Perro por la función Animal(), este constructor que tenía antes Perro el cual era su mismo constructor, se pierde, y solo queda el constructor que le corresponde a Animal en Animal > Object > Constructor:animal. Entonces para asignarle al prototype el constructor le decimos simplemente: lo cual hará que ahora tengamos proto Animal > constructor: Perro + proto Object > Constructor: Animal. "+" indica: hermano de constructor, o sea no está dentro de constructor sino en el mismo nivel Perro.prototype.constructor = Perro; a Animal le asignamos el siguiente método Animal.prototype.correr = function () { console.log(`corriendo...`); } y como Perro desciende e hicimos todo para que Perro tomará correspondientemente las propiedades y métodos de Animal pues podemos usarlo en nuevos objetos creados con el operador New como en: const scooby = new Perro("marrón", "oscuros", "scooby doo"); scooby.correr(); (nosotros le estamos asignando los métodos al prototipo Animal, entonces, también es el porqué debemos asignarle ese mismo prototype que tiene los métodos a sus hijos constructores, como hicimos con Perro usando
Perro.prototype = new Animal(); entonces nosotros estamos cambiando el prototype que tenía perro, en cual antes de cambiarlo era el proto Object (el más primitivo), y el cual contenía el constructor Perro. Nostros hemos reemplazado ese Prototype en Perro con la línea de código que hicimos, lo cual nos deja 1 se reemplazó el prototype de Perro, adquiriendo este el Prototype Animal 2 Animal es el prototype ahora de Perro, al cual se le asignarán los nuevos métodos que creemos 3 El prototype de Animal a su vez es el proto object (el más primitivo) 4 el prototype Object (el más primitivo) de Animal contiene los métodos asignados a la misma, lo cual pueden ser heredadas a las nuevas funciones constructoras hijas y usados en nuevas instancias (hijas claro) creadas con New 5 Por último debemos notar que el protótipo que tenía antes Perro (que era Object), al ser reemplazado por proto Animal hemos eliminado así mismo el constructor que este tenía (cuando Perro tenía Object como proto) (pasando de Object > constructor: Perro, a: Animal > Object > Constructor: Animal). Entonces debemos asignárselo al nuevo prototype que tiene Perro (el cual es Animal), para que este aparezca en el prototype Animal. Es por eso que usamos
Perro.prototype.constructor = Perro; Aquí lo que estamos haciendo es, agregándole al protitipo actual de mi objeto Perro un método llamado constructor (esto respondió el maestro Jon como respuesta a uno de los que comentaron con una pregunta )
/* perro, desglosamos, vemos prototype Animal, Animal es prototype de perro porque así lo asignamos con
Perro.prototype = new Animal();
Al prototype que le asignamos a Perro para que (heredara los atributos de Animal y métodos) que es Animal, le asignamos el método ladrar con Perro.prototype.ladrar = function (){} lo cual es por lo que podemos usar el método ese con Perro. Este prototype asignado Animal tiene a su vez el constructor que creamos (ya que el que tenía antes Perro fue eliminado al reemplazar el prototype object que tenía antes por el prototype Animal) con:
Perro.prototype.constructor = Perro;
Este prototype asignado Animal, también a su vez tiene los atributos nombre y sexo. Aquí no aparecen los métodos del prototipo de Animal, el cual es Object. La unica forma de que aparezcan al desglosar proto Perro >Proto Animal, es que hayamos hecho una sobreescritura de métodos como hicimos con el método sonar.
Aquí el único que debería aparecer (y eso si no activamos ningún método) es el de ladrar, y eso porque se lo asignamos directamente al prototype de Perro después de haber hecho el remplazo de prototypes para hacer la herencia prototípica. !!como prototipo de Animal tenemos el prototype Object, en el cual (dentro de Object) SÍ se van a encontrar los métodos que pueden ser heredables a Perro (e hijos si existen) y usados con nuevas instancias de Perro con el statement new. Porque aquí fue en donde nosotros asignamos los métodos que iba a tener (tiene) Animal function Animal(nombre, genero) { //atributos this.nombre = nombre; this.sexo = genero; } //métodos agregados al prototipo (proto Object más primitiva) de la función constructora llamada Animal Animal.prototype.sonar = function () { console.log("Hago sonidos porque estoy vivo"); } Y aquí podemos por qué y cómo es que se puede usar métodos de padres en instancias creadas de las mismas funciones padres, o de instancias creadas de funciones constructoras hijas de esa función constructora padre (ya que las funciones constructoras hijas heredan métodos y propiedades y atributos gracias al cambio de prototipo Perro.prototype = new Animal();), gracias a la desdencia y aplicando los respectivos métodos para aplicar la herencia prototípica
Hola profe Jon Mirchar! Antes que nada agradecerte por tu trabajo. Pude aprender mucho con tus enseñanzas. Tengo una duda, en algunos vídeos creo que mencionas que debemos evitar duplicar métodos en los objetos para ahorrar espacio en memoria. Ahora bien, si creamos una función constructora Perro que herede de Animal, como por ejemplo, lo que tu propones en el vídeo: ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function Perro(nombre, genero, tamanio) { this.super = Animal, this.super(nombre, genero), this.tamanio = tamanio } Perro.prototype ..... etc.... Perro.prototype.constructor ..... etc..... ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// En este caso, cada instancia de Perro va a tener el método super(). Entiendo que tal vez sea una de las pocas maneras de lograr heredar las propiedades. Y dada una instancia de Perro llamada firu y suponiendo que Animal tiene un método saludar(), podríamos acceder a los métodos del prototype animal de la siguiente forma: firu.super.prototype.saludar() ¿Si todas las instancias de Perro tienen este método super() no estaríamos sobrecargando la memoria? Investigando encontré una solución: ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function Perro(nombre, genero, tamanio) { Animal.call(this, nombre, genero), // Las propiedades de Animal quedaban bajo el objeto que crea Perro this.tamanio = tamanio } Perro.prototype ..... etc.... Perro.prototype.constructor ..... etc..... ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //// No obstante, me quede con la duda del método super ¿Se estaría sobrecargando el espacio en memoria o hay algo que ignoro?
Los prototipos hacen referencia a la interaccion entre dos clases, donde una de ellas toma las "propiedades o atributos" de la otra clase, para asi operar con ellas como si fuera suya, como un print, operaciones x, y asi
Hola, pregunta, entonces en la jerarquia, si creo un prototipo exacto como el perro, pero que ahora se llame gato, con los mismos metodos de Animal, y un metodo exclusivo del gato que diga miauu miauu, entonces, tanto perro como gato serian Hermanos?, e "Hijos" del prototipo Animal, y Animal, a su vez, sería hija del prototipo nativo de Javascript llamado "Object"? Espero haberme dado a entender, saludos!
Muy buena tu forma de enseñar. En esta parte tengo una duda: al escribir en la función constructora Perro: this.super = Animal por lo que veo se estaría creando una propiedad llamada "super" que va a contener las propiedades de Animal, y que se va a ver reflejado cuando creemos una instancia de Perro. Por eso no es mejor usar "call" para invocar a Animal? Por ejemplo escribir: function Perro(nombre, genero, tamanio) { Animal.call(this, nombre, genero); this.tamanio = tamanio; } Pregunto esto para entender bien qué es mas ventajoso en el caso que quiera escribir funciones constructoras en vez de clases, y saber que practicas serian mejor cuando aplico estos conceptos. Muchas gracias!
hola Jon sos un capo gracias por todo. me quedó una duda, por que pusiste estas dis lineas Perro.prototype = new Animal(); Perro.prototype.constructor = Perro; si ya le asignabas el super en Perro. probpe y sin esas 2 lineas funciona todo bien. Que funcion tienen entonces? Gracias!
Si no entienden las clases y prototipos no se hagan problema, continuen con el curso y una vez esten en el final vuelvan a verlo y se les va a hacer facil ya que se acostumbraran a su uso. se puede continuar con el curso tranquilamente y despues volver a reforzar todo esto. saludos
Muy buena clase!!!! Muchas gracias!!! Me quedó una duda de la clase anterior y que no pude darle respuesta con esta clase y es que cuando intento llamar a los métodos de la función constructora Animal, como Animal.sonar(); me da un error de que sonar no es una función; pero cuando lo hago con su instancia snoopy, por ejemplo con snoopy.sonar(); se reconoce como una función. No entiendo porque pasa esto. Me podría explicar, por favor?
Es un poco complicado para los que ven esto por primera vez, creo que todos nos sentimos en las nubes cuando entramos en los últimos 2 videos que ya empieza lo dulce de JS, pero la práctica hace al maestro, yo tampoco entendía esto hace un par de meses, pero practicando paso a paso pude hacerlo, así que no se desanimen ya cuando vean como es la metodología o la guía a seguir después será muy fácil y comprenderán todo... todo esta en la practica colegas Gracias Jon de nuevo eres un Crack
👋🏻😉
En realidad es porque no da contexto suficiente, explica mal prácticamente.
@@MaríaRubialabaValenciaPulgarín mmm si, puede ser q a veces no dé el contexto necesaria para una persona totalmente nueva en este mundo.
Gracias por motivarnos, en esta clase si me senti un poco perdido jjajajaj, hasta en mis notas tuve que poner que debo reforzar a produndidad, y agradecer al teacher por su contenido y ganas de ayudar a los demas.
colega espero me puedas ayudar que consejos me das este ultimo video me revento y eso que vi el video varias veces que tiepo de ejercicios realizaste ?
Me hizo volar la cabeza estos 2 ultimos videos jajaja, continuo aprendiendo del mejor, gracias @jonmircha
Excelente!👋🏻😉
Un quebradero de cabeza estas últimas dos clases, pero qué útiles son para entender lo que pasa por detrás. Gracias por tan buena explicación, crack!
👋🏻😉
He tomado tres cursos de Javascript nativo, y ahora que estoy aprendiendo React busqué reforzar los conocimientos que tengo de Javascript y me encontré con este curso. Debo decir que por lejos es el mejor curso de Javascript que he tomado, mejor incluso que los de pago que tengo en Udemy. Gracias Jon por tu dedicación y excelente contenido.
🥰🙌🏻
Me ha explotado la cabeza con estas ultimas dos clases jaja, aunque con las clases sera mas facil, pero debo entener como funcionan los prototipos. Saludos y gracias por el contenido
De nada :) que bueno que te sirvió, comparte para llegar a más gente
pfff tuve que ver 3 veces para entenderlo :) valió la pena volverlo a ver. Solo espero que lo recuerde cuando lo tenga que hacer solo jejjeje
jejeje 💪🤓
Gracias JON y gracias a dios nos dieron las CLASES porque esto la verdad es un lio, lo entendí, pero no dejar de ser un lio y otro montón de cosas para recordar o no funciona, de seguro en algún video posterior existe una forma mas fácil que hace los mismo.
Me hace acordar a una vez que fui a un parque y pregunte a un tipo en la entrada, como se llega a las termas, me dijo seguí los carteles y comencé a dar vueltas por toda la ciudad, cantidad de vueltas, no podía creer lo que me hacían hacer con el auto. Cuando llegue al parque lo primero que pregunte es "no hay forma de irme de aqui si tanto lio", y la chica me dijo SI, agarra esta calle y pégale derecho hasta la ruta, respondí "no te puedo creer hay una calle que llega desde la ruta directo aqui, y me contesto SI, LO QUE PASA ES QUE PONEN ESOS CARTELES PARA QUE LA GENTE NO SOLO VENGA AL PARQUE SINO TAMBIEN CONOZCAN LA CIUDAD" hasta el día de hoy me acuerdo y me quiero MATAR.
Y por si quieren saber donde, esto fue en San Clemente del Tuyu en la costa Argentina para llegar al parque de Aguas Termales (me recorrí media ciudad) no sigan los carteles.
jajajajajaja
@@jonmircha Si vos te reis, a mi me crearon un complejo, veo un cartel y lloro. JAJAJA, lo peor de todo es que la historia es 100% cierta, dios quiera algún Argentino la confirme.... la explicacion que el 90% de la gente va a San Clemente mas por el parque de Mundo Marino o Las termas y por eso usan esa estrategia, quieren que la gente conozca también la ciudad y lo que tiene para ofrecer..... (un laberinto) --- jajajaja.
Un abrazo. Espero que el video que sigue me muestre la recta a la ruta y la herencia.
Ufff, joyita de canal. Ahora necesito sacar ganas de donde sea para poder avanzar muchisimo hasta junio que comienzo la uni; mejor llegar adelantado y no tener que aprender todo a palo, apurado y mal
;) Bienvenido
Veo que no soy el único al que le has reventado la cabeza. Creo que aún no estoy entendiendo bien como funciona todo esto. Aun así sigo a ver si consigo entenderlo más adelante. Gracias Sr. Mircha
🤯🤭😂 la POO en JS es de lo más difícil de entender es normal
Clase n° 23 : Se empezó a complicar.
si jajjajaja
jajaja si
Yo no entiendo una mierda desde la clase anterior y eso que estuve repasando todo lo visto de nuevo y hasta hago resúmenes de las clases. Voy a seguir intentando aprender.
Es un rollaso esto con Javascript me acostumbré mucho a Java y su implementación de POO
se complia es con el asincronimos :v
ya parezco un radio viejo repitiendo lo meeeeeeeeeeeeeeeesmo, pero este y el video anterior fueron unas excelentes clases, ya en el pasado habias explicado esto del prototipo, pero esta vez le distes profundidad y tambien tenes un video antes del ecmaScript 6 de la POO en javascript aquí le diste vigencia y muuuuuuuuuuuuuuucha.....! hey compa ya te comparti con todos hasta le di tu link a la nasa para que en la proxima sonda que vaya a salir se vaya tu lista de reproducción
Sos el mejor, nadie explica tan bien como vos. Muchas gracias por compartir con tanta generosidad
Hola, muchas gracias😉👋🏻
A mi me parece excelente estas explicaciones.Hay que recordad que nosotros como programadores debemos de construir y crear, entonces es importante que entendamos como funcionan las cosas, ya que des esta manera tendremos todo controlado.
😉👋🏻
vengo de Java y a mi parecer, conociendo la herencia en ese lenguaje, en Javascript es muy entendible la herencia por cadena prototípica... gracias
:)
Opino lo mismo
Excelente curso para los que estamos empezando desde cero, actualizado , completo y con buenas explicaciones detallada ,gracias jonmircha por tus aportes, gracias a Dios que todo lo que se de la web es por este canal
Llegue demasiado lejos, he dejado de ver los cursos por pereza o por que tenia cosas que hacer, pero ahora si lo voy a ver
Lo compartí en todos los grupos de Facebook sobre desarrollo web en los que estoy. Sos un maquina! Saludos de un Argentino en España!
Muchisimas gracias!
Muy bien profe, al principio me estaba enredando pero despues fui armando el código y viendo y lo entendí perfectamente !!!
Felicidades!
todo se veia tan facil hasta que llegaron estas dos ultimas clases, tendré que volver a verlas 😅 pd: me esta encantando el curso!
🙂👍
Muy buen profesor, debo decir que sus métodos de enseñanza y la paciencia al explicar, hacen que sea mucho mas entendible, la clave en esto es entender lo que es el prototipo y como funciona, gracias por todo el gran trabajo que haces!
👋🏻😉
La mejor clase de herencia que he visto, empece a ver este concepto en typescript pero ahora verlo en JavaScript vanilla me hace entender muchas cosas. No es nada facil ni de entender ni de explicar. Muchas gracias por esta clase profe
😉👋🏻
Estos Ultimos videos creo que son parte de esa meseta que dicen que....o seguis o abandonas. Me alegra saber que somos muchos los que tenemos que volver a reproducir algunos videos por lo complejo de JS en algunas cosas.
😉👋🏻 ánimo
Por fin empiezo a entender la POO gracias a ti
😃👍🏻
Trate de no ver los comentarios para avanzar sin miedo/distracciones y ahora que los leo al terminar esta clase, quedé impactada, porque pienso igual que la mayoría jaja, pero la forma en que lo enseñas @jonmircha es genial y lo hace mas ameno. Gracias 🙏
Gracias por comentar
Seguimos por aqui con este excelente cuso, debo reconocer que esta clase si me exploto la cabeza jeje
🤣🤭🤯
Necesito un profe como jon mircha en mi facu!!! Excelente video, maestro nato!
👋🏻😉
Y aqui ya se empieza a poner interesante JS jaja, estaba aprendiendo POO con C# pero aqui con los prototipos se pone algo confuso pero entendible, me esta encantando esto, gracias profe Jon.
👋🏻😉
Muchas gracias profesor Jon Mircha tuve que ver varias veces este video porque me estaba mareando pero ya voy entendiendo, además es la primera vez que escucho sobre herencia prototípica, pero mis ganas de aprender mas sobre JS es mucha.
:) En el siguiente verás que todo se simplifica con las clases
@@jonmircha Justo estoy en el siguiente video profesor, yo escucho herencia y se me viene la palabra extends :D
justamente :)
cuando vi esto por primera ves se me dificulto entenderlo pero ahora que ya acabe todo el curso y vuelvo a ver esto para darle un repaso lo entiendo completamente y lo veo mucho mas sencillo de lo que pense
👋🏻😉
Eres el mejor Jon, muchas gracias por tu ayuda y tus explicaciones, por todo este esfuerzo que haces con tu plataforma.
Con mucho gusto
Es de reconocer todo el esmero puesto para explicar en cada clase maestro, pero en esta al explicarnos que es lo que JavaScript hace tras bambalinas se nota ese amor que hay por la docencia y el bello arte de la programacion. infinitas gracias!!
😉👋🏻
la clase fue un viaje astral, senti como todo lo visto hasta ahora iba tomando forma y se metia mas y mas en la cabeza, genio gracias por tanto.
🤯😉
Refrescando esto de la herencia prototipal.. Gracias Profesor JonMircha.. Saludos desde Venezuela 25/07/2023.. Esperando su curso de NODEJS 2023..
👋🏻😉
Gracias Jon por todo el contenido creado. Si bien ya he estudiado JS con tu curso estoy aprendiendo un montón de detalles que no me habían mencionado en el curso que hice anteriormente! Un abrazo
👋🏻😉
Me toco vérmelo 2 veces, la primera no entendí nada, pero lo escribí en VS, y en la segunda, repitiendo cada explicación y anotando en mi cuaderno, ahora lo entendí mejor, e hice un ejercicio ahí con motos y entendí mejor, el mejor explicando!!
👋🏻😉
Maestro Jon ya voy 3era reproduccion jeje , me esta quedando claro me hice un par de ejemplos inventados para ver lo aprendido y si estoy avanzando bien muchas gracias por los videos maestro
;)
¡Muchas gracias, viejon , la rebanas! ♡
🤣
sept 11 1969**sept 18 2023
gracias excelente curso
felicidades John Mircha
Gracias, saludos
Profe MIL Y MIL GRACIAS por tus Videos, en serio, son demasiado buenos, entiendo todo a la perfección.
:)
Muchas gracias! Excelente vídeo!
😉👍🏻
Esto de los prototipos parece ser super importante.
Excelente clase, entendí mucho mejor como funciona esto de los objetos.
Excelente!
Master! Excelente profesor, así se enseña!
😊🙌🏻
Excelente curso mejor que muchoooooooooooooooooooooos
😉👋🏻
Todo muy bien explicado gracias
😉👍🏻
Gracias.........esperando el estreno.
Te amo eres un duro, me di cuenta de que si los métodos de la clase padre están declarados en el constructor no se pueden sobreescribir o por lo menos no de la forma que vimos
👋🏻😉
Maestro Jon, este sí que me explotó la cabeza XDDD. Pero después de unas varias horas para entenderlo hice un "ejercicio" para recordarlo mejor. Tratando de hacer algo tipo arbol de vida de nuestra decendencia etc
Pero antes de ponerlo y que lo que quiera decir se pierda entre el código. Quiero decirte que realmente aprecio, como muchos lo que estás haciendo! No sabes cuánto te agradezco Maestro Jon!, poco a poco me va gustando más lo que es la programación gracias a ti. Terminé tus cursos de html y css y responsive y me fue súper bien, podría decir. Haciendo páginas complejas con puro maquetado y css. Después de un tiempo puliendo sin frameworks, o herramientas que me agilicen el trabajo, porque de verdad quería entender bien. Y todo gracias a ti! En fin, una vez más muchas gracias Jon!
function Chordata(vertebra, respira) {
this.vertebrado = vertebra;
this.respira = respira;
}
function Mammalia(vertebra, respira, primate, pelaje, cabello, amamanta) {
this.super = Chordata;
this.super(vertebra, respira)
this.primate = primate;
this.pelaje = pelaje;
this.cabello = cabello;
this.amamanta = amamanta;
}
Mammalia.prototype = new Chordata();
Mammalia.prototype.constructor = Mammalia;
function Carnivora(vertebra, respira, primate, pelaje, cabello, amamanta, carnivoro) {
this.super = Mammalia;
this.super(vertebra, respira, primate, pelaje, cabello, amamanta);
this.carnivoro = carnivoro;
}
Carnivora.prototype = new Mammalia();
Carnivora.prototype.constructor = Carnivora;
Carnivora.prototype.nadar = function (nombre) {
let name = nombre;
console.log(`soy ${nombre} y sí sé nadar`);
}
const ursus = new Carnivora("sí", "sí", "no", "sí", "no", "no", "sí")
console.log(ursus);
ursus.nadar("ursus");
function Primates(vertebra, respira, primate, pelaje, cabello, amamanta, escala) {
this.super = Mammalia;
this.super(vertebra, respira, primate, pelaje, cabello, amamanta);
this.escala = escala;
};
Primates.prototype = new Mammalia();
Primates.prototype.constructor = Primates;
function Cercopithecidae(vertebra, respira, primate, pelaje, cabello, amamanta, escala) {
this.super = Primates;
this.super(vertebra, respira, primate, pelaje, cabello, amamanta, escala);
};
Cercopithecidae.prototype = new Primates();
Cercopithecidae.prototype.constructor = Cercopithecidae;
const papio = new Cercopithecidae("sí", "sí", "sí", "sí", "no", "no", "sí")
console.log(papio);
function Hominidae(vertebra, respira, primate, pelaje, cabello, amamanta, escala) {
this.super = Primates;
this.super(vertebra, respira, primate, pelaje, cabello, amamanta, escala);
};
Hominidae.prototype = new Primates();
Hominidae.prototype.constructor = Hominidae;
function Hominini(vertebra, respira, primate, pelaje, cabello, amamanta, escala, genero) {
this.super = Hominidae;
this.super(vertebra, respira, primate, pelaje, cabello, amamanta, escala);
this.genero = genero;
};
Hominini.prototype = new Hominidae();
Hominini.prototype.constructor = Hominini;
function Homo(vertebra, respira, primate, pelaje, cabello, amamanta, escala, genero) {
this.super = Hominini;
this.super(vertebra, respira, primate, pelaje, cabello, amamanta, escala, genero);
};
Homo.prototype = new Hominini();
Homo.prototype.constructor = Homo;
function Pan(vertebra, respira, primate, pelaje, cabello, amamanta, escala, genero) {
this.super = Hominini;
this.super(vertebra, respira, primate, pelaje, cabello, amamanta, escala, genero);
};
Pan.prototype = new Hominini();
Pan.prototype.constructor = Pan;
const homosapiens = new Homo("sí", "sí", "sí", "sí", "sí", "depende sexo", "no", "homo");
console.log(homosapiens);
const troglodytes = new Pan("sí", "sí", "sí", "sí", "no", "depende sexo", "sí", "Pan");
console.log(troglodytes);
esto me da como output del homosapiens
Homo {vertebrado: 'sí', respira: 'sí', primate: 'sí', pelaje: 'sí', super: ƒ, …}
amamanta: "depende sexo"
cabello: "sí"
escala: "no"
genero: "homo"
pelaje: "sí"
primate: "sí"
respira: "sí"
super: ƒ Chordata(vertebra, respira)
vertebrado: "sí"
[[Prototype]]: Hominini
amamanta: undefined
cabello: undefined
constructor: ƒ Homo(vertebra, respira, primate, pelaje, cabello, amamanta, escala, genero)
escala: undefined
genero: undefined
pelaje: undefined
primate: undefined
respira: undefined
super: ƒ Chordata(vertebra, respira)
vertebrado: undefined
[[Prototype]]: Hominidae
amamanta: undefined
cabello: undefined
constructor: ƒ Hominini(vertebra, respira, primate, pelaje, cabello, amamanta, escala, genero)
escala: undefined
pelaje: undefined
primate: undefined
respira: undefined
super: ƒ Chordata(vertebra, respira)
vertebrado: undefined
[[Prototype]]: Primates
amamanta: undefined
cabello: undefined
constructor: ƒ Hominidae(vertebra, respira, primate, pelaje, cabello, amamanta, escala)
escala: undefined
pelaje: undefined
primate: undefined
respira: undefined
super: ƒ Chordata(vertebra, respira)
vertebrado: undefined
[[Prototype]]: Mammalia
amamanta: undefined
cabello: undefined
constructor: ƒ Primates(vertebra, respira, primate, pelaje, cabello, amamanta, escala)
pelaje: undefined
primate: undefined
respira: undefined
super: ƒ Chordata(vertebra, respira)
vertebrado: undefined
[[Prototype]]: Chordata
constructor: ƒ Mammalia(vertebra, respira, primate, pelaje, cabello, amamanta)
respira: undefined
vertebrado: undefined
!!!!!!!!!!! [[Prototype]]: Object !!!!!!!!!!!!!!! El padre del padre del padre del padre del padre del padre del padre XD
😉👍🏻
Excelente trabajo master!
🤓👋🏻
Seria bueno que por cada tema tengamos un ejercicio para resolver. Gracias por compartir conocimiento, se aprecia demasiado.
Los hay aprendejavascript.org/
@@jonmircha Gracias 🥺🥺
@@jonmircha Pero no hay ejercicios de clases, solo de logica y api
Excelente curso, excelente explicacion ... gracias por tu tiempo y tus ganas de enseñar.
Gracias !!!
Que bonita clase profesor muchas gracias. Es usted un gran maestro de Js.
😉🙌🏻
Hola Jon muchas gracias por esta clase, acá si tuve que prestar mucha atención pero igual lo bueno es que para mas adelante se me va ser mas fácil cuando me toque realizar de la manera mas sencilla ya que ahora soy mas novato, muchas gracias por esta clase como siempre!!!
👍🏻🤓
me sentía todo un crack porque lo demás lo entendí bien hice algunas practicas y ejercicios pero brother aquí me estallo la cabeza
👋🏻😉 ánimo
@@jonmircha hay sigo, hay sigo pero voy a tener que verlos de nuevo
que bien explica este Jon, es increíble.
😉😉✌
Un saludo Jon, encantado con tu forma de explicar, así es que se aprende, conociendo las tripas de las cosas :)
😉👋🏻
gracias gran video muy claro el concepto la herencia
👋🏻😉
estuve dos dias tratando de entender esta clase y todavia no me quedó del todo!!!
ánimo👋🏻😉
PUA por fin entendi la poo, despues de 1 semestre mal hecho en la u con java, te amo js
🙈
19:15 hahaha como me hizo reir eso, lo cual es cierto ya me empezaba a asustar pero es un gran docente y pude entender muy bien la herencia con los prototipos, voy avanzando muy emocionado por el curso. Muchas gracias Profe!
🤭✌🏻
excelente video gracias
😉👍🏻
muy bueno mirachi sigue asi
;)
gracias amigo, muy amable ..
👋🏻😉
Dos Clases para que me diga, en la otra clase lo mismo pero mejor! jejejej Excelente Clase!
esta clase me encanto es bueno saber esta información por mas que actualmente ya se use la azúcar sintáctica de Clases en JS (me agrada como suena eso ajaja), ayuda de gran forma saber como funciona en realidad esto de JS basada en prototipos. Muy buena clase.
🤓👍🏻
Me estoy atrazando con este curso xd
Muy bueno el curso !!!!! Gracias por compartir tu conocimiento.
De nada, comparte para llegar a más gente
Bro explicas muy bien , lo unico malo que con los audris me comi mas gritos que cuando era chico , gracias de todas formas , muy bueno el contenido
¯\_(ツ)_/¯
Eres el mejorrrrrr
👋🏻😉
Muchas gracias, esta genial el curso! Explicas muy bien. Lo que no me queda claro es el prototipo, es decir entiendo lo que hace pero si tendría que definirlo no sabría explicarlo.
Aquí un enlace para que entiendas mejor developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos
@@jonmircha Gracias Jon!
simplemente, es el mecanismo que tiene JS para llevar a cabo la herencia
Jon, soy senior en POO, en JS soy novato, me parece que los que venimos de POO, tenemos que desaprender algunas cosas antes de tratar de entender la herencia de JS basada en prototipos, según lo que te entendí e investigué, hice esto, tratando de que sea muy simple y funcione el mecanismo de herencia, sin el azúcar sintáctico de las "clases": Es un ejemplo sencillo para principiantes y que resume la herencia basada en prototipos.
function Animal (nombre,genero){
this.nombre=nombre;
this.genero=genero;
}
Animal.prototype.comer=function(){console.log(`Yo como`)};
function Perro (nombre,genero,raza){
Animal.call(this,nombre,genero);
this.raza=raza;
}
Perro.prototype=Object.create(Animal.prototype);
Perro.prototype.constructor=Perro;
miPerro=new Perro("Dog","Macho","Labrador");
console.log(miPerro);
function Pitbull(nombre,genero,raza,edad){
Perro.call(this,nombre,genero,raza,edad);
this.edad=edad;
}
Pitbull.prototype=Object.create(Perro.prototype);
Pitbull.prototype.constructor=Pitbull;
miPitbull=new Pitbull("Malote","Macho","Pitbull",5);
console.log(miPitbull);
lo que pasa es que para entender las clases hay que verlo de esta forma porque más adelante ocuparemos super en el contructor de las mismas
muy vacano tu ejemplo, pero no me queda claro la linea 27:
Animal.call(this,nombre,genero);
que función cumple ese this??
@@jorgemariobenjumeaaguirre5056 te recomiendo el video del canal "Programando el destino" en donde usan esa forma de indicar y explican especificamente el uso de ese this th-cam.com/video/qH_gb10K_MQ/w-d-xo.html
No hay nada mejor que ver la documentación oficial... jjejeje. Está chévere el ejercicio, me abrió los ojos para ir a buscar en la documentación, como realmente es la sintaxys.
@@jorgemariobenjumeaaguirre5056 this si no entiendo mal ahi hace referencia a la funcion constructora animal, es un requisito de la funcion call, y ya los otros parametros son los de la funcion constructora Animal en si.
Este señor acabará teniendo M de suscriptores. Es un capo.
:)
En este video te generé unas 4 reproducciones. Mind blown!
jejejeje
venia pisteando como un campeon hasta que llegue a esta clase , se entiende muy claro. lo unico que no me quedo claro es el super que cosa loca
Pasa a la siguiente ahí verás la luz al final del túnel😅
Lo voy a tomar con pinzas, o sea por un lado esta bueno saber el origen, o lo que se utilizaba 2015 para atrás, si creo que es fundamental saber diferenciar que en js las class no son necesariamente clases en si, sino mas bien es una forma de escritura que se utiliza para mejorar la legibilidad, y que aun así, todo se basa en prototipos.
Estoy seguro que el próximo video es el que cuenta con la implementación de class. xD
Buen video, te sigo y recomiendo como siempre. Saludos desde ARG (Y)
;) toma lo que te sirva
Este curso esta genial
:)
Muy buen curso, aunque algo complicado las herencias prototípicas :(, gracias por las clases :D
😉👌🏻
Gracias Jonathan!!!!!
Con gusto
Esto que vemos con los prototipos y la herencia es el mismo mecanismo que se ejecuta, por ejemplo, con el objeto Sting o Array los cuales tienen al Object como prototipo padre?
Sí
alguien mas por el capitulo 23? me falta mucho pero veo todos los videos grande jon
🤓👍🏻
espero que a alguien le sirva de algo las notas personales que hice de este video. Pero usando otro ejercicio más cortito jeje
se asignó la función constructora principal llamada Animal, de ahí vamos a sacar el tipo de animal. A esta misma se le asignó a su prototype (que en este caso es object y su constructor es Animal) un método el cual nos va servir para sus hijos respectivamente.
en este caso Perro es una función constructora la cual vamos a basar de Animal
para esto le decimos
function Perro(pelo, ojos, apodo) {
Animal.call(this, pelo, ojos)
this.apodo = apodo;
}
Nombre de la función constructora padre . punto call (this (para indicar el contexto, en este caso Perro), Args (pelo, ojos))
adicionalmente le agregamos un nuevo parámetro llamado apodo el cual lo debemos poner en la propiedades de Perro, ya que es propio de este.
//Perro.prototype = Object.create(Animal.prototype);
Aquí le decimos que el prototipo de perro ahora va a ser igual a la función Animal
Perro.prototype = new Animal();
Y aquí cambiamos (asignamos realmente) el constructor al prototype Animal, porque al cambiar el prototipo que tenía antes Perro por la función Animal(), este constructor que tenía antes Perro el cual era su mismo constructor, se pierde, y solo queda el constructor que le corresponde a Animal en Animal > Object > Constructor:animal.
Entonces para asignarle al prototype el constructor le decimos simplemente: lo cual hará que ahora tengamos
proto Animal > constructor: Perro + proto Object > Constructor: Animal.
"+" indica: hermano de constructor, o sea no está dentro de constructor sino en el mismo nivel
Perro.prototype.constructor = Perro;
a Animal le asignamos el siguiente método
Animal.prototype.correr = function () {
console.log(`corriendo...`);
}
y como Perro desciende e hicimos todo para que Perro tomará correspondientemente las propiedades y métodos de Animal pues podemos usarlo en nuevos objetos creados con el operador New como en:
const scooby = new Perro("marrón", "oscuros", "scooby doo");
scooby.correr();
(nosotros le estamos asignando los métodos al prototipo Animal, entonces, también es el porqué debemos asignarle ese mismo prototype que tiene los métodos a sus hijos constructores, como hicimos con Perro usando
Perro.prototype = new Animal();
entonces nosotros estamos cambiando el prototype que tenía perro, en cual antes de cambiarlo era el proto Object (el más primitivo), y el cual contenía el constructor Perro.
Nostros hemos reemplazado ese Prototype en Perro con la línea de código que hicimos, lo cual nos deja
1 se reemplazó el prototype de Perro, adquiriendo este el Prototype Animal
2 Animal es el prototype ahora de Perro, al cual se le asignarán los nuevos métodos que creemos
3 El prototype de Animal a su vez es el proto object (el más primitivo)
4 el prototype Object (el más primitivo) de Animal contiene los métodos asignados a la misma, lo cual pueden ser heredadas a las nuevas funciones constructoras hijas y usados en nuevas instancias (hijas claro) creadas con New
5 Por último debemos notar que el protótipo que tenía antes Perro (que era Object), al ser reemplazado por proto Animal hemos eliminado así mismo el constructor que este tenía (cuando Perro tenía Object como proto) (pasando de Object > constructor: Perro, a: Animal > Object > Constructor: Animal). Entonces debemos asignárselo al nuevo prototype que tiene Perro (el cual es Animal), para que este aparezca en el prototype Animal. Es por eso que usamos
Perro.prototype.constructor = Perro;
Aquí lo que estamos haciendo es, agregándole al protitipo actual de mi objeto Perro un método llamado constructor (esto respondió el maestro Jon como respuesta a uno de los que comentaron con una pregunta )
/* perro, desglosamos, vemos prototype Animal, Animal es prototype de perro porque así lo asignamos con
Perro.prototype = new Animal();
Al prototype que le asignamos a Perro para que (heredara los atributos de Animal y métodos) que es Animal, le asignamos el método ladrar con
Perro.prototype.ladrar = function (){}
lo cual es por lo que podemos usar el método ese con Perro. Este prototype asignado Animal tiene a su vez el constructor que creamos (ya que el que tenía antes Perro fue eliminado al reemplazar el prototype object que tenía antes por el prototype Animal) con:
Perro.prototype.constructor = Perro;
Este prototype asignado Animal, también a su vez tiene los atributos nombre y sexo. Aquí no aparecen los métodos del prototipo de Animal, el cual es Object. La unica forma de que aparezcan al desglosar proto Perro >Proto Animal, es que hayamos hecho una sobreescritura de métodos como hicimos con el método sonar.
Aquí el único que debería aparecer (y eso si no activamos ningún método) es el de ladrar, y eso porque se lo asignamos directamente al prototype de Perro después de haber hecho el remplazo de prototypes para hacer la herencia prototípica.
!!como prototipo de Animal tenemos el prototype Object, en el cual (dentro de Object) SÍ se van a encontrar los métodos que pueden ser heredables a Perro (e hijos si existen) y usados con nuevas instancias de Perro con el statement new.
Porque aquí fue en donde nosotros asignamos los métodos que iba a tener (tiene) Animal
function Animal(nombre, genero) {
//atributos
this.nombre = nombre;
this.sexo = genero;
}
//métodos agregados al prototipo (proto Object más primitiva) de la función constructora llamada Animal
Animal.prototype.sonar = function () {
console.log("Hago sonidos porque estoy vivo");
}
Y aquí podemos por qué y cómo es que se puede usar métodos de padres en instancias creadas de las mismas funciones padres, o de instancias creadas de funciones constructoras hijas de esa función constructora padre (ya que las funciones constructoras hijas heredan métodos y propiedades y atributos gracias al cambio de prototipo Perro.prototype = new Animal();), gracias a la desdencia y aplicando los respectivos métodos para aplicar la herencia prototípica
😃👏🏻
algo mas complejas estas clases 😵💫
😉
Gracias!
Gracias por comentar
Excelente clase, ya había visto estos temas en otros cursos pero aquí me ha quedado muy claro
😉✌
Buen curso, Voy a comentar cada video que valla viendo, Numero #23
Gracias por tu apoyo
Muchas gracias
De nada
Las clases de este curso están super cool!
Muchas gracias!
Hola buen dia Jon, buen video complicado pero bien, espero poder aprender mas... creo que es cuestion de practica.
😉👋🏻
Hola profe Jon Mirchar! Antes que nada agradecerte por tu trabajo. Pude aprender mucho con tus enseñanzas.
Tengo una duda, en algunos vídeos creo que mencionas que debemos evitar duplicar métodos en los objetos para ahorrar espacio en memoria. Ahora bien, si creamos una función constructora Perro que herede de Animal, como por ejemplo, lo que tu propones en el vídeo:
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function Perro(nombre, genero, tamanio) {
this.super = Animal,
this.super(nombre, genero),
this.tamanio = tamanio
}
Perro.prototype ..... etc....
Perro.prototype.constructor ..... etc.....
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
En este caso, cada instancia de Perro va a tener el método super(). Entiendo que tal vez sea una de las pocas maneras de lograr heredar las propiedades. Y dada una instancia de Perro llamada firu y suponiendo que Animal tiene un método saludar(), podríamos acceder a los métodos del prototype animal de la siguiente forma:
firu.super.prototype.saludar()
¿Si todas las instancias de Perro tienen este método super() no estaríamos sobrecargando la memoria?
Investigando encontré una solución:
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function Perro(nombre, genero, tamanio) {
Animal.call(this, nombre, genero), // Las propiedades de Animal quedaban bajo el objeto que crea Perro
this.tamanio = tamanio
}
Perro.prototype ..... etc....
Perro.prototype.constructor ..... etc.....
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////
No obstante, me quede con la duda del método super ¿Se estaría sobrecargando el espacio en memoria o hay algo que ignoro?
Gracias!!!
😀👌🏻
Gracias! excelente material
De nada, comparte 🤗 para llegar a más gente 🤓
Repasar
3:54
6:11
Los prototipos hacen referencia a la interaccion entre dos clases, donde una de ellas toma las "propiedades o atributos" de la otra clase, para asi operar con ellas como si fuera suya, como un print, operaciones x, y asi
👋🏻😉
@@jonmircha jon, has pensado en hacer un curso de SASS?saludos
Hola, pregunta, entonces en la jerarquia, si creo un prototipo exacto como el perro, pero que ahora se llame gato, con los mismos metodos de Animal, y un metodo exclusivo del gato que diga miauu miauu, entonces, tanto perro como gato serian Hermanos?, e "Hijos" del prototipo Animal, y Animal, a su vez, sería hija del prototipo nativo de Javascript llamado "Object"? Espero haberme dado a entender, saludos!
Sí
Todos estos conceptos de prototipos tambien son aplicables en TypeScript ?
Muy buena tu forma de enseñar.
En esta parte tengo una duda: al escribir en la función constructora Perro:
this.super = Animal
por lo que veo se estaría creando una propiedad llamada "super" que va a contener las propiedades de Animal, y que se va a ver reflejado cuando creemos una instancia de Perro.
Por eso no es mejor usar "call" para invocar a Animal? Por ejemplo escribir:
function Perro(nombre, genero, tamanio) {
Animal.call(this, nombre, genero);
this.tamanio = tamanio;
}
Pregunto esto para entender bien qué es mas ventajoso en el caso que quiera escribir funciones constructoras en vez de clases, y saber que practicas serian mejor cuando aplico estos conceptos.
Muchas gracias!
¡Es un gran punto! Puedes usar "call" y la herencia prototípica de ambas maneras, cada una tiene sus pros y contras.
Muy buen video, me olvide de comentar en los otros, se han pasado rápido estos primeros 23.
;)
hola Jon sos un capo gracias por todo. me quedó una duda, por que pusiste estas dis lineas
Perro.prototype = new Animal();
Perro.prototype.constructor = Perro;
si ya le asignabas el super en Perro. probpe y sin esas 2 lineas funciona todo bien. Que funcion tienen entonces?
Gracias!
Si no entienden las clases y prototipos no se hagan problema, continuen con el curso y una vez esten en el final vuelvan a verlo y se les va a hacer facil ya que se acostumbraran a su uso. se puede continuar con el curso tranquilamente y despues volver a reforzar todo esto. saludos
👋🏻😉
Durísimo este capítulo, como me cuesta la herencia en POO😅
😅
Muy buena clase!!!! Muchas gracias!!! Me quedó una duda de la clase anterior y que no pude darle respuesta con esta clase y es que cuando intento llamar a los métodos de la función constructora Animal, como Animal.sonar(); me da un error de que sonar no es una función; pero cuando lo hago con su instancia snoopy, por ejemplo con snoopy.sonar(); se reconoce como una función. No entiendo porque pasa esto. Me podría explicar, por favor?