3.3 Τα αντικείμενα στη JavaScript

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

Ένα αντικείμενο στη JavaScript ορίζεται χρησιμοποιώντας τη σύνταξη με τις αγκύλες {} και αποτελείται από ένα σύνολο ζεύγη “κλειδί: τιμή”, όπου το κλειδί είναι μια συμβολοσειρά (string) και η τιμή μπορεί να είναι οποιοδήποτε τύπος δεδομένων, όπως ακέραιος (integer), δεκαδικός (float), συμβολοσειρά, λογική τιμή, πίνακας, άλλο αντικείμενο, και πολλά άλλα.

Ας δούμε ένα παράδειγμα:

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York"
};

console.log(person.firstName); // Εκτύπωση του προσώνυμου (firstName)
console.log(person.lastName); // Εκτύπωση του επωνύμου (lastName)
console.log(person.age); // Εκτύπωση της ηλικίας (age)
console.log(person.city); // Εκτύπωση της πόλης (city)

Στο παράδειγμα αυτό, ορίζουμε ένα αντικείμενο person που περιέχει πληροφορίες για ένα πρόσωπο. Το αντικείμενο αποτελείται από τέσσερα ζεύγη “κλειδί: τιμή”, όπου το κλειδί αντιστοιχεί σε μια ιδιότητα (π.χ. firstName, lastName, age, city) και η τιμή αντιπροσωπεύει την τιμή αυτής της ιδιότητας (π.χ. “John”, “Doe”, 30, “New York”).

Μπορούμε να προσπελάσουμε τις ιδιότητες του αντικειμένου χρησιμοποιώντας τον τελεστή “.” (dot operator) και το όνομα της ιδιότητας. Για παράδειγμα, χρησιμοποιούμε person.firstName για να προσπελάσουμε το προσώνυμο του ατόμου και person.lastName για να προσπελάσουμε το επώνυμο.

Ορίζετε (και δημιουργείτε) ένα αντικείμενο στη JavaScript με ένα αντικειμενικό λογότυπο (object literal):

var person = {  
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York"
};

Στο παράδειγμα αυτό, ορίζουμε ένα αντικείμενο person χρησιμοποιώντας το αντικειμενικό λογότυπο (object literal). Το αντικείμενο περιλαμβάνει τις ιδιότητες firstName, lastName, age και city, και τις αντίστοιχες τιμές “John”, “Doe”, 30 και “New York”.

Το αντικειμενικό λογότυπο σας επιτρέπει να ορίσετε τις ιδιότητες και τις τιμές του αντικειμένου με μια συντομία, χρησιμοποιώντας τη σύνταξη { key: value }. Μπορείτε να προσθέσετε όσες ιδιότητες θέλετε, ανάμεσα σε αγκύλες { }, και να τους δώσετε τις αντίστοιχες τιμές.

[adinserter block=”2″]

Μετά τη δημιουργία του αντικειμένου, μπορείτε να προσπελάσετε τις ιδιότητες του χρησιμοποιώντας τον τελεστή . (dot operator), όπως π.χ. person.firstName, person.lastName, κ.λπ.

Τα ζεύγη “κλειδί: τιμή” στα αντικείμενα της JavaScript ονομάζονται ιδιότητες (properties):

Στο παράδειγμα μας:

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York"
};

Οι ιδιότητες του αντικειμένου person είναι τα firstName, lastName, age και city. Το κάθε ζεύγος “κλειδί: τιμή” αντιπροσωπεύει μια ιδιότητα του αντικειμένου.

Μπορείτε να προσπελάσετε τις ιδιότητες ενός αντικειμένου χρησιμοποιώντας τον τελεστή . (dot operator), όπως π.χ. person.firstName, person.lastName, κ.λπ. Κάθε ιδιότητα αντιστοιχεί σε μια τιμή, που μπορεί να είναι οποιοδήποτε τύπος δεδομένων.

Μπορείτε επίσης να προσπελάσετε τις ιδιότητες ενός αντικειμένου χρησιμοποιώντας τη σύνταξη των αγκύλων [ ], όπως π.χ. person["firstName"], person["lastName"], κ.λπ. Αυτό μπορεί να είναι χρήσιμο όταν το όνομα της ιδιότητας περιέχει κενά ή ειδικούς χαρακτήρες, ή όταν το όνομα προκύπτει από μεταβλητές ή εκφράσεις.

Μπορείτε να προσπελάσετε τις ιδιότητες ενός αντικειμένου με δύο τρόπους:

1. Χρησιμοποιώντας τον τελεστή . (dot operator):

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York"
};

console.log(person.firstName); // Προσπέλαση της ιδιότητας με τον τελεστή . (dot operator)
console.log(person.lastName); // Προσπέλαση της ιδιότητας με τον τελεστή . (dot operator)

2. Χρησιμοποιώντας τη σύνταξη των αγκύλων [ ]:

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York"
};

console.log(person["firstName"]); // Προσπέλαση της ιδιότητας με τη σύνταξη των αγκύλων []
console.log(person["lastName"]); // Προσπέλαση της ιδιότητας με τη σύνταξη των αγκύλων []

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

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

Τα αντικείμενα στη JavaScript μπορούν επίσης να έχουν μεθόδους.

Οι μέθοδοι είναι ενέργειες που μπορούν να εκτελεστούν σε αντικείμενα.

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

var person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); // Κλήση της μεθόδου fullName() του αντικειμένου person

Στο παράδειγμα αυτό, το αντικείμενο person περιλαμβάνει μια ιδιότητα fullName, η οποία είναι ορισμένη ως μια συνάρτηση. Η συνάρτηση αυτή επιστρέφει το πλήρες όνομα του ατόμου, συνδυάζοντας τις ιδιότητες firstName και lastName του αντικειμένου. Καλούμε τη μέθοδο fullName() με τη χρήση του τελεστή () και εκτυπώνουμε το αποτέλεσμα.

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

Στη JavaScript, η λέξη-κλειδί this αναφέρεται σε ένα αντικείμενο.

Το ποιο αντικείμενο αναφέρεται από το this εξαρτάται από τον τρόπο που χρησιμοποιείται ή καλείται το this.

[adinserter block=”3″]

Υπάρχουν τέσσερις πρωταρχικοί τρόποι που χρησιμοποιείται το this στη JavaScript:

1. Σε μια μέθοδο αντικειμένου, το this αναφέρεται στο αντικείμενο που καλεί τη μέθοδο.
2. Σε μια συνάρτηση, το this αναφέρεται στο αντικείμενο που καλεί τη συνάρτηση (αν καλείται με τη σύνταξη αντικείμενο.συνάρτηση()).
3. Σε μια συνάρτηση, στον αδρινό χώρο (global scope), το this αναφέρεται στο αντικείμενο παγκόσμιας περιοχής (global object), που είναι το παράθυρο (window) στον περιηγητή.
4. Σε μια συνάρτηση κατασκευής (constructor function), το this αναφέρεται στο νέο αντικείμενο που δημιουργείται μέσω της συνάρτησης κατασκευής.

Το this επιτρέπει την πρόσβαση στις ιδιότητες και τις μεθόδους ενός αντικειμένου κατά τη διάρκεια της εκτέλεσης κώδικα. Αναφέρεται στο τρέχον αντικείμενο που είναι ενεργό στο περιβάλλον εκτέλεσης κατά τη διάρκεια της εκτέλεσης του κώδικα.

Για να προσπελάσετε μια μέθοδο αντικειμένου, χρησιμοποιείτε την ακόλουθη σύνταξη:

objectName.methodName()

Στην παραπάνω σύνταξη, objectName είναι το όνομα του αντικειμένου και methodName είναι το όνομα της μεθόδου που θέλετε να προσπελάσετε. Η σύνταξη αυτή καλεί τη μέθοδο του αντικειμένου και εκτελεί τον κώδικα που περιέχεται μέσα στη μέθοδο.

Ας δούμε ένα παράδειγμα:

var person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); // Κλήση της μεθόδου fullName() του αντικειμένου person

Στο παραπάνω παράδειγμα, χρησιμοποιούμε τη σύνταξη person.fullName() για να προσπελάσουμε και να καλέσουμε τη μέθοδο fullName() του αντικειμένου person. Η μέθοδος επιστρέφει το πλήρες όνομα του ατόμου, συνδυάζοντας τις ιδιότητες firstName και lastName. Με τη χρήση του τελεστή (), καλούμε τη μέθοδο και εκτελούμε τον κώδικα που περιέχεται μέσα σε αυτήν. Το αποτέλεσμα της μεθόδου εκτυπώνεται μέσω της συνάρτησης console.log().

Αν προσπελάσετε μια μέθοδο χωρίς τις παρενθέσεις () τότε θα επιστραφεί ο ορισμός της συνάρτησης (function definition).

Ας δούμε ένα παράδειγμα:

var person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName); // Προσπέλαση της μεθόδου fullName χωρίς παρενθέσεις

Στο παράδειγμα αυτό, προσπελαύνουμε την ιδιότητα fullName του αντικειμένου person χωρίς τις παρενθέσεις (). Αντί να καλέσουμε τη μέθοδο, επιστρέφεται ο ορισμός της συνάρτησης (function definition). Αυτό συμβαίνει επειδή η πρόσβαση σε μια μέθοδο χωρίς τις παρενθέσεις () αναφέρεται στην ίδια τη συνάρτηση ως αντικείμενο.

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

console.log(person.fullName()); // Κλήση της μεθόδου fullName με παρενθέσεις

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

Όταν δηλώνετε μια μεταβλητή στη JavaScript χρησιμοποιώντας τη λέξη-κλειδί “new”, η μεταβλητή δημιουργείται ως αντικείμενο. Ωστόσο, αυτό δεν πρέπει να γίνεται για τις πρωτογενείς (primitive) τύπους δεδομένων, όπως οι συμβολοσειρές (strings), οι αριθμοί (numbers) και οι λογικές τιμές (booleans).

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

Ας δούμε ένα παράδειγμα που δείχνει τη διαφορά μεταξύ της δήλωσης μεταβλητής ως πρωτογενή τύπο και ως αντικείμενο:

var name = "John"; // Δήλωση μεταβλητής ως πρωτογενής τύπος
var nameObj = new String("John"); // Δήλωση μεταβλητής ως αντικείμενο

console.log(typeof name); // Τύπος της μεταβλητής name: string
console.log(typeof nameObj); // Τύπος της μεταβλητής nameObj: object

Στο παράδειγμα αυτό, η μεταβλητή name δηλώνεται ως συμβολοσειρά (string) με την απλή σύνταξη, ενώ η μεταβλητή nameObj δηλώνεται ως αντικείμενο συμβολοσειράς με τη χρήση της λέξης-κλειδιού “new”. Το αποτέλεσμα της συνάρτησης typeof δείχνει ότι η μεταβλητή name έχει τύπο “string”, ενώ η μεταβλητή nameObj έχει τύπο “object”.

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