Σύστημα Παραθύρων

Η JavaScript περιλαμβάνει τις δυνατότητες για αντικειμενοστρεφή προγραμματισμό (OOP). Στον αντικειμενοστρεφή προγραμματισμό, θέλεις να δημιουργείς αντικείμενα (στιγμιότυπα) από "πρότυπα" (κλάσεις), ώστε αυτά να περιλαμβάνουν συγκεκριμένα δεδομένα και λειτουργικότητα. Οι ιδιότητες που περιέχουν δεδομένα ονομάζονται πεδία στο πλαίσιο του αντικειμενοστρεφούς προγραμματισμού, ενώ οι ιδιότητες που περιέχουν συναρτήσεις ονομάζονται μέθοδοι.

Η JavaScript δεν είχε καθόλου κλάσεις προτού αυτές προστεθούν στις προδιαγραφές της γλώσσας το 2015, αλλά επέτρεπε τον αντικειμενοστρεφή προγραμματισμό μέσω κληρονομικότητας βασισμένης σε πρωτότυπα. Και παρόλο που σήμερα υπάρχει διαθέσιμη η λέξη-κλειδί class, η JavaScript παραμένει μια γλώσσα βασισμένη σε πρωτότυπα.

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

Σύνταξη με πρωτότυπα

Συνάρτηση κατασκευαστή

Στη JavaScript, το πρότυπο (η κλάση) υλοποιείται μέσω μιας συνηθισμένης συνάρτησης. Όταν μια συνάρτηση πρόκειται να χρησιμοποιηθεί ως τέτοιο πρότυπο, ονομάζεται συνάρτηση κατασκευαστή και η σύμβαση είναι το όνομα της συνάρτησης να ξεκινά με κεφαλαίο γράμμα. Τα στιγμιότυπα (αντικείμενα) παράγονται από το πρότυπο χρησιμοποιώντας τη λέξη-κλειδί new κατά την κλήση της συνάρτησης κατασκευαστή.

function Car() {
  // ...
}

const myCar = new Car();
const yourCar = new Car();

Είναι σημαντικό να σημειώσεις ότι στη JavaScript τα στιγμιότυπα και η συνάρτηση κατασκευαστή διατηρούν μια σχέση μεταξύ τους ακόμα και αφού δημιουργηθούν τα στιγμιότυπα. Κάθε αντικείμενο στιγμιότυπο περιλαμβάνει μια κρυφή, εσωτερική ιδιότητα που αναφέρεται ως [[prototype]] στις προδιαγραφές της γλώσσας. Αυτή κρατά μια αναφορά στην τιμή του κλειδιού prototype της συνάρτησης κατασκευαστή. Ναι, το διάβασες σωστά, μια συνάρτηση JavaScript μπορεί να έχει ζεύγη κλειδιού/τιμής, επειδή είναι επίσης ένα αντικείμενο στα παρασκήνια.

Πεδία στιγμιοτύπων

Συχνά, θέλεις όλα τα παράγωγα αντικείμενα (στιγμιότυπα) να περιλαμβάνουν κάποια πεδία και να περνάς κάποιες αρχικές τιμές για αυτά όταν κατασκευάζεται το αντικείμενο. Αυτό μπορεί να γίνει μέσω της λέξης-κλειδί this. Μέσα στη συνάρτηση κατασκευαστή, το this αντιπροσωπεύει το νέο αντικείμενο που θα δημιουργηθεί μέσω του new. Το this επιστρέφεται αυτόματα από τη συνάρτηση κατασκευαστή όταν αυτή καλείται με το new.

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

function Car(color, weight) {
  this.color = color;
  this.weight = weight;
  this.engineRunning = false;
}

const myCar = new Car('red', '2mt');
myCar.color;
// => 'red'
myCar.engineRunning;
// => false

Μέθοδοι στιγμιοτύπων

Οι μέθοδοι προστίθενται μέσω της ιδιότητας prototype της συνάρτησης κατασκευαστή. Μέσα σε μια μέθοδο, μπορείς να προσπελάσεις τα πεδία του στιγμιότυπου μέσω του this. Αυτό λειτουργεί χάρη στον ακόλουθο γενικό κανόνα.

Όταν μια συνάρτηση καλείται ως μέθοδος ενός αντικειμένου, το this της ορίζεται στο αντικείμενο στο οποίο καλείται η μέθοδος. ¹

function Car() {
  this.engineRunning = false;
  // ...
}

Car.prototype.startEngine = function () {
  this.engineRunning = true;
};

Car.prototype.addGas = function (litre) {
  // ...
};

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

Η αλυσίδα των πρωτοτύπων

Το myCar στο παραπάνω παράδειγμα είναι ένα συνηθισμένο αντικείμενο JavaScript και αν το εξετάζαμε (π.χ. στην κονσόλα του περιηγητή), δεν θα βρίσκαμε μια ιδιότητα startEngine με συνάρτηση ως τιμή απευθείας μέσα στο αντικείμενο myCar. Πώς λειτουργεί τότε ο παραπάνω κώδικας;

Το μυστικό εδώ ονομάζεται αλυσίδα των πρωτοτύπων. Όταν προσπαθείς να προσπελάσεις οποιαδήποτε ιδιότητα (πεδίο ή μέθοδο) ενός αντικειμένου, η JavaScript ελέγχει πρώτα αν το αντίστοιχο κλειδί υπάρχει απευθείας στο ίδιο το αντικείμενο. Αν όχι, συνεχίζει να ψάχνει το κλειδί στο αντικείμενο στο οποίο παραπέμπει η ιδιότητα [[prototype]] του αρχικού αντικειμένου. Όπως αναφέρθηκε προηγουμένως, στο παράδειγμά μας το [[prototype]] δείχνει στην ιδιότητα prototype της συνάρτησης κατασκευαστή. Εκεί θα έβρισκε η JavaScript τη συνάρτηση startEngine, επειδή την προσθέσαμε εκεί.

function Car() {
  // ...
}

Car.prototype.startEngine = function () {
  // ...
};

Και η αλυσίδα δεν τελειώνει εκεί. Η ιδιότητα [[prototype]] του Car.prototype (myCar.[[prototype]].[[prototype]]) παραπέμπει στο Object.prototype (την ιδιότητα prototype της συνάρτησης κατασκευαστή Object). Περιέχει γενικές μεθόδους που είναι διαθέσιμες σε όλα τα αντικείμενα JavaScript, π.χ. τη toString(). Συμπερασματικά, μπορείς να καλέσεις τη myCar.toString() και αυτή η μέθοδος θα υπάρχει, επειδή η JavaScript αναζητά αυτή τη μέθοδο σε ολόκληρη την αλυσίδα των πρωτοτύπων.

Σύνταξη με κλάσεις

Σήμερα, η JavaScript υποστηρίζει τον ορισμό κλάσεων με τη λέξη-κλειδί class. Αυτό προστέθηκε στις προδιαγραφές της γλώσσας το 2015. Από τη μια πλευρά, αυτό παρέχει συντακτική ζάχαρη που κάνει τις κλάσεις ευκολότερες στην ανάγνωση και τη συγγραφή. Η νέα σύνταξη μοιάζει περισσότερο με τον τρόπο που γράφονται οι κλάσεις σε γλώσσες όπως η C++ ή η Java. Οι προγραμματιστές που έρχονται από αυτές τις γλώσσες προσαρμόζονται ευκολότερα. Από την άλλη πλευρά, η σύνταξη με κλάσεις ανοίγει τον δρόμο για νέα χαρακτηριστικά της γλώσσας που δεν είναι διαθέσιμα στη σύνταξη με πρωτότυπα.

Δηλώσεις κλάσεων

Με τη νέα σύνταξη, οι κλάσεις ορίζονται με τη λέξη-κλειδί class, ακολουθούμενη από το όνομα της κλάσης και το σώμα της κλάσης μέσα σε άγκιστρα. Το σώμα περιέχει τον ορισμό της συνάρτησης κατασκευαστή, δηλαδή μια ειδική μέθοδο με το όνομα constructor. Αυτή η συνάρτηση λειτουργεί ακριβώς όπως η συνάρτηση κατασκευαστή στη σύνταξη με πρωτότυπα. Το σώμα της κλάσης περιέχει επίσης όλους τους ορισμούς των μεθόδων. Η σύνταξη για τις μεθόδους είναι παρόμοια με τη συντομευμένη σημειογραφία που είδαμε για την προσθήκη συναρτήσεων ως τιμών μέσα σε ένα αντικείμενο, δες την έννοια Αντικείμενα.

class Car {
  constructor(color, weight) {
    this.color = color;
    this.weight = weight;
    this.engineRunning = false;
  }

  startEngine() {
    this.engineRunning = true;
  }

  addGas(litre) {
    // ...
  }
}

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

Να θυμάσαι ότι στα παρασκήνια, η JavaScript παραμένει μια γλώσσα βασισμένη σε πρωτότυπα. Όλοι οι μηχανισμοί που μάθαμε στην παραπάνω ενότητα "Σύνταξη με πρωτότυπα" εξακολουθούν να ισχύουν.

Ιδιωτικά πεδία, getters και setters

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

Ωστόσο, υπάρχει μια καθιερωμένη σύμβαση ότι τα πεδία και οι μέθοδοι που ξεκινούν με κάτω παύλα πρέπει να αντιμετωπίζονται ως ιδιωτικά. Δεν πρέπει ποτέ να προσπελαύνονται απευθείας από έξω από την κλάση.

Τα ιδιωτικά πεδία συνοδεύονται μερικές φορές από getters και setters. Με τις λέξεις-κλειδιά get και set μπορείς να ορίσεις συναρτήσεις που εκτελούνται όταν προσπελαύνεται ή όταν ανατίθεται μια ιδιότητα με το ίδιο όνομα με τη συνάρτηση.

class Car {
  constructor() {
    this._mileage = 0;
  }

  get mileage() {
    return this._mileage;
  }

  set mileage(value) {
    throw new Error(`Mileage cannot be manipulated, ${value} is ignored.`);
    // Just an example, usually you would not provide a setter in this case.
  }
}

const myCar = new Car();
myCar.mileage;
// => 0
myCar.mileage = 100;
// => Error: Mileage cannot be manipulated, 100 is ignored.

---

1. Παραδείγματα this - Ως μέθοδος αντικειμένου, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#as_an_object_method (αναφορά: 3 Δεκεμβρίου 2021) ↩