He

Herencia en JavaScript

1 ejercicio

Acerca de Herencia

La herencia es una forma de crear relaciones de tipo padre-hijo entre clases. La clase hija (a la que a veces se llama subclase) tiene acceso al comportamiento y a los datos que define la clase padre (a la que a veces se llama superclase).

class Pet {
  constructor(name) {
    this.name = name;
  }

  introduce() {
    console.log(`This is my pet, ${this.name}.`);
  }
}

class Dog extends Pet {}

const dog = new Dog('Otis');
dog.introduce();
// => This is my pet, Otis.

La palabra clave extends en la declaración de la clase hija establece una relación con la clase padre a través de la cadena de prototipos.

Los objetos creados por el constructor de la clase hija tendrán el prototipo de la clase padre en su cadena de prototipos, lo que les da acceso a cualquier método o dato definido por la clase padre.

const dog = new Dog('Otis');

Dog.prototype.isPrototypeOf(dog); // => true
Pet.prototype.isPrototypeOf(dog); // => true
Pet.prototype.isPrototypeOf(Dog.prototype); // => true

Pet.prototype.hasOwnProperty('introduce'); // => true
Dog.prototype.hasOwnProperty('introduce'); // => false
dog.hasOwnProperty('introduce'); // => false

Constructores

Si la clase hija no define una función constructora, se usa la función constructora de la clase padre. Sin embargo, si la clase hija define su propia función constructora, hay que llamar explícitamente al constructor de la clase padre. Para invocar al constructor de la clase padre desde el ámbito del constructor de la clase hija, se usa la palabra clave super.

class Pet {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Pet {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const dog = new Dog('Otis', 'Pug');

Como el constructor de la clase padre se encarga de inicializar un objeto nuevo y de asignarlo a this, hay que llamarlo antes de que el constructor de la clase hija use this.

class Dog extends Pet {
  constructor(name, breed) {
    // using 'this' before calling the parent constructor with 'super'
    this.breed = breed;
    super(name);
  }
}

const dog = new Dog('Otis', 'Pug');
// => ReferenceError: Must call super constructor in derived class before accessing 'this'...

Definir métodos en la clase hija

Una clase hija puede definir su propio comportamiento además del comportamiento que hereda de la clase padre.

Esta es una de las razones clave para usar la herencia: tener clases hijas especializadas, con sus propios datos y métodos únicos, que se relacionan mediante los métodos y los datos compartidos que aporta la clase padre.

class Dog extends Pet {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  describe() {
    console.log(`${this.name} is a ${this.breed}.`);
  }
}

const dog = new Dog('Otis', 'Pug');
dog.introduce();
dog.describe();
// => 'This is my pet, Otis.'
// => 'Otis is a Pug.'

Sobrescribir métodos heredados de la clase padre

Una clase hija también puede sobrescribir el comportamiento de un método definido por la clase padre y reemplazarlo o ampliarlo con el comportamiento que defina la propia clase hija.

class Cat extends Pet {
  // replacing parent class behavior
  introduce() {
    console.log(`This is my cat, ${this.name}.`);
  }
}

class Dog extends Pet {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  describe() {
    console.log(`${this.name} is a ${this.breed}.`);
  }

  // extending parent class behavior
  introduce() {
    super.introduce();
    this.describe();
  }
}

const cat = new Cat('Milo');
cat.introduce();
// => 'This is my cat, Milo.'

const dog = new Dog('Otis', 'Pug');
dog.introduce();
// => This is my pet, Otis.
// => Otis is a Pug.

Para llamar a un método definido en la clase padre desde el cuerpo de un método con el mismo nombre en la clase hija, se debe usar la palabra clave super para hacer referencia a la clase padre.

Editar en GitHub El enlace se abre en una ventana o pestaña nueva

Aprende Herencia