Sobes.tech
Junior

Εξηγήστε πώς λειτουργεί η κληρονομιά στη JavaScript.

sobes.tech AI

Απάντηση από AI

Η κληρονομιά στην JavaScript βασίζεται σε πρωτότυπα. Κάθε αντικείμενο έχει μια εσωτερική ιδιότητα [[Prototype]] (προσβάσιμη μέσω __proto__ ή Object.getPrototypeOf()), που δείχνει σε ένα άλλο αντικείμενο.

Όταν προσπαθείτε να αποκτήσετε πρόσβαση σε μια ιδιότητα ή μέθοδο ενός αντικειμένου, και αυτή δεν βρίσκεται άμεσα στο αντικείμενο, η JavaScript την αναζητά στο [[Prototype]] αυτού του αντικειμένου, στη συνέχεια στο [[Prototype]] του πρωτότυπου και έτσι συνεχίζει κατά μήκος της αλυσίδας πρωτοτύπων, μέχρι να φτάσει στο τέλος (Object.prototype), του οποίου το [[Prototype]] είναι null.

Αυτή είναι η κληρονομιά βασισμένη σε πρωτότυπα.

Οι κλάσεις στην ECMAScript 2015 (ES6) είναι μια συντακτική ζάχαρη πάνω από την πρωτότυπη κληρονομιά. Παρέχουν μια πιο οικεία σύνταξη για εργασία με πρωτότυπα και δημιουργία ιεραρχιών αντικειμένων.

Παράδειγμα χρήσης της πρωτότυπης κληρονομιάς πριν από το ES6:

// Κατασκευαστής γονέα
function Animal(name) {
  this.name = name;
}

// Μέθοδος του γονέα στο πρωτότυπο
Animal.prototype.sayHi = function() {
  console.log(`Γεια, είμαι ${this.name}`);
};

// Κατασκευαστής παιδιού
function Dog(name, breed) {
  // Κλήση του κατασκευαστή του γονέα
  Animal.call(this, name);
  this.breed = breed;
}

// Ορισμός του πρωτότυπου του παιδιού στο πρωτότυπο του γονέα
// Διατηρώντας την αναφορά στον κατασκευαστή Dog
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Προσθήκη μεθόδου στο παιδί
Dog.prototype.bark = function() {
  console.log("Γαβ-γαβ!");
};

// Δημιουργία στιγμιότυπου του παιδιού
const myDog = new Dog("Boby", "Labrador");

// Χρήση των μεθόδων του γονέα και του παιδιού
myDog.sayHi(); // Έξοδος: Γεια, είμαι Boby
myDog.bark();  // Έξοδος: Γαβ-γαβ!

Παράδειγμα χρήσης κλάσεων (ES6):

// Γονική κλάση
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Γεια, είμαι ${this.name}`);
  }
}

// Υποκλάση που κληρονομεί από το Animal
class Dog extends Animal {
  constructor(name, breed) {
    // Κλήση του κατασκευαστή του γονέα
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Γαβ-γαβ!");
  }
}

// Δημιουργία στιγμιότυπου της υποκλάσης
const myDog = new Dog("Rex", "Γερμανικός ποιμενικός");

// Χρήση των μεθόδων του γονέα και του παιδιού
myDog.sayHi(); // Έξοδος: Γεια, είμαι Rex
myDog.bark();  // Έξοδος: Γαβ-γαβ!

Βασικά σημεία της κληρονομιάς στην JavaScript:

  • Πρωτότυπα: Κάθε αντικείμενο έχει ένα πρωτότυπο.
  • Αλυσίδα πρωτοτύπων: Η αναζήτηση ιδιοτήτων ή μεθόδων διατρέχει τα πρωτότυπα προς τα πάνω.
  • [[Prototype]]: Εσωτερική ιδιότητα που δείχνει στο πρωτότυπο.
  • __proto__: Παλιός, αλλά συχνά χρησιμοποιούμενος τρόπος πρόσβασης στο [[Prototype]].
  • Object.getPrototypeOf(): Συνιστώμενος τρόπος πρόσβασης στο [[Prototype]].
  • Κατασκευαστές και prototype: Χρησιμοποιούνταν πριν από το ES6 για τη δημιουργία αντικειμένων και τον ορισμό των πρωτοτύπων τους.
  • Κλάσεις (ES6): Συντακτικός ζάχαρη για πρωτότυπη κληρονομιά με λέξεις-κλειδιά class, extends, super.