Comment puis-je conserver la valeur « this » lors de l'organisation du code basé sur un prototype JavaScript ?

Organisation du code et valeur « this » dans le JavaScript orienté objet

Lors de l'organisation du code JavaScript basé sur un prototype, un défi courant se pose dans en préservant les références d'objet et l'héritage. Supposons que vous ayez une classe Carousel avec diverses fonctions telles que next(), prev() et bindControls(). Pour améliorer l'organisation du code, vous souhaitez regrouper ces fonctions sous une propriété de contrôles comme ceci :

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

Cependant, cette approche perturbe la valeur "this", qui est cruciale pour accéder aux propriétés et méthodes des objets. Pour conserver la valeur "this" dans le contexte d'origine, vous pouvez adopter la solution suivante :

Créez une classe Controls, qui conserve une référence à l'objet contrôlable dans le constructeur Controls. La méthode de Controls qui gère les actions, telle que next(), utilise la référence pour appeler la méthode appropriée dans l'objet contrôlable.

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 garantit l'héritage et vous permet de remplacer l'implémentation de Controls via un mécanisme comme l'injection de dépendances.

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!