Sobes.tech
Junior

Vysvětlete, jak funguje dědičnost v JavaScriptu.

sobes.tech AI

Odpověď od AI

Dědičnost v JavaScriptu je založena na prototypu. Každý objekt má vnitřní vlastnost [[Prototype]] (dostupnou přes __proto__ nebo Object.getPrototypeOf()), která odkazuje na jiný objekt.

Při pokusu o přístup k vlastnosti nebo metodě objektu, pokud není nalezena přímo v objektu, JavaScript ji hledá v [[Prototype]] tohoto objektu, poté v [[Prototype]] prototypu a tak dále po řetězci prototypů, dokud nedosáhne konce (objektu Object.prototype), jehož [[Prototype]] je null.

Toto je prototypové dědění.

Třídy v ECMAScript 2015 (ES6) jsou syntaktickým cukrem nad prototypovým děděním. Nabízejí srozumitelnější syntaxi pro práci s prototypy a vytváření hierarchií objektů.

Příklad použití prototypového dědění před ES6:

// Konstruktor rodiče
function Animal(name) {
  this.name = name;
}

// Metoda rodiče na prototypu
Animal.prototype.sayHi = function() {
  console.log(`Ahoj, jsem ${this.name}`);
};

// Konstruktor potomka
function Dog(name, breed) {
  // Volání konstruktoru rodiče
  Animal.call(this, name);
  this.breed = breed;
}

// Nastavení prototypu potomka na prototyp rodiče
// Ukládáme odkaz na konstruktor Dog
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Přidání metody potomka
Dog.prototype.bark = function() {
  console.log("Haf-haf!");
};

// Vytvoření instance potomka
const myDog = new Dog("Bobeš", "Labrador");

// Použití metod rodiče a potomka
myDog.sayHi(); // Vypíše: Ahoj, jsem Bobeš
myDog.bark();  // Vypíše: Haf-haf!

Příklad použití tříd (ES6):

// Rodičovská třída
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Ahoj, jsem ${this.name}`);
  }
}

// Dědická třída, dědí od Animal
class Dog extends Animal {
  constructor(name, breed) {
    // Volání konstruktoru rodiče
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Haf-haf!");
  }
}

// Vytvoření instance dědické třídy
const myDog = new Dog("Rex", "Německý ovčák");

// Použití metod rodiče a potomka
myDog.sayHi(); // Vypíše: Ahoj, jsem Rex
myDog.bark();  // Vypíše: Haf-haf!

Hlavní body dědění v JavaScriptu:

  • Prototypy: Každý objekt má prototyp.
  • Řetězec prototypů: Při hledání vlastnosti nebo metody prohledávají prototypy vzhůru po řetězci.
  • [[Prototype]]: Vnitřní vlastnost odkazující na prototyp.
  • __proto__: Zastaralý, ale často používaný způsob přístupu k [[Prototype]].
  • Object.getPrototypeOf(): Doporučený způsob přístupu k [[Prototype]].
  • Konstruktory a prototype: Před ES6 se používaly k vytváření objektů a nastavování jejich prototypů.
  • Třídy (ES6): Syntaktický cukr pro prototypové dědění, používající klíčová slova class, extends, super.