Herencia en JavaScript

Clase 17 de 24 • Curso de Clean Code y Buenas Prácticas con JavaScript

Clase anteriorSiguiente clase

Elcira Ibarra

student•

Me encanta que antes de enseñarnos un concepto, nos expliquen cómo era antes de ES6. 💚

Elcira Ibarra

student•

Y también me encantan los ejemplos de lo No recomendado para comparar con las Buenas Prácticas. 💚

Sergio Brandon De Lucio Chavero

student•

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

student•

Sintaxis a partir de ES6, para herencia:

constructor
extends
super()

//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é...")
  }
}

Gerardo Ferreyra

student•

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();

Markin Piero Pulache Guarniz

student•

buen aporte

LEONARD CUENCA

student•

Clase 17: Herencia en JavaScript

Recuerda que al usar Clases tenemos la habilidad de generar herencia
Desde el EMAC6 podemos usar la palabra reservada extends para crear herencias
Anteriormente se usaba prototype para generar herencia

Ejemplo 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

student•

buen aporte

Donovan RM

student•

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

Wladimir Rocha

student•

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

Sandra Rosa Arroyo Paredes

student•

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:

La palabra clave 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.
Los métodos de la clase padre se heredan automáticamente.
Los métodos heredados pueden ser sobrescritos en la clase hija.
Se pueden añadir nuevos métodos y propiedades a las clases hijas.
El operador 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.

Reinaldo Mendoza

student•

Antes era horrible

chris alicea

student•

brutal

Juan Antonio Delgadillo Carrillo

student•

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

student•

Ya los hay los puedes encontrar en la ruta de node y la ruta de angular

Ana Rotela Cabrera

student•

Resumen de la clase

Luis Eduardo Payano Villar

student•

//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

Sebastian contreras

student•

Muy bien explicado el tema de herencia y facil de entender!!

Irving Juárez

student•

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)
}