Wie kann ich prototypbasierten JavaScript-Code organisieren und dabei Objektreferenzen und Vererbung beibehalten?

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. Stellen Sie sich eine Karussellklasse mit zahlreichen Funktionen vor:

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 bringt jedoch ein Problem mit sich: die „ Das Schlüsselwort „this“ bezieht sich in diesen Funktionen nicht mehr auf die Karussellinstanz.

Überwindung des „this“-Problems

Die Beibehaltung des „this“-Kontexts 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

Eine flexiblere Lösung Der 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.

Das obige ist der detaillierte Inhalt vonWie kann ich prototypbasierten JavaScript-Code organisieren und dabei Objektreferenzen und Vererbung beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!