JavaScript-klassen
ECMAScript 2015, ook bekend als ES6, introduceerde JavaScript-klassen.
JavaScript-klassen zijn sjablonen voor JavaScript-objecten.
JavaScript-klassesyntaxis
Gebruik het trefwoord classom een klas aan te maken.
Voeg altijd een methode toe met de naam constructor():
Syntaxis
class ClassName {
constructor() { ... }
}
Voorbeeld
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
In het bovenstaande voorbeeld wordt een klasse gemaakt met de naam "Car".
De klasse heeft twee initiële eigenschappen: "naam" en "jaar".
Een JavaScript-klasse is geen object.
Het is een sjabloon voor JavaScript-objecten.
Een klas gebruiken
Als je een klasse hebt, kun je de klasse gebruiken om objecten te maken:
Voorbeeld
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
In het bovenstaande voorbeeld wordt de klasse Car gebruikt om twee Car-objecten te maken .
De constructormethode wordt automatisch aangeroepen wanneer een nieuw object wordt gemaakt.
De Constructor-methode
De constructormethode is een speciale methode:
- Het moet de exacte naam "constructor" hebben
- Het wordt automatisch uitgevoerd wanneer een nieuw object wordt gemaakt
- Het wordt gebruikt om objecteigenschappen te initialiseren
Als u geen constructormethode definieert, voegt JavaScript een lege constructormethode toe.
Klasse Methoden
Klassemethoden worden gemaakt met dezelfde syntaxis als objectmethoden.
Gebruik het trefwoord classom een klas aan te maken.
Voeg altijd een constructor()methode toe.
Voeg vervolgens een willekeurig aantal methoden toe.
Syntaxis
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Maak een Klasse-methode met de naam "leeftijd", die de leeftijd van de auto retourneert:
Voorbeeld
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 =
"My car is " + myCar.age() + " years old.";
U kunt parameters naar Class-methoden verzenden:
Voorbeeld
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=
"My car is
" + myCar.age(year) + " years old.";
Browserondersteuning
De volgende tabel definieert de eerste browserversie met volledige ondersteuning voor klassen in JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
"gebruik strikt"
De syntaxis in klassen moet in "strikte modus" worden geschreven.
U krijgt een foutmelding als u de regels van de "strikte modus" niet volgt.
Voorbeeld
In "strikte modus" krijg je een foutmelding als je een variabele gebruikt zonder deze te declareren:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
Lees meer over "strikte modus" in: JS Strikte modus .