JavaScript-klassen
ECMAScript 2015, ook bekend als ES6, introduceerde JavaScript-klassen.
JavaScript-klassen zijn sjablonen voor JavaScript-objecten.
JavaScript-klassesyntaxis
Gebruik het trefwoord class
om 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 class
om 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 |
Later in deze zelfstudie leert u veel meer over JavaScript-klassen.