path: root/files/nl/web/javascript/reference/klasses/index.html

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

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

<h2 id="Classes_definiëren">Classes definiëren</h2>

<p>Classes zijn eigenlijk <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>, net zoals je <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> en <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a> kan definiëren, de class syntax heeft twee componenten: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressies</a> en <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declaraties</a>.</p>

<h3 id="Class_declaraties">Class declaraties</h3>

<p>Eén manier om een class te definiëren is door gebruik te maken van <strong>class declaration</strong>. Om een klasse te declareren, gebruik je het <code>class</code> keyword gevolgd door de naam van de class. ("Polygon" hier).</p>

<pre class="brush: js">class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}</pre>

<h4 id="Hoisting">Hoisting</h4>

<p>Een belangrijk verschil tussen <strong>function declarations</strong> en <strong>class declarations</strong> 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")}}:</p>

<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError

class Polygon {}
</pre>

<h3 id="Class_expressions">Class expressions</h3>

<p>Een <strong>class expression</strong> 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.</p>

<pre class="brush: js">// 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;
  }
};
</pre>

<h2 id="Class_body_en_method_definitions">Class body en method definitions</h2>

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

<h3 id="Strict_mode">Strict mode</h3>

<p>De bodies van <em>class declarations</em> en <em>class expressions</em> worden uitgevoerd in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>. Constructor, static en prototype methods, getter en setter functions worden bijvoorbeeld uitgevoerd in strict mode.</p>

<h3 id="Constructor">Constructor</h3>

<p>De <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> 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 <code>constructor </code>methodes heeft.</p>

<p>Een constructor kan gebruik maken van het <code>super</code> keyword om de constructor van de parent class op te roepen.</p>

<h3 id="Prototype_methods">Prototype methods</h3>

<p>Zie ook <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p>

<pre class="brush: js">class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}</pre>

<h3 id="Static_methods">Static methods</h3>

<p>Het <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> 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 <strong>niet</strong> opgeroepen worden wanneer er een instantie van gemaakt is. Statische methodes zijn dikwijls gebruikt als utility functions voor een applicatie.</p>

<pre class="brush: js">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));</pre>

<h2 id="Sub_classing_met_extends">Sub classing met <code>extends</code></h2>

<p>Het <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword wordt gebruikt in <em>class declarations</em> of <em>class expressions</em> om een klasse aan te maken als kind van een andere klasse.</p>

<pre class="brush: js">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.');
  }
}
</pre>

<h2 id="Sub_classing_built-in_objects">Sub classing built-in objects</h2>

<p>TBD</p>

<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2>

<p>Het <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword wordt gebruikt om een methode op te roepen in de parent klasse van het object.</p>

<pre class="brush: js">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.');
  }
}
</pre>

<h2 id="ES5_inheritance_syntax_en_ES6_classes_syntax_vergeleken">ES5 inheritance syntax en ES6 classes syntax vergeleken</h2>

<p>TBD</p>

<h2 id="Voorbeelden">Voorbeelden</h2>

<p>TBD</p>

<h2 id="Specificaties">Specificaties</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>MS Edge</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(42.0)}}<sup>[1]</sup></td>
   <td>45</td>
   <td>13</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatSafari(9.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>45</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>9</td>
   <td>{{CompatChrome(42.0)}}<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

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

<h2 id="Zie_ook">Zie ook</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
 <li>{{jsxref("Operators/super", "super")}}</li>
 <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li>
</ul>