--- title: Klassen slug: Web/JavaScript/Reference/Classes translation_of: Web/JavaScript/Reference/Classes original_slug: Web/JavaScript/Reference/Klasses ---
{{JsSidebar("Classes")}}

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

Eén manier om een class te definiëren is door 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 {{Glossary("Hoisting", "hoisted")}} zijn en class declarations niet. Je moet eerst je klasse declareren voor je het kan gebruiken, anders krijg je een {{jsxref("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 gegeven aan een named class expression 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, static en prototype methods, getter en setter functions worden bijvoorbeeld 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 {{jsxref("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
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}} {{Spec2('ES6')}} Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} {{Spec2('ESDraft')}}  

Browser compatibiliteit

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) MS Edge Internet Explorer Opera Safari
Basic support {{CompatChrome(42.0)}}[1] 45 13 {{CompatNo}} {{CompatNo}} {{CompatSafari(9.0)}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatNo}} 45 {{CompatUnknown}} {{CompatUnknown}} 9 {{CompatChrome(42.0)}}[1]

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

Zie ook