Sobes.tech
Junior

Magyarázza el, hogyan működik az öröklődés a JavaScriptben.

sobes.tech MI

Válasz az MI-től

A JavaScript öröklődés prototípusokon alapul. Minden objektumnak van egy belső tulajdonsága [[Prototype]] (amely elérhető a __proto__ vagy az Object.getPrototypeOf() segítségével), amely egy másik objektumra mutat.

Amikor megpróbálunk hozzáférni egy objektum tulajdonságához vagy metódusához, és az nem található közvetlenül az objektumban, a JavaScript megkeresi azt az [[Prototype]]-ban, majd a prototípus lánc következő elemében, egészen addig, amíg el nem éri a végét (az Object.prototype objektumot), amelynek [[Prototype]] értéke null.

Ez a prototípus alapú öröklődés.

Az ECMAScript 2015 (ES6) osztályai szintaktikus cukorként szolgálnak a prototípus alapú örökléshez. Egyszerűbb szintaxist kínálnak a prototípusok kezeléséhez és az objektumhierarchiák létrehozásához.

Példa a prototípus alapú öröklés használatára ES6 előtt:

// Szülő konstruktor
function Animal(name) {
  this.name = name;
}

// Szülő metódusa a prototípuson
Animal.prototype.sayHi = function() {
  console.log(`Szia, én ${this.name}`);
};

// Utód konstruktor
function Dog(name, breed) {
  // A szülő konstruktorának hívása
  Animal.call(this, name);
  this.breed = breed;
}

// Az utód prototípusának beállítása a szülő prototípusára
// A Dog konstruktor hivatkozásának megőrzése
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Az utód metódusának hozzáadása
Dog.prototype.bark = function() {
  console.log("Vau-vau!");
};

// Példány létrehozása
const myDog = new Dog("Bobi", "Labrador");

// A szülő és az utód metódusainak használata
myDog.sayHi(); // Kiírja: Szia, én Bobi
myDog.bark();  // Kiírja: Vau-vau!

Az osztályok (ES6) használata:

// Szülő osztály
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Szia, én ${this.name}`);
  }
}

// Örökölt osztály, amely az Animal-ból származik
class Dog extends Animal {
  constructor(name, breed) {
    // A szülő konstruktorának hívása
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Vau-vau!");
  }
}

// Példány létrehozása
const myDog = new Dog("Reks", "Német juhász");

// A szülő és az utód metódusainak használata
myDog.sayHi(); // Kiírja: Szia, én Reks
myDog.bark();  // Kiírja: Vau-vau!

A JavaScript öröklődés főbb pontjai:

  • Prototípusok: Minden objektumnak van prototípusa.
  • Prototípus lánc: Tulajdonság vagy metódus keresésekor a lánc mentén haladunk felfelé.
  • [[Prototype]]: Belső tulajdonság, amely a prototípust mutatja.
  • __proto__: Régi, de gyakran használt módja a [[Prototype]] elérésének.
  • Object.getPrototypeOf(): Ajánlott módszer a [[Prototype]] elérésére.
  • Konstruktorok és prototype: Az ES6 előtt az objektumok létrehozására és prototípusuk beállítására használták.
  • Osztályok (ES6): Szintaktikus cukor a prototípus alapú örökléshez, a class, extends, super kulcsszavakat használva.