Κλάσεις στο JavaScript

Το ECMAScript 2015, γνωστό και ως ES6, εισήγαγε την κλάση του JavaScript.

Η κλάση του JavaScript είναι το μοντέλο αντικειμένων του JavaScript.

Γλώσσα κλάσης του JavaScript

Χρησιμοποιήστε τη λέξη-κλειδί class Δημιουργήστε μια κλάση.

Πάντα προσθέστε μια μεθόδο με το όνομα constructor() μεθόδους:

Γραμματική

class ClassName {
  constructor() { ... }
}

Επίδειξη

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

Ο παραπάνω παράδειγμα δημιουργεί μια κλάση με το όνομα "Car".

Η κλάση έχει δύο αρχικές ιδιότητες: "name" και "year".

Κλάσεις στο JavaScriptΔεν είναιαντικείμενα.

Είναι αντικείμενο JavaScriptΣχέδιο.

Χρήση κλάσης

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

Επίδειξη

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Δοκιμάστε το προσωπικά

Ο παραπάνω παράδειγμα χρησιμοποιεί Κλάση Carγια να δημιουργήσετε δύο Car αντικείμενο.

Ο κατασκευαστής καλείται αυτόματα κατά τη δημιουργία νέου αντικειμένου (κατασκευαστής μεθόδος).

Κατασκευαστής

Ο κατασκευαστής είναι μια ειδική μέθοδος:

  • Πρέπει να έχει το ακριβές όνομα "constructor"
  • Εκτελείται αυτόματα κατά τη δημιουργία νέου αντικειμένου
  • Χρησιμοποιείται για την αρχικοποίηση ιδιοτήτων αντικειμένων
  • Αν δεν ορίσετε τον κατασκευαστή, το JavaScript θα προσθέσει έναν κενό κατασκευαστή.

Μεθόδοι κλάσης

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

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

Πάντα προσθέστε τη μέθοδο constructor().

τότε προσθέστε οποιοδήποτε αριθμό μεθόδων.

Γραμματική

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Δημιουργήστε μια μέθοδο κλάσης με το όνομα "age" που επιστρέφει το έτος του αυτοκινήτου:

Επίδειξη

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"Το αυτοκίνητό μου είναι " + myCar.age() + " χρόνια.";

Δοκιμάστε το προσωπικά

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

Επίδειξη

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"Το αυτοκίνητό μου είναι " + myCar.age(year) + " χρόνια.";

Δοκιμάστε το προσωπικά

Υποστήριξη περιηγητή

Η παρακάτω τаблицή σημειώνει την πρώτη έκδοση περιηγητή που υποστηρίζει πλήρως τη γλώσσα JavaScript:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Μάρτιος 2016 Ιούλιος 2015 Μάρτιος 2016 Οκτώβριος 2015 Μάρτιος 2016

"use strict"

Η γραμματική στην κλάση πρέπει να γραφτεί με "strict mode".

Αν δεν ακολουθήσετε τις ρυθμίσεις του "strict mode", θα λάβετε μήνυμα σφάλματος.

Επίδειξη

Στο "strict mode", αν χρησιμοποιήσετε μεταβλητή χωρίς να την δηλώσετε, θα λάβετε σφάλμα:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Αυτό δεν θα λειτουργήσει
    let date = new Date(); // Αυτό θα λειτουργήσει
    return date.getFullYear() - this.year;
  }
}

Δοκιμάστε το προσωπικά

Σε Strict Mode JS Μάθετε περισσότερα για το "strict mode" εδώ.