JS Klassen

Definitionen von Javascript Klassen bestehen - ähnlich die bei Funktionen - aus einem Block, der von dem geschützten Schlüsselwort class und einem (optionalen) Klassennamen angeführt wird.

Der Block schließt die Definitionen des Konstruktors (mit dem Schlüsselwort constructor) und Methoden ein. Der Konstruktor übernimmt die Argumente der Erzeugung, die für die Initialisierung des Objekts benutzt werden können. In JavaScript kann nur eine Konstruktor Methode angegeben werden (nicht mehrere wie z. B. in Java).

❮❯HTML<canvas id="myCanvas" width="400" height="400"></canvas>

❮❯CSS#myCanvas {
  border: 1px solid;
}

❮❯JavaScriptconst canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

class Circle {
  // constructor
  constructor(x, y, size = 10) {
    this.x = x;
    this.y = y;
    this.size = size;
  }

  // draw method
  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, 360);
    ctx.stroke();
  }
}

function getRandomNumber(min, max) {
  return min + (max - min) * Math.random();
}

for (let i = 0; i < 10; i++) {
  const x = getRandomNumber(100, 300);
  const y = getRandomNumber(100, 300);
  const size = getRandomNumber(10, 50);

  // create new circle
  const circle = new Circle(x, y, size);

  // draw circle
  circle.draw(ctx);
}

Während die Namen von Variablen und Funktionen üblicherweise kleingeschriebene sind, werden Klassennamen großgeschrieben.

Vererbung

Klassen können mit dem Schlüsselwort extends andere Klassen erweitern. Der Konstruktor und die Methoden der erweiterten Klasse können mit dem Schlüsselwort super auf den Konstruktor und die Methoden der Basisklasse zugreifen.

❮❯JavaScriptconst canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

class Circle {
  constructor(x, y, size = 10) {
    this.x = x;
    this.y = y;
    this.size = size;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, 360);
    ctx.stroke();
  }
}

class ColoredCircle extends Circle {
  constructor(x, y, size, color) {
    super(x, y, size);
    this.color = color;
  }

  // draw method
  draw(ctx) {
    ctx.fillStyle = this.color;
    super.draw(ctx);
    ctx.fill();
  }
}

function getRandomNumber(min, max) {
  return min + (max - min) * Math.random();
}

for (let i = 0; i < 10; i++) {
  const x = getRandomNumber(100, 300);
  const y = getRandomNumber(100, 300);
  const size = getRandomNumber(10, 50);
  const hue = getRandomNumber(0, 360);

  // create new colored circle
  const color = `hsla(${hue}, 100%, 50%, 0.5)`;
  const circle = new ColoredCircle(x, y, size, color);

  circle.draw(ctx);
}