JavaScript Classes

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

JavaScript-klasse zijn sjablonen voor JavaScript-objecten.

语法 van JavaScript

Gebruik het sleutelwoord class Maak een klasse aan.

Voeg altijd een constructor() met de methode:

Syntax

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

Voorbeeld

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

Het voorbeeld maakt een klasse genaamd "Car" aan.

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

JavaScript ClassesNietobject.

Het is een JavaScript objectSjabloon.

Gebruik een klasse

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

Voorbeeld

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

Probeer het zelf

Het voorbeeld gebruikt Car klasseom er twee te maken Car object.

De constructor wordt automatisch aangeroepen bij het maken van een nieuw object (constructor method).

Constructor

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 u geen constructor definitie opgeeft, voegt JavaScript een lege constructor toe.

Klassenmethoden

De syntax voor klassenmethoden is dezelfde als voor objectmethoden.

Maak een klasse met de sleutelwoord class aan.

Voeg altijd een constructor() methode toe.

Voeg vervolgens een willekeurig aantal methoden toe.

Syntax

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

Maak een klassenmethode genaamd "age" aan, die het jaartal 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 =
"Mijn auto is " + myCar.age() + " jaar oud.";

Probeer het zelf

U kunt parameters naar klassenmethoden sturen:

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

Browserondersteuning

De tabel 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

"use strict"

De syntaxis in de klasse moet in 'strict mode' worden geschreven.

Je krijgt een foutmelding als je niet volgens de regels van 'strict mode' gaat.

Voorbeeld

Onder 'strict mode' krijg je een fout als je een variabele gebruikt zonder deze te declareren:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Dit werkt niet
    let date = new Date(); // Dit werkt
    return date.getFullYear() - this.year;
  }
}

Probeer het zelf

In JS-strict mode Meer te leren over 'strict mode' in dit gedeelte.