Τάξεις JavaScript

Πίνακας περιεχομένων

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

Οι τάξεις JavaScript είναι πρότυπα για αντικείμενα JavaScript.

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

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

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

Σύνταξη

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

Παράδειγμα

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

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

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

Μια κλάση JavaScript δεν είναι αντικείμενο.

Είναι ένα πρότυπο για αντικείμενα JavaScript.

Χρησιμοποιώντας μια τάξη

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

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

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

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

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

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

Η Μέθοδος Κατασκευαστή

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

Πρέπει να έχει το ακριβές όνομα "κατασκευαστής"
Εκτελείται αυτόματα όταν δημιουργείται ένα νέο αντικείμενο
Χρησιμοποιείται για την προετοιμασία των ιδιοτήτων αντικειμένων

Εάν δεν ορίσετε μια μέθοδο κατασκευής, JavaScript θα προσθέσει μια κενή μέθοδο κατασκευής.

Μέθοδοι τάξης

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

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

Να προσθέτετε πάντα μια μέθοδο κατασκευαστή().

Στη συνέχεια, προσθέστε οποιονδήποτε αριθμό μεθόδων.

Σύνταξη

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

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

Παράδειγμα

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
   }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
   }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Methods</h1>
<p>How to define and use a Class method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

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

Παράδειγμα

class Car {
  constructor(name, year) {
    
  this.name = name;
    this.year = year;
  }
  
  age(x) {
    return x - this.year;
  }
}

  const date = new Date();
  let year = date.getFullYear();
const myCar = new 
  Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is 
  " + myCar.age(year) + " years old.";

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Method</h1>
<p>Pass a parameter into the "age()" method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>

</body>
</html>

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

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


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

"use strict"

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

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

Παράδειγμα

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

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
   }
  age() {
    // date = new Date();   // This will not work
    const date = new Date();  // This will work
    return date.getFullYear() - this.year;
   }
}

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes uses "strict mode"</h1>

<p>In a JavaScript Class you cannot use variable without declaring it.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
   // date = new Date();  // This will not work
   const date = new Date(); // This will work
   return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

Μάθετε περισσότερα για την "αυστηρή λειτουργία" στο: JS Strict Mode.