Herencia en JavaScript
Contenido del curso
Nombre y uso de las variables
Ámbito de las variables
Funciones
Clases
Optimizaciones
Cierre
Herencia en JavaScript
Herencia en JavaScript
Contenido del curso
Elcira Ibarra
Elcira Ibarra
Sergio Brandon De Lucio Chavero
Carina Payleman
Gerardo Ferreyra
Markin Piero Pulache Guarniz
LEONARD CUENCA
Markin Piero Pulache Guarniz
Donovan RM
Sandra Rosa Arroyo Paredes
Wladimir Rocha
Reinaldo Mendoza
chris alicea
Jefred Bedoya
Juan Antonio Delgadillo Carrillo
Brandon Lee Aguero Fernandez
Ana Rotela Cabrera
Luis Eduardo Payano Villar
Sebastian contreras
Irving Juárez
Me encanta que antes de enseñarnos un concepto, nos expliquen cómo era antes de ES6. 💚
Y también me encantan los ejemplos de lo No recomendado para comparar con las Buenas Prácticas. 💚
Completamente, hay que conocerlo debido a que bastante código legacy está escrito así y a veces uno tiene que entrar a leer librerías que utilizan esa sintaxis.
Sintaxis a partir de ES6, para herencia:
//Clase padre class Person (name) { constructor(name) { this.name; } greet() { console.log(`Hola, mi nombre es ${this.name}`); } } //Clase hija class Developer extends Person () { constructor(name) { super(name); } writeCode(coffe) { coffee ? console.log ("Estoy desarrollando una nueva feature") : console.log("Necesito más café...") } }
Hay unos pequeños errores en el código, el cual corrigiendolos quedaria de la siguiente forma.
// Clase padre class Person { constructor(name) { this.name = name; } greet() { console.log(`Hola, mi nombre es ${this.name}`); } } // Clase hija class Developer extends Person { constructor(name) { super(name); } writeCode(coffee) { coffee ? console.log("Estoy desarrollando una nueva feature") : console.log("Necesito más café...") } } const developer = new Developer('Alex'); developer.greet(); // <-- método heredado. developer.writeCode();
buen aporte
Clase 17: Herencia en JavaScript
extends para crear herenciasprototype para generar herenciaEjemplo Herencia con EMAC6
//Clase padre class Person (name) { constructor(name) { this.name; } greet() { console.log(`Hola, mi nombre es ${this.name}`); } } //Clase hija class Developer extends Person () { constructor(name) { super(name); } writeCode(coffe) { coffee ? console.log ("Estoy desarrollando una nueva feature") : console.log("Necesito más café...") } }
buen aporte
code :
//Clase Padre // Antes de ES6 function Person(name) { this.name = name; } Person.prototype.greet = function () { return "Hello I am " + this.name; } var person = new Person("Alex"); console.log(person.name); //> Alex console.log(person.greet());//>Hello I am Alex //Clase Hija function Developer(name) { this.name = name; } //herencia con Prototipos Developer.prototype = Object.create(Person.prototype) Developer.prototype.writeCode = function (coffe) { if (coffe) console.log('I am working in a new feature'); else console.log('I need coffe, please!'); }; var dev = new Developer('Dono'); //accedo desde la clase hija a la funcion del Padre dev.greet()//> Hello I am Alex dev.writeCode()//>I need Coffe //Ahora con ES6 recomienda: //Sintaxis a partir de ES6: //Clase Padre class People { constructor(name) { this.name = name; } greet () { console.log('Hola! me llamo ' + this.name); } } // const cat = new Cat("Michi"); // console.log(cat.name); // console.log(cat.greet()); //Clase Hija class Developer extends People { constructor(name){ super(name); } writeCode(coffe){ coffe ? console.log('I am developing a new feature') : console.log('I need coffe!'); } } const dev = new Developer('Ing'); dev.greet();//Hola! me llamo Ing dev.writeCode(true);//I am developing a new feature
La herencia es un concepto fundamental en la programación orientada a objetos que permite crear nuevas clases basadas en clases existentes, heredando sus propiedades y métodos.
Puntos clave sobre la herencia en JavaScript:
extends se usa para crear una clase hija.super() se usa en el constructor de la clase hija para llamar al constructor de la clase padre.instanceof puede usarse para verificar la herencia.La herencia permite crear jerarquías de clases, promoviendo la re-utilización de código y permitiendo una organización más estructurada de las propiedades y comportamientos compartidos entre diferentes tipos de objetos.
Amé saber esto de como se hacía antes de ES6, no recuerdo si he visto de alguién más que explique eso, quizás si, pero igual no recuerdo. Muchas gracias Alex
Antes era horrible
brutal
en la clase hija cuando creamos el metodo writtingCode la profesora poner como parametro coffee pero segun lo visto en las primeras clases al ser un boolean no seria mejor poner hasCoffee como parametro?
respecto a POO y a Arrays si e aprendido pero solo en consola como hacer metodos o buscar cosas de un array que tiene metodos, pero ¿Como lo implemento en el html o nesesito saber hacerca de base de datos ? me gustaria un curso practico usando POO y Arrays
Resumen de la clase
//clase padre function person(name) { this.name = name; } person.prototype.greet = function() { console.log('Hello, my name is ' + this.name); }; //clase hija function student(name) { this.name = name; } // herencia student.prototype = Object.create(person.prototype); student.prototype.writeCode = function(book) { if (book) console.log('i am reeding the book'); else console.log('i am not reading anything'); }; var dev = new student('luis'); dev.greet(); dev.writeCode(); //// class Person{ constructor(person){ this.name = person; } greet(){ console.log(`Hello, my name is ${this.name}`); } } //////////////////////////////////////////////////////////////// //clase hija class Developer extends Person{ constructor(name){ super(name); } //herencia writeCode(coffee) { coffee? console.log('I am developing a new feature') : console.log ("I need Coffee") } } const dev = new Developer('Luis'); dev.greet(); dev.writeCode(true); ```person
Muy bien explicado el tema de herencia y facil de entender!!
Antes de ES6, para ejecutar el constructor de la clase padre, lo que ahora se hace con super(), antes se hacia de la siguiente manera
function Developer(name) { Person.call(this, ...arguments) }
Claro que aquí el problema era que el Function Constructor padre estaba harcodeado, ya que si queremos que Developer herede de otra "clase", se puede hacer de la siguiente manera:
function Developer(super, ...args){ if (super) super.apply(this, args) }