Comment puis-je modifier le comportement de chaque fonction d'un objet ?

Question

Pour l'instant, j'ai un objet, comme ce stylo.

Le prototype de la classe contient une série de fonctions et d'autres propriétés.

var Pen = function(){
   this.inkColor = 'red';

   this.write = function(text){
      document.write(text);
   }

   this.refill = function(){
      console.log('refilling');
   }

   this.getInkColor = function(){
      return this.inkColor;
   }

};

var pen = new Pen();
pen.write(pen.getInkColor() + ': Hello');

Existe-t-il un moyen d'éviter de modifier la classe Pen, mais de changer le comportement de chacune de ses fonctions, par exemple en imprimant un journal avant l'appel réel de la fonction ?

this.write = function(text){
   // do something first
   document.write(text);
}

this.refill = function(){
   // do something first
   console.log('refilling');
}

this.getInkColor = function(){
   // do something first
   return this.inkColor;
}

Answer 1

Vous pouvez envelopper votre stylo dans un Proxy et définir un gestionnaire approprié.

var Pen = function(){
   this.inkColor = 'red';

   this.write = function(text){
      document.write(text);
   }

   this.refill = function(){
      console.log('refilling');
   }

   this.getInkColor = function(){
      return this.inkColor;
   }

};

var handler = {
  get: function(target, name) {
    return name in target ? function (...args) {console.log('Hello World'); return target[name](args)} : undefined;
  }
};

var pen = new Pen();
var p = new Proxy(pen, handler);
p.write(p.getInkColor() + ': Hello');

Answer 2

Vous pouvez remplacer les fonctions par des wrappers qui appellent l'original et font également autre chose. Par exemple :

Object.keys(pen).forEach(name => {
    const originalFunction = pen[name];
    if (typeof originalFunction === "function") {
        pen[name] = function(...args) {
            console.log(name, args);
            return originalFunction.apply(this, args);
        };
    }
});

Cela remplace toutes les fonctions sur pen (seulement les siennes, pas celles dont il hérite) avec des wrappers qui font d'abord un console.log puis appelez l'original.

Exemple en direct :

var Pen = function(){
   this.inkColor = 'red';

   this.write = function(text){
      // used console.log instead of document.write
      console.log(text);
   }

   this.refill = function(){
      console.log('refilling');
   }

   this.getInkColor = function(){
      return this.inkColor;
   }

};

var pen = new Pen();

Object.keys(pen).forEach(name => {
    const originalFunction = pen[name];
    if (typeof originalFunction === "function") {
        pen[name] = function(...args) {
            console.log(name, args);
            return originalFunction.apply(this, args);
        };
    }
});

pen.write(pen.getInkColor() + ': Hello');

Vous pouvez modifier cela pour gérer les fonctions héritées du prototype, ou héritées uniquement de la fonction Pen.prototype (vous n'avez rien sur Pen.prototype à l'heure actuelle), etc.

Answer 3

Vous pouvez écrire une fonction qui renvoie une autre fonction :

function doSomethingFirst(somethingToDoFirstFn, thingToDoAfterFn) {
  return function() {
    somethingToDoFirstFn.apply(null, arguments);
    thingToDoAfterFn.apply(null, arguments);
  }
} 

var Pen = function(){
   // code

   this.refill = doSomethingFirst(function(){
      console.log('somethingFirst');
   }, function() {
      console.log('refilling');
   })   

   // code
};