Ajaxer

In Javascript we trust

Errata: Objekterzeugungsmuster

| Keine Kommentare

Objekterzeugungsmuster

Es gibt verschiedene aufeinander aufbauende Entwurfsmuster, die einem helfen, eine klassenbasierte Vererbung zu realisieren. Ziel einer klassenbasierten Vererbung ist, dass eine Klasse von einer anderen Klasse erben kann. Wichtig ist, dass der instanceof-Operator der Subklasse erkennt, dass diese Klasse eine Subklasse der Superklasse ist.

Rent-a-Constructor

Am einfachsten funktioniert dies über das »Rent-a-Constructor«-Entwurfsmuster. Eine Subklasse borgt sich den Prototyp der Superklasse. Daher nennt man dieses Entwurfsmuster »Rent-a-Constructor«. Man erzeugt in der Subklasse eine neue Instanz der Superklasse. Diese neue Instanz weist man als Prototyp der Sub-Klasse zu.

function Rectangle(){}
function Box(){}

Box.prototype = new Rectangle();

(new Box()) instanceof Rectangle; // true

Wie man sieht, wird in diesem Code dem Prototype der Box-Funktion der Prototype der Super-Funktion außerhalb des Konstruktors zugewiesen.

Konstruktoren überladen

Selbstverständlich lassen sich mit diesem Ansatz auch Parameter der Konstruktoren überladen.

function Rectangle(width, height) { 
  this.width = width;
  this.height = height;
}

var myRectangle = new Rectangle(5, 5);

function Box(width, height, length) { 
  Box.prototype = new Rectangle(width, height); 
  this.length = length;
}
var myBox = new Box(5, 5, 5);

Hier wird dem Prototype der Box-Funktion der Prototype der Super-Funktion innerhalb des Konstruktors zugewiesen. Dies funktioniert in vielen Laufzeitumgebungen wie V8 und Node. Allerdings funktioniert dies beispielsweise nicht in anderen Laufzeitumgebungen wie Rhino oder JaegerMonkey.

Richtig wäre hier, dem Pattern „Classical Pattern #1 – The Default Pattern“ von Stoyan Stefanov (JavaScript Patterns in Errata: Objekterzeugungsmuster - Ajaxer) zu folgen und dem Prototype der Box-Funktion den Prototype der Super-Funktion außerhalb des Konstruktors zuzuweisen.

Dann lässt sich allerdings der Konstruktor nicht mehr mit eigenen Parametern aufrufen. Daher muss er mit der apply-Methode ausgeführt werden. Die apply-Methode erlaubt es, eine Funktion aufzurufen und dabei festzulegen, in welchem Kontext sich der Aufruf befindet. Man legt also den Wert des this-Keywords explizit fest.

function Rectangle(width, height) { 
  this.width = width;
  this.height = height;
}

var myRectangle = new Rectangle(5, 5);

function Box(width, height, length) { 
  Rectangle.apply(this, arguments) 
  this.length = length;
}

Box.prototype = new Rectangle();

var myBox = new Box(5, 5, 5);

myBox.width; // 5
myBox.height; // 5
myBox.length; // 5
myBox instanceof Rectangle; // true

Danksagung

Dieser Fehler ist dem Leser Norman Wehrle aufgefallen. Hiermit danke ich Herrn Wehrle für seine konstruktive Kritik. Der skizzierte Vorschlag basiert auf Herrn Wehrles Anmerkungen.

Diese Korrektur bezieht sich auf das Buch Oliver Ochs – JavaScript für Enterprise-Entwickler: Professionell programmieren im Browser und auf dem Server – dpunkt.verlag GmbH 2012.

Autor: Oliver Ochs

Oliver Ochs ist bei der Management- und IT-Unternehmensberatung Holisticon AG in Hamburg tätig. Er beschäftigte sich in den letzten Jahren mit Content Management Systemen, Webframeworks und Portalen auf Java-Basis. In diesem Umfeld arbeitete er als Entwickler, Architekt und Projektleiter. Er hat darüber hinaus Erfahrungen in Schulungen und Coachings. In letzter Zeit setzte er einen seiner Schwerpunkte auch auf Web- Application-Security, Identity-Management und neue Seiten von JavaScript. Ein anderer persönlicher Schwerpunkt sind agile Methoden und Prozesse

Schreib einen Kommentar

Pflichtfelder sind mit * markiert.