Σύγχρονο JavaScript με ES6-ES13 (Οδηγός JS)

Κληρονόμηση στην JavaScript: Με ES6 σε σύγχρονες κλάσεις

Όλα τα βίντεο του μαθήματος Μοντέρνο JavaScript με ES6-ES13 (οδηγός JS)

Κληρονομιά είναι μια κεντρική έννοια στην αντικειμενοστραφή προγραμματισμό που σου επιτρέπει να επεκτείνεις υπάρχουσες κλάσεις και να χρησιμοποιείς τις ιδιότητές τους καθώς και τις μεθόδους τους. JavaScript έχει εισαγάγει μια νεότερη και πιο robust σύνταξη κληρονομιάς με την εισαγωγή του ES6, η οποία είναι πολύ πιο εύκολη στη διαχείριση από τις αρχικές μεθόδους Prototype. Σε αυτόν τον οδηγό θα σου δείξω πώς να εφαρμόσεις την κληρονομιά στην JavaScript χρησιμοποιώντας το keyword extends και θα σου εξηγήσω βήμα προς βήμα πώς να καλέσεις σωστά τον κατασκευαστή της βασικής κλάσης με super.

Βασικές Γνώσεις

  • Η κληρονομιά στην JavaScript γίνεται μέσω του keyword extends.
  • Ο κατασκευαστής της βασικής κλάσης πρέπει να καλείται με super.
  • Οι μεταβλητές στιγμής μπορούν να αναφέρονται μέσω του keyword this στην εξαγόμενη κλάση.

Οδηγίες Βήμα προς Βήμα

Δημιουργία της Βασικής Κλάσης

Για να ξεκινήσουμε με την κληρονομιά, αρχικά δημιουργούμε μια βασική κλάση ονόματι Shape. Σε αυτήν την κλάση ορίζουμε τον κατασκευαστή και μερικές μεθόδους.

Εδώ ορίζεις μια κλάση Shape που έχει έναν κατασκευαστή. Μπορείς σε αυτόν τον κατασκευαστή να ορίσεις μεταβλητές και συναρτήσεις στις οποίες μπορούν να έχουν πρόσβαση άλλες κλάσεις.

Κληρονομικότητα στη JavaScript: Με το ES6 σε σύγχρονες κλάσεις

Εξερεύνηση της Υποκλάσης

Μετά τη δημιουργία της βασικής κλάσης, μπορείς τώρα να δημιουργήσεις μια υποκλάση που κληρονομεί από το Shape. Σε αυτό το παράδειγμα θα ονομάσουμε την νέα κλάση ConcreteShape.

Σε αυτήν την υποκλάση χρησιμοποιούμε το keyword extends για να δηλώσουμε ότι το ConcreteShape κληρονομεί από το Shape. Ο κατασκευαστής της υποκλάσης καλεί τον κατασκευαστή της βασικής κλάσης Shape με super(), που είναι απαραίτητο για να υλοποιήσουμε σωστά την κληρονομιά.

Δημιουργία Εγχειριδίου της Υποκλάσης

Τώρα που έχουμε δημιουργήσει την υποκλάση, ήρθε η ώρα να δημιουργήσουμε μια στιγμή αυτής της κλάσης.

Εδώ δημιουργείς ένα νέο αντικείμενο myShape από την κλάση ConcreteShape και περνάς μια περιγραφή στον κατασκευαστή. Στη συνέχεια καλείς τη μέθοδο print, η οποία εκτυπώνει την περιγραφή.

Προσθήκη Επιπλέον Ιδιοτήτων

Μπορείς να προσθέσεις περισσότερες ιδιότητες στην υποκλάση σου ή ακόμα και μεθόδους που είναι συγκεκριμένες για αυτήν την υποκλάση.

Εδώ έχεις επεκτείνει την κλάση ConcreteShape προσθέτοντας επιπλέον παραμέτρους στον κατασκευαστή.

Χρήση της Κληρονομιάς

Με το keyword super μπορείς να καλέσεις τη μέθοδο describe της βασικής κλάσης για να συνδυάσεις τις ιδιότητες της βασικής κλάσης και της υποκλάσης.

Σύνοψη – Κληρονομιά στην JavaScript: Από το ES6 στο ES13

Σε αυτό το tutorial έχεις μάθει πώς λειτουργεί η κληρονομιά στην JavaScript, ειδικότερα με τη νέα σύνταξη class. Έχεις δει πώς να ορίζεις κλάσεις, πώς να κληρονομείς από μια βασική κλάση και πώς να καλείς σωστά τον κατασκευαστή. Αυτοί οι μηχανισμοί διευκολύνουν τη διατήρηση μιας καθαρής και συντηρήσιμης βάσης κώδικα, επιτρέποντάς σου να επαναχρησιμοποιείς αποτελεσματικά τις δυνατότητες.

Συχνές Ερωτήσεις

Ποια είναι η διαφορά ανάμεσα σε super() και this;super() χρησιμοποιείται για να καλέσει τον κατασκευαστή της βασικής κλάσης, ενώ το this αναφέρεται στην στιγμή της τρέχουσας κλάσης.

Γιατί είναι καλύτερη η χρήση κλάσεων Es6 σε σύγκριση με τα πρωτότυπα;Οι κλάσεις ES6 προσφέρουν μια πιο καθαρή και διαισθητική σύνταξη, διευκολύνοντας την ανάγνωση και κατανόηση του κώδικα.

Μπορώ να έχω πολλές βασικές κλάσεις;Όχι, η JavaScript δεν υποστηρίζει πολλαπλή κληρονομιά. Μια κλάση μπορεί να κληρονομήσει μόνο από μια άλλη κλάση.

Τι συμβαίνει αν δεν καλέσω super();Αν δεν καλέσεις super(), θα έχεις ένα σφάλμα, καθώς ο κατασκευαστής της βασικής κλάσης, που αρχικοποιεί ό,τι είναι απαραίτητο για την κλάση, δεν θα εκτελείται.