48. Κλάσεις (Classes) JavaScript

JS Classes


ECMAScript 2015

Το ES6, επίσης γνωστό ως ECMAScript2015, εισήγαγε κλάσεις.

Μια κλάση είναι ένας τύπος συνάρτησης, αλλά αντί να χρησιμοποιήσουμε τη λέξη-κλειδί function για να την εισάγουμε, χρησιμοποιούμε τη λέξη-κλειδί class και οι ιδιότητες προσδιορίζονται μέσα σε μια μέθοδο constructor() .


Ορισμός κλάσης

Χρησιμοποιούμε τη λέξη-κλειδί class για να δημιουργήσουμε μια κλάση και προσθέτουμε πάντα τη constructor() μέθοδο.

Η μέθοδος κατασκευής καλείται κάθε φορά που αρχικοποιείται (initialized) το αντικείμενο κλάσης.

Παράδειγμα

Ένας απλός ορισμός κλάσης για μια κλάση με το όνομα “Car”:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

Τώρα μπορείτε να δημιουργήσετε αντικείμενα χρησιμοποιώντας την κατηγορία Car:

Παράδειγμα

Δημιουργήστε ένα αντικείμενο που ονομάζεται “mycar” με βάση την κλάση Αυτοκινήτου:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
mycar = new Car("Ford");

Δοκιμάστε τον εαυτό σας »

Σημείωση: Η μέθοδος constructor καλείται αυτόματα όταν εισάγεται το αντικείμενο.


Μέθοδοι

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

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

Παράδειγμα

Δημιουργήστε μια μέθοδο που ονομάζεται “present”:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return "I have a " + this.carname;
  }
}

mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.present();

Δοκιμάστε τον εαυτό σας »

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

Παράδειγμα

Αποστολή μιας παραμέτρου στη μέθοδο “present()”:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present(x) {
    return x + ", I have a " + this.carname;
  }
}

mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.present("Hello");

Δοκιμάστε τον εαυτό σας »


Στατικές μέθοδοι

Οι στατικές μέθοδοι ορίζονται στην ίδια την κλάση και όχι στο πρωτότυπο.

Αυτό σημαίνει ότι δεν μπορείτε να καλέσετε μια στατική μέθοδο στο αντικείμενο (mycar), αλλά στην κλάση (Car):

Παράδειγμα

Δημιουργήστε μια στατική μέθοδο και καλέστε την στην κλάση:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  static hello() {
    return "Hello!!";
  }
}

mycar = new Car("Ford");

//Call 'hello()' on the class Car:
document.getElementById("demo").innerHTML = Car.hello();

//and NOT on the 'mycar' object:
//document.getElementById("demo").innerHTML = mycar.hello();
//this would raise an error.

Δοκιμάστε τον εαυτό σας »

Εάν θέλετε να χρησιμοποιήσετε το αντικείμενο mycar μέσα στη στατική μέθοδο, μπορείτε να το στείλετε ως παράμετρο:

Παράδειγμα

Αποστολή “mycar” ως παράμετρος:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  static hello(x) {
    return "Hello " + x.carname;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = Car.hello(mycar);

Δοκιμάστε τον εαυτό σας »


Κληρονομία

Για να δημιουργήσετε κληρονομιά κλάσης, χρησιμοποιήστε την λέξη-κλειδί extends .

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

Παράδειγμα

Δημιουργήστε μια κλάση που ονομάζεται “Model”, η οποία θα κληρονομήσει τις μεθόδους από την κατηγορία “Car”:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = mycar.show();

Δοκιμάστε τον εαυτό σας »

Η μέθοδος super() αναφέρεται στην κλάση γονέων.

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

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


Getters και Setters

Οι κλάσεις σας επιτρέπουν επίσης να χρησιμοποιήσετε getters και setters.

Μπορεί να είναι έξυπνο να χρησιμοποιείτε getters και setters για τις ιδιότητές σας, ειδικά εάν θέλετε να κάνετε κάτι ξεχωριστό με την τιμή πριν την επιστροφή τους ή πριν τις ορίσετε.

Για να προσθέσετε getters και setters στην κλάση, χρησιμοποιήστε τις λέξεις-κλειδιά get και set.

Παράδειγμα

Δημιουργήστε ένα getter και ένα setter για την ιδιότητα “carname”:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = mycar.carname;

Δοκιμάστε τον εαυτό σας »

Σημείωση: ακόμα και αν η getter είναι μια μέθοδος, μην χρησιμοποιείτε παρενθέσεις όταν θέλετε να λάβετε την τιμή της ιδιότητας.

Το όνομα της μεθόδου getter/setter δεν μπορεί να είναι το ίδιο με το όνομα της ιδιότητας, στην περίπτωση αυτή carname.

Πολλοί προγραμματιστές χρησιμοποιούν ένα χαρακτήρα υπογράμμισης _ πριν από το όνομα της ιδιότητας για να διαχωρίσουν τον getter/setter από την πραγματική ιδιότητα:

Παράδειγμα

Μπορείτε να χρησιμοποιήσετε τον χαρακτήρα υπογράμμισης για να διαχωρίσετε το getter/setter από την πραγματική ιδιότητα:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = mycar.carname;

Δοκιμάστε τον εαυτό σας »

Για να χρησιμοποιήσετε ένα setter , χρησιμοποιήστε την ίδια σύνταξη όπως όταν ορίζετε μια τιμή ιδιότητας, χωρίς παρενθέσεις:

Παράδειγμα

Χρησιμοποιήστε έναν setter για να αλλάξετε την ονομασία “Volvo”:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

mycar = new Car("Ford");
mycar.carname = "Volvo";
document.getElementById("demo").innerHTML = mycar.carname;

Δοκιμάστε τον εαυτό σας »


Ανύψωση (hoisting)

Σε αντίθεση με τις συναρτήσεις και άλλες δηλώσεις της JavaScript, οι δηλώσεις κλάσης δεν ανυψώνονται.

Αυτό σημαίνει ότι πρέπει να δηλώσετε μια κλάση πριν τη χρησιμοποιήσετε:

Παράδειγμα

//You cannot use the class yet.
//mycar = new Car("Ford")
//This would raise an error.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

//Now you can use the class:
mycar = new Car("Ford")

Δοκιμάστε τον εαυτό σας »

Σημείωση: Για άλλες δηλώσεις, όπως συναρτήσεις, ΔΕΝ θα λάβετε σφάλμα όταν προσπαθείτε να τις χρησιμοποιήσετε πριν να δηλωθούν, επειδή η προεπιλεγμένη συμπεριφορά των δηλώσεων JavaScript ανυψώνεται (μετακινώντας τη δήλωση στην κορυφή).


“use strict”

Η σύνταξη στις κλάσεις πρέπει να γράφεται σε “αυστηρή λειτουργία”.

Θα λάβετε ένα σφάλμα αν δεν ακολουθείτε τους κανόνες “αυστηρής λειτουργίας”.

Παράδειγμα

Στην “αυστηρή λειτουργία” θα λάβετε ένα σφάλμα αν χρησιμοποιήσετε μια μεταβλητή χωρίς να δηλώσετε:

class Car {
  constructor(brand) {
    i = 0;
    this.carname = brand;
  }
}
var mycar = new Car("Ford");

Δοκιμάστε τον εαυτό σας »

Μάθετε περισσότερα σχετικά με την “αυστηρή λειτουργία” στο κεφάλαιο αυστηρή λειτουργία JavaScript .


Υποστήριξη προγραμμάτων περιήγησης

Ο παρακάτω πίνακας ορίζει την πρώτη έκδοση του προγράμματος περιήγησης με πλήρη υποστήριξη για τις κλάσεις στο JavaScript:

Chrome 49Edge 12Firefox 45Safari 9Opera 36
Mar, 2016Jul, 2015Mar, 2015Oct, 2015Mar, 2016

48. Κλάσεις (Classes) JavaScript

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

This website uses cookies to ensure you get the best experience on our website. By continuing to use this website, you agree to their use. To find out more, see here: Privacy Policy
Αρέσει σε %d bloggers: