JavaScript Classes

ECMAScript 2015, ook wel ES6 genoemd, heeft JavaScript klassen geïntroduceerd.

JavaScript klassen zijn sjablonen van JavaScript-objecten.

JavaScript klassen

syntaxis

Gebruik de sleutelwoord class Maak een klasse.

Voeg altijd toe genaamd constructor() met de methode:

syntaxis

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

een voorbeeld

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

Het bovenstaande voorbeeld maakt een klasse genaamd "Car" aan.

Deze klasse heeft twee initiële eigenschappen: "name" en "year".

JavaScript Classesnietobject.

Het is slechts een JavaScript-object.sjabloon.

Gebruik de klasse

Als u een klasse heeft, kunt u deze klasse gebruiken om objecten te maken:

een voorbeeld

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

Probeer het zelf uit

De bovenstaande voorbeeld gebruikt Car klasseheeft er twee gemaakt Car object.

De constructor-methode wordt automatisch aangeroepen bij het maken van een nieuw object.

Constructor Methode

Een constructor is een speciale methode:

  • Het moet de exacte naam "constructor" hebben
  • Wordt automatisch uitgevoerd bij het maken van een nieuw object
  • Gebruikt om objecteigenschappen te initialiseren
  • Als de constructormethode niet is gedefinieerd, voegt JavaScript een lege constructormethode toe.

Class Methoden

Aanmaken van klasmethoden

syntaxis

hetzelfde als objectmethoden.

Gebruik de sleutelwoord class Maak een klasse.

Voeg altijd toe constructor() methoden.

Voeg vervolgens een willekeurig aantal methoden toe.

syntaxis

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

Maak een klasmethode genaamd "age" aan, die de leeftijd van de auto retourneert:

een 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 = "Mijn auto is " + myCar.age() + " jaar oud.";

Probeer het zelf uit

U kunt parameters naar de klassenmethode sturen:

een 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 = "Mijn auto is " + myCar.age(year) + " jaar oud.";

Probeer het zelf uit

Browserondersteuning

De tabel hieronder vermeldt de eerste browserversie die JavaScript-klasse volledig ondersteunt:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Maart 2016 Juli 2015 Maart 2016 Oktober 2015 Maart 2016

In dit cursus zal je meer leren over JavaScript-klasse.