Sobes.tech
Junior

Explica cómo funciona la herencia en JavaScript.

sobes.tech AI

Respuesta de la IA

La herencia en JavaScript se basa en prototipos. Cada objeto tiene una propiedad interna [[Prototype]] (accesible a través de __proto__ o Object.getPrototypeOf()), que apunta a otro objeto.

Al intentar acceder a una propiedad o método de un objeto, si no se encuentra directamente en el objeto, JavaScript lo busca en [[Prototype]] de ese objeto, luego en [[Prototype]] del prototipo, y así sucesivamente por la cadena de prototipos, hasta llegar al final (Object.prototype), cuyo [[Prototype]] es null.

Esto es herencia basada en prototipos.

Las clases en ECMAScript 2015 (ES6) son azúcar sintáctico sobre la herencia prototípica. Proporcionan una sintaxis más familiar para trabajar con prototipos y crear jerarquías de objetos.

Ejemplo de uso de herencia prototípica antes de ES6:

// Constructor del padre
function Animal(name) {
  this.name = name;
}

// Método del padre en el prototipo
Animal.prototype.sayHi = function() {
  console.log(`Hola, soy ${this.name}`);
};

// Constructor del hijo
function Dog(name, breed) {
  // Llamada al constructor del padre
  Animal.call(this, name);
  this.breed = breed;
}

// Establecer el prototipo del hijo al prototipo del padre
// Manteniendo la referencia al constructor Dog
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Añadir método del hijo
Dog.prototype.bark = function() {
  console.log("¡Guau-guau!");
};

// Crear instancia del hijo
const myDog = new Dog("Boby", "Labrador");

// Usar métodos del padre y del hijo
myDog.sayHi(); // Salida: Hola, soy Boby
myDog.bark();  // Salida: ¡Guau-guau!

Ejemplo de uso de clases (ES6):

// Clase padre
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Hola, soy ${this.name}`);
  }
}

// Clase hija que hereda de Animal
class Dog extends Animal {
  constructor(name, breed) {
    // Llamada al constructor del padre
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("¡Guau-guau!");
  }
}

// Crear instancia de la clase hija
const myDog = new Dog("Rex", "Pastor alemán");

// Usar métodos del padre y del hijo
myDog.sayHi(); // Salida: Hola, soy Rex
myDog.bark();  // Salida: ¡Guau-guau!

Puntos clave de la herencia en JavaScript:

  • Prototipos: Cada objeto tiene un prototipo.
  • Cadena de prototipos: La búsqueda de propiedades o métodos recorre los prototipos hacia arriba.
  • [[Prototype]]: Propiedad interna que apunta al prototipo.
  • __proto__: Forma obsoleta pero común de acceder a [[Prototype]].
  • Object.getPrototypeOf(): Forma recomendada de acceder a [[Prototype]].
  • Constructores y prototype: Usados antes de ES6 para crear objetos y establecer sus prototipos.
  • Clases (ES6): Azúcar sintáctico para herencia prototípica usando class, extends, super.