Εισαγωγή στις κλάσεις και τα αντικείμενα στο JavaScript

Τώρα θα ασχοληθούμε με τη μελέτη της Αντικειμενοστρεφούς Προγραμματισμού (ΟΟΠ) στο JavaScript. Ας εξετάσουμε ένα παράδειγμα από την πραγματική ζωή, και στη συνέχεια ας το μεταφέρουμε στο JavaScript.

Ως παράδειγμα, ας πάρουμε ένα αυτοκίνητο. Έχει ρόδες, χρώμα, τύπος αμαξώματος, κυβισμός κινητήρα και ούτω καθεξής. Επιπλέον, ο οδηγός μπορεί να του δίνει εντολές: να κινηθεί, να σταματήσει, να στρίψει δεξιά, αριστερά κλπ.

Μπορούμε να πούμε ότι υπάρχει μια ορισμένη κλάση αυτοκινήτων, που έχει κοινά χαρακτηριστικά (όλα έχουν ρόδες και σε όλα μπορούν να δοθούν εντολές).

Ένα συγκεκριμένο αυτοκίνητο, που στέκεται στο δρόμο - είναι ένα αντιπρόσωπος αυτής της κλάσης, ή, με άλλα λόγια, ένα αντικείμενο αυτής της κλάσης. Όλα τα αντικείμενα αυτής της κλάσης έχουν ιδιότητες: αριθμός τροχών, χρώμα, τύπος αμαξώματος και μεθόδους: να κινηθεί, να σταματήσει, να στρίψει δεξιά, αριστερά.

Με άλλα λόγια, η ίδια η κλάση είναι ένα σχέδιο, σύμφωνα με το οποίο στο εργοστάσιο κατασκευάζονται αυτοκίνητα. Το αντικείμενο είναι το ίδιο το αυτοκίνητο, κατασκευασμένο σύμφωνα με αυτά τα σχέδια.

Στο JavaScript μια κλάση δημιουργείται με τη λέξη-κλειδί class, ακολουθούμενη από το όνομα αυτής της κλάσης. Ας φτιάξουμε την κλάση Car:

class Car {
	// εδώ κώδικας, δηλαδή το JavaScript-σχέδιο αυτοκινήτου
}

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

Για αυτό, μέσα στην κλάση θα γράψουμε την ιδιότητα color και την ιδιότητα fuel:

class Car {
	color; // χρώμα αυτοκινήτου
	fuel;  // ποσότητα καυσίμου
}

Ας φτιάξουμε τώρα τις μεθόδους της κλάσης μας. Στο JavaScript οι μέθοδοι μοιάζουν με συνηθισμένες συναρτήσεις, μόνο που δηλώνονται χωρίς τη λέξη-κλειδί function.

Όπως αναφέρθηκε παραπάνω, το αυτοκίνητό μας μπορεί να κινηθεί, μπορεί να στρίψει, μπορεί να σταματήσει. Ας φτιάξουμε τις αντίστοιχες μεθόδους στην κλάση μας:

class Car {
	color; // χρώμα αυτοκινήτου
	fuel;  // ποσότητα καυσίμου
	
	// Εντολή να κινηθεί:
	go() {
		// κάποιος JavaScript κώδικας
	}
	
	// Εντολή να στρίψει:
	turn() {
		// κάποιος JavaScript κώδικας
	}
	
	// Εντολή να σταματήσει:
	stop() {
		// κάποιος JavaScript κώδικας
	}
}

Φτιάξαμε το σχέδιο του αυτοκινήτου μας. Τώρα πρέπει να πάμε στο εργοστάσιο και να φτιάξουμε ένα αντικείμενο αυτής της κλάσης (δηλαδή ένα συγκεκριμένο αυτοκίνητο).

Στο JavaScript αυτό γίνεται με τη λέξη-κλειδί new, μετά από την οποία γράφεται το όνομα της κλάσης:

new Car; // διατάσσουμε στο εργοστάσιο να φτιάξει ένα αυτοκίνητο

Ωστόσο, αν απλά δημιουργήσουμε ένα αντικείμενο κλάσης - αυτό δεν θα οδηγήσει πουθενά (είναι το ίδιο με το, για παράδειγμα, να δηλώσουμε έναν πίνακα και να μην τον αποθηκεύσουμε πουθενά). Χρειαζόμαστε μια μεταβλητή για την αποθήκευση αυτού του αντικειμένου.

Ας ονομάσουμε αυτή τη μεταβλητή myCar - ας γράψουμε σε αυτήν το αντικείμενο που δημιουργήσαμε:

let myCar = new Car;

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

let myCar = new Car; // διατάσσουμε στο εργοστάσιο να φτιάξει ένα αυτοκίνητο

myCar.color = 'red'; // το βάφουμε κόκκινο
myCar.fuel = 50;     // γεμίζουμε καύσιμα

Όλα, το αυτοκίνητό μας δημιουργήθηκε, βαφτίστηκε και ανεφοδιάστηκε. Τώρα μπορούμε να του δίνουμε εντολές μέσω των μεθόδων αυτού του αυτοκινήτου.

Η πρόσβαση στις μεθόδους γίνεται επίσης μέσω τελείας, αλλά, σε αντίθεση με την ιδιότητα, μετά από το όνομα της μεθόδου ακολουθούν παρενθέσεις. Ας δώσουμε εντολές στο αντικείμενό μας:

myCar.go();
myCar.turn();
myCar.stop();