Υποενότητα 7.2: Κλάσεις JavaScript

Εισαγωγή στις κλάσεις JavaScript

Μέχρι τώρα έχετε ακούσει για τις κλέσεις μόνο στο πλαίσιο του CSS. Είναι αυτές που χρησιμοποιούμε για τη μορφοποίηση πολλαπλών στοιχείων σε μια σελίδα.

Ωστόσο, οι κλάσεις JavaScript δεν έχουν καμία σχέση με το στυλ.

Εισήχθησαν στην έκδοση ES6 της JavaScript και γενικά ο ρόλος τους είναι να μας παράσχουν μια πιο βολική σύνταξη για να δημιουργήσουμε συναρτήσεις δόμησης – Constructor functions

Χρησιμοποιώντας τις JavaScript classes, μπορούμε να ενσωματώσουμε όλα τα "χαρακτηριστικά" ενός αντικειμένου - object σε αυτές.

Μπορείτε να τους φανταστείτε ως πρότυπο - template  για να δημιουργήσετε πολλά αντικείμενα - objects.

Σύνταξη κλάσης JavaScript

There are two ways to define a JavaScript class. 

Ο πρώτος τρόπος είναι η λεγόμενη δήλωση κλάσης - class declaration. Για να ορίσετε μια τάξη με αυτόν τον τρόπο, ξεκινάτε από τη λέξη κλειδί class ακολουθούμενη από ένα όνομα - name.

Παράδειγμα:

class Dishes {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
}

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

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

Ο δεύτερος τρόπος για τον ορισμό μιας κλάσης JavaScript είναι η χρήση της έκφρασης κλάσης - class expression. Για να γίνει αυτό, δημιουργούμε μια μεταβλητή στην οποία αναθέτουμε την κλάση μας. Μια έκφραση κλάσης μπορεί να ονομάζεται ή να είναι ανώνυμη.

Παράδειγμα έκφρασης ονομαστικής κλάσης:

 let myDishes = class Dishes {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
};

Παράδειγμα έκφρασης ανώνυμης κλάσης:

 let myDishes = class {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
};

Δημιουργία αντικειμένων με JavaScript classes

Στο προηγούμενο κεφάλαιο, είδαμε τη σύνταξη για να ορίσουμε μια κλάση.

Προκειμένου να δημιουργηθούν αντικείμενα, πρέπει να καλέσουμε την κλάση. Αυτό γίνεται με παρόμοιο τρόπο με αυτό που εμφανίζουμε στην "Υποενότητα 6.3: Συναρτήσεις δόμησης". Χρησιμοποιούμε τη λέξη-κλειδί new που ακολουθείται από μια κλήση στο όνομα της κλάσης

Για παράδειγμα, για να δημιουργήσουμε ένα αντικείμενο για την κλάση που δημιουργήσαμε στο προηγούμενο κεφάλαιο:

class Dishes {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
}

θα γράψουμε:

 let dish1;
dish1 = new Dishes  ("sweets", 5);

Χρησιμοποιώντας την παραπάνω σύνταξη μπορούμε να δημιουργήσουμε όσα νέα αντικείμενα θέλουμε. Θα έχουν όλες τις ιδιότητες που ορίζονται μέσα στην κλάση τους.

Τι πιστεύετε ότι θα είναι η έξοδος της κονσόλας εάν πληκτρολογείτε το dish1;; Για να βρείτε την απάντηση, μεταβείτε στην κονσόλα σας και αντιγράψτε / επικολλήστε τόσο την κλάση όσο και το νέο αντικείμενο που δημιουργήσατε.

Answer:

Methods inside JavaScript classes

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

Ένα παράδειγμα μιας κλάσης με μια μέθοδο θα είναι:

class Dishes {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
output (){
console.log("This belongs to" + " " +this.category + " " + "and costs" + " " + this.price);
}
}

.Από το παραπάνω παράδειγμα, βλέπουμε ότι οι μέθοδοι μέσα στις κλάσεις δεν ξεκινούν με τη function. Ορίζουμε μεθόδους μόνο δίνοντάς τους ένα όνομα που ακολουθείται από ()

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

objectName.methodName();

Για παράδειγμα, για το προηγούμενο παράδειγμα μας:

 let dish1;
dish1 = new Dishes  ("sweets", 5);

Μπορούμε να καλέσουμε τη μέθοδο output γράφοντας:

 dish1.output();

Τι πιστεύετε ότι θα είναι η έξοδος κονσόλας του παραπάνω κώδικα;

Answer:

Παραδείγματα

• Classes, Properties and Methods
• Arrays of objects

Δείτε περισσότερα για τις JavaScript classes

Exercise

Exercise

1. Κέντε δεξί κλικ για να κατεβάσετε - Download το αρχείο και αποθηκεύστε το ως exersice07.2.html in the folder "yourNameWEB2JS". Ανοίξτε το αρχείο στο πρόγραμμα περιήγησής σας για να δείτε τα αποτελέσματα.
2. Ανοίξτε το αρχείο τον επεξεργαστή κώδικα, και αντικαταστήστε τη loop statement με άλλες statements (for, while etc). Μπορείτς επίσης να εφαρμόσετε την for ... of statement. Θέλουμε να έχουμε το ίδιο αποτέλεσμα.

Answer:

for (let i=0; i<users.length; i++) {
  let y=new User (users[i])
  y.sayHi();
  console.log(y);
 }