Comment puis-je organiser des prototypes JavaScript et conserver « ce » contexte pendant l'héritage ?

Organiser des prototypes JavaScript avec des références d'objets et un héritage préservés

En JavaScript, organiser le code à l'aide de prototypes et d'héritage peut devenir un défi à mesure que l'application grandit . Considérons le scénario suivant : nous avons une classe carrousel avec plusieurs fonctions :

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

Pour améliorer l'organisation du code, nous souhaiterons peut-être regrouper ces fonctions en tant qu'objet :

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

Cependant, cette approche rompt la référence à l'objet this, conduisant à des erreurs lors de l'héritage de la classe. Pour résoudre ce problème, nous pouvons explorer différentes stratégies :

Créer une classe de contrôles :

Une approche consiste à définir une classe de contrôles distincte comme suit :

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

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

Cela nous permet de conserver la référence à l'objet d'origine, mais cela ne permet pas de remplacer l'implémentation des contrôles.

Utilisation de l'injection de dépendances :

Une approche plus flexible consiste à utiliser l'injection de dépendances :

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));

Cela nous permet de créer plusieurs contrôleurs et de les ajouter dynamiquement au carrousel, offrant ainsi une flexibilité et la possibilité de remplacer les implémentations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!