Me encanta que antes de enseñarnos un concepto, nos expliquen cómo era antes de ES6. 💚
0:00/9:45
Me encanta que antes de enseñarnos un concepto, nos expliquen cómo era antes de ES6. 💚
//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é...")
}
}
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é...")
}
}
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
Elcira Ibarra
Me encanta que antes de enseñarnos un concepto, nos expliquen cómo era antes de ES6. 💚
Elcira Ibarra
Y también me encantan los ejemplos de lo No recomendado para comparar con las Buenas Prácticas. 💚
Sergio Brandon De Lucio Chavero
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.
Carina Payleman
Gerardo Ferreyra
Markin Piero Pulache Guarniz
buen aporte
LEONARD CUENCA
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é...") } }
Markin Piero Pulache Guarniz
buen aporte
Donovan RM
Sandra Rosa Arroyo Paredes
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.
Wladimir Rocha
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
Reinaldo Mendoza
Antes era horrible
chris alicea
brutal
Jefred Bedoya
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?
Juan Antonio Delgadillo Carrillo
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
Brandon Lee Aguero Fernandez
Ana Rotela Cabrera
Resumen de la clase
Luis Eduardo Payano Villar
Sebastian contreras
Muy bien explicado el tema de herencia y facil de entender!!
Irving Juárez
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) }
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();
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
//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