MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

JavaScript classes zijn nieuw in ECMAScript 6. De class syntax is geen object-oriented inheritance model in JavaScript. JavaScript classes brengen een veel eenvoudigere en duidelijkere syntax voor het creëren van objecten.

Classes definiëren

Classes zijn eigenlijk functions, net zoals je function expressions en function declarations kan definiëren, de class syntax heeft twee componenten: class expressies en class declaraties.

Class declaraties

Een manier om een class te definiëren is gebruik te maken van class declaration. Om een klasse te declareren, gebruik je het class keyword gevolgd door de naam van de class. ("Polygon" hier).

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Hoisting

Een belangrijk verschil tussen function declarations en class declarations is dat function declarations hoisted zijn en class declarations niet. Je moet eerst je klasse declareren voor je het kan gebruiken, anders krijg je een ReferenceError:

var p = new Polygon(); // ReferenceError

class Polygon {}

Class expressions

Een class expression is een andere manier om een class te definiëren. Class expressions kunnen named of unnamed zijn. De naam is local aan de body van de class.

// unnamed
var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
var Polygon = class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

Class body en method definitions

De body van een class is het stuk tussen de curly brackets {}. Hier kan je class members definiëren, zoals methodes of constructors.

Strict mode

De bodies van class declarations en class expressions worden uitgevoerd in strict mode.

Constructor

De constructor methode is een speciale methode voor het creëren en initializeren van een object voor de klasse. Er kan maar één speciale methode zijn met de naam "constructor" in een klasse. Een SyntaxError wordt gegooid indien de klasse meerdere constructor methodes heeft.

Een constructor kan gebruik maken van het super keyword om de constructor van de parent class op te roepen.

Prototype methods

Zie ook method definitions.

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}

Static methods

Het static keyword beschrijft een statische methode voor een klasse. Statische methodes kunnen worden opgeroepen zonder dat er een instantie gemaakt is van de klasse en kunnen ook niet opgeroepen worden wanneer er een instantie van gemaakt is. Statische methodes zijn dikwijls gebruikt als utility functions voor een applicatie.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

Sub classing met extends

Het extends keyword wordt gebruikt in class declarations of class expressions om een klasse aan te maken als kind van een andere klasse.

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

Sub classing built-in objects

TBD

Super class calls with super

Het super keyword wordt gebruikt om een methode op te roepen in de parent klasse van het object.

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

ES5 inheritance syntax en ES6 classes syntax vergeleken

TBD

Voorbeelden

TBD

Specificaties

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Class definitions' in that specification.
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Class definitions' in that specification.
Draft  

Browser compatibiliteit

Feature Chrome Firefox (Gecko) MS Edge Internet Explorer Opera Safari
Basic support 42.0[1] 45 13 No support No support 9.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 45 ? ? 9 42.0[1]

[1] Requires strict mode. Non-strict mode support is behind the flag Enable Experimental JavaScript, disabled by default.

Zie ook

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: reinvantveer, Jantje19, Samjayyy
 Laatst bijgewerkt door: reinvantveer,