He

Herencia en JavaScript

1 ejercicio

Acerca de Herencia

La herencia es una forma de crear relaciones padre-hijo entre clases. La clase hija (a veces denominada subclase) tiene acceso al comportamiento y a los datos definidos por la clase padre (a veces denominada 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 proporciona 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, se debe llamar explícitamente al constructor de la clase padre. Para invocar el constructor de la clase padre desde el scope 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');

Dado que el constructor de la clase padre se encarga de inicializar un objeto nuevo y asignarlo a this, se debe llamar 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 heredado de la clase padre.

Esta es una de las razones clave para usar la herencia: disponer de clases hijas especializadas con sus propios datos y métodos únicos, relacionados mediante métodos y datos compartidos que proporciona 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 definido por la 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 nueva ventana o pestaña

Aprende Herencia