Comment puis-je organiser du code JavaScript basé sur un prototype tout en préservant les références d'objets et l'héritage ?

Organiser le JavaScript basé sur un prototype tout en préservant la référence et l'héritage des objets

Dilemme : réorganiser le code pour améliorer la structure

L'héritage prototypique est un paradigme JavaScript puissant, mais la gestion de grandes applications peut s'avérer difficile. Considérons une classe carrousel avec de nombreuses fonctions :

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

La refactorisation pour une meilleure organisation du code pourrait impliquer de regrouper les fonctions en sous-objets :

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

Cependant, ce changement introduit un problème : le " Le mot-clé this" dans ces fonctions ne fait plus référence à l'instance du carrousel.

Surmonter le "this" Problème

Le maintien du contexte « ce » est crucial, en particulier dans les scénarios où les classes héritent des classes parentes. Les fonctions de substitution dans les classes héritées doivent préserver le comportement approprié de « ce ».

Solutions

Enveloppement de sous-objets

Une approche consiste à définir les contrôles en tant que classe distincte et à stocker une référence. à l'instance du carrousel :

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

Bien que cette solution résout le problème "ceci", elle empêche le remplacement de Implémentation des contrôles.

Injection de dépendances

Une approche plus flexible implique 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);
    };
// ..

Dans ce scénario, la classe carrousel peut ajouter plusieurs contrôleurs, prenant en charge plusieurs ensembles de fonctionnalité et permettant des remplacements faciles.

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!