From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../nl/web/javascript/reference/klasses/index.html | 252 +++++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 files/nl/web/javascript/reference/klasses/index.html (limited to 'files/nl/web/javascript/reference/klasses/index.html') diff --git a/files/nl/web/javascript/reference/klasses/index.html b/files/nl/web/javascript/reference/klasses/index.html new file mode 100644 index 0000000000..ca5210371c --- /dev/null +++ b/files/nl/web/javascript/reference/klasses/index.html @@ -0,0 +1,252 @@ +--- +title: Klassen +slug: Web/JavaScript/Reference/Klasses +translation_of: Web/JavaScript/Reference/Classes +--- +
{{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

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)MS EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]4513{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome 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

+ + -- cgit v1.2.3-54-g00ecf