Prototypisches JavaScript unter Beibehaltung der Objektreferenz und -vererbung organisieren

Dilemma: Code neu organisieren, um die Struktur zu verbessern

Prototypische Vererbung ist ein leistungsstarkes JavaScript-Paradigma. Die Verwaltung großer Anwendungen kann jedoch eine Herausforderung sein. Betrachten Sie eine Karussellklasse mit zahlreichen Funktionen:

Carousel.prototype.next = function () {...}
Carousel.prototype.prev = function () {..}
Carousel.prototype.bindControls = function () {..}

Refactoring für eine bessere Codeorganisation könnte das Gruppieren von Funktionen in Unterobjekten beinhalten:

Carousel.prototype.controls = {
   next: function () { ... } , 
   prev: function() { ... },
   bindControls: function () { .. }
}

Diese Änderung führt jedoch zu einem Problem: Das Schlüsselwort „this“ in diesen Funktionen bezieht sich nicht mehr auf die Karussellinstanz.

Überwindung des „this“-Problems

Wartung Der „diese“-Kontext ist entscheidend, insbesondere in Szenarien, in denen Klassen von übergeordneten Klassen erben. Überschreibende Funktionen in geerbten Klassen müssen das richtige „diese“ Verhalten beibehalten.

Lösungen

Sub-Object Wrapping

Ein Ansatz besteht darin, Controls als separate Klasse zu definieren und eine Referenz zu speichern zur Karussellinstanz:

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

Während diese Lösung das „diese“ Problem behebt, verhindert sie das Überschreiben der Controls-Implementierung.

Abhängigkeitsinjektion

Ein flexiblerer Ansatz beinhaltet die Abhängigkeitsinjektion :

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

var Carousel = function () {
        this.controllers = [];
    };
Carousel.prototype.addController = function (controller) {
        this.controllers.push(controller);
    };
// ..

In diesem Szenario kann die Karussellklasse mehrere Controller hinzufügen, mehrere Funktionssätze aufnehmen und einfache Überschreibungen ermöglichen.