Wie kann ich JavaScript-Prototypen organisieren und „diesen' Kontext während der Vererbung beibehalten?

JavaScript-Prototypen mit beibehaltenen Objektreferenzen und Vererbung organisieren

In JavaScript kann die Organisation von Code mithilfe von Prototypen und Vererbung zu einer Herausforderung werden, wenn die Anwendung größer wird . Stellen Sie sich das folgende Szenario vor: Wir haben eine Karussellklasse mit mehreren Funktionen:

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

Um die Codeorganisation zu verbessern, möchten wir diese Funktionen möglicherweise als Objekt gruppieren:

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

Allerdings Dieser Ansatz unterbricht den Verweis auf dieses Objekt, was zu Fehlern beim Erben von der Klasse führt. Um dieses Problem anzugehen, können wir verschiedene Strategien erkunden:

Eine Controls-Klasse erstellen:

Ein Ansatz besteht darin, eine separate Controls-Klasse wie folgt zu definieren:

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

var Carousel = function () {
    this.controls = new Controls(this);
};
// ..

Dadurch können wir den Verweis auf das ursprüngliche Objekt beibehalten, es ist jedoch nicht möglich, die Implementierung von Steuerelementen zu überschreiben.

Abhängigkeitsinjektion verwenden:

Ein flexiblerer Ansatz ist die Verwendung der 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);
    };
// ..

var carousel = new Carousel();
carousel.addController(new Controls(carousel));

Dadurch können wir mehrere Controller erstellen und sie dynamisch zum Karussell hinzufügen, was Flexibilität und die Möglichkeit bietet, Implementierungen zu überschreiben.

Das obige ist der detaillierte Inhalt vonWie kann ich JavaScript-Prototypen organisieren und „diesen' Kontext während der Vererbung beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!