Javascript Decorators: Comment stocker la fonction avec cette portée?

Question

Je voudrais créer un décorateur pour stocker une fonction de ce champ dans un tableau pour chaque instance créée d'une classe Je ne peux pas trouver les mots justes pour expliquer donc ici disons que j'ai le code suivant:

Je sais que les décorateurs ne sont pas traités pendant l'instanciation de classe.

class Foo 
{ 
    constructor() 
    { 
     this.MyValue = "Foo"; 
    } 

    @StoreFunction() 
    TestA() 
    { 
     console.log("Foo MyValue:", this.MyValue); 
    } 
} 
class Bar extends Foo 
{ 
    constructor() 
    { 
     this.MyValue = "Bar"; 
    } 

    @StoreFunction() 
    TestB() 
    { 
     console.log("Bar MyValue:", this.MyValue); 
    } 
} 

function StoreFunction() 
{ 
    return function(target, key, descriptor) 
    { 
     // How would i go about saving the function there so i can call it later?? 
     return descriptor; 
    } 
} 

J'ai donc essayé de faire ce qui suit dans StoreFunction.

var StoredFunctions = []; 

function StoreFunction() 
{ 
    return function(target, key, descriptor) 
    { 
     if(target._StoredFunctions) 
     { 
      target._StoredFunctions = []; 
     } 
     // Save the function's name 
     target._StoredFunctions.push(key); 

     return descriptor; 
    } 
} 

Puis les lier dans le constructeur.

class Foo 
{ 
    constructor() 
    { 
     this.MyValue = "Foo"; 
     this.BindFunctions() 
    } 

    BindFunctions() 
    { 
     if(this._StoredFunctions) 
     { 
      this._StoredFunctions.forEach(method => { 
       StoredFunctions.push(this[method].bind(this)); 
      }); 
     } 
    } 
} 

Mais encore une fois, this._StoredFunctions ne stocke pas correctement les StoredFunctions car ils sont statiques. Je ne suis pas sûr de savoir comment le faire fonctionner correctement.

S'il vous plaît laissez-moi savoir si la question n'est pas claire que j'ai du mal à expliquer le problème.

Answer 1

Vous pouvez insérer une sous-classe automatique qui peut gérer de faire le travail nécessaire de « exposer » (ou autrement faire des choses avec) les fonctions marquées, voir les commentaires:

// `exposable` sets the class up for `exposed` on methods 
function exposable() { 
    return function decorator(target, name) { 
     // Create our subclass with the same name 
     const o = {[name]: class extends target { 
      constructor(...args) { 
       super(...args); 
       // "Expose" the bound methods 
       this.exposed = {}; 
       Object.getOwnPropertyNames(target.prototype).forEach(name => { 
        const method = target.prototype[name]; 
        if (method.exposed) { 
         this.exposed[name] = method.bind(this); 
        } 
       }); 
      } 
     }}; 
     return o[name]; 
    }; 
} 

// `expose` marks a method to be exposed in the constructor 
function exposed(state) { 
    return function decorator(target, name, config) { 
     config.value.exposed = true; 
     return config; 
    }; 
} 

// Example 
@exposable() 
class Foo { 
    constructor(name) { 
     this.name = name; 
    } 

    @exposed() 
    testA() { 
     console.log("testA says " + this.name); 
    } 

    testB() { 
     console.log("testB says " + this.name); 
    } 
} 

const f = new Foo("Fred"); 
f.exposed.testA(); // Says "testA says Fred" because it's bound 

---

Vous avez dit que nous peut s'appuyer sur une classe de base commune (Foo). Si oui, nous pouvons déplacer la logique en elle-même Foo:

// `expose` marks a method to be exposed in the constructor 
function exposed(state) { 
    return function decorator(target, name, config) { 
     config.value.exposed = true; 
     return config; 
    }; 
} 

// Example 
class Foo { 
    constructor(name) { 
     this.name = name; 
     this.exposed = Object.create(null); 
     let proto = Object.getPrototypeOf(this); 
     while (proto && proto !== Object.prototype) { 
      Object.getOwnPropertyNames(proto).forEach(name => { 
       if (!this.exposed[name]) { 
        const method = this[name]; 
        if (typeof method === "function" && method.exposed) { 
         // Expose it 
         this.exposed[name] = method.bind(this); 
        } 
       } 
      }); 
      proto = Object.getPrototypeOf(proto); 
     } 
    } 

    @exposed() 
    testA() { 
     console.log("testA says " + this.name); 
    } 
} 

class Bar extends Foo { 

    @exposed() 
    testB() { 
     console.log("testB says " + this.name); 
    } 
} 

const f = new Foo("Fred"); 
f.exposed.testA(); // Says "testA says Fred" because it's bound 
const b = new Bar("Barney"); 
b.exposed.testA(); // Says "testA says Barney" because it's bound 
b.exposed.testB(); // Says "testB says Barney" because it's bound 

Answer 2

T.J. Crowder fourni une réponse correcte, je fournis une solution propre et lisible que je suis venu avec basé sur T.J. Crowder.

var StoredFunctions = {}; 
class Foo 
{ 
    constructor() 
    { 
     this.MyValue = "Foo"; 
     this.SetupStore(); 
    } 

    SetupStore() 
    { 
     let Methods = Object.getOwnPropertyNames(Object.getPrototypeOf(this)); 
     for(let Method of Methods) 
     { 
      if(typeof(this[Method]) == "function" && this[Method]._StoredFunction) 
      { 
       StoredFunctions[Method] = this[Method].bind(this); 
      } 

     } 
    } 

    @StoreFunction() 
    TestA() 
    { 
     console.log("Foo MyValue:", this.MyValue); 
    } 
} 

class Bar extends Foo 
{ 
    constructor() 
    { 
     this.MyValue = "Bar"; 
    } 

    @StoreFunction() 
    TestB() 
    { 
     console.log("Bar MyValue:", this.MyValue); 
    } 
} 



function StoreFunction(StoreInfo) 
{ 
    return function(target, key, descriptor) 
    { 
     descriptor.value._StoredFunction = true; // Mark the function to be stored on initialization 
     return descriptor; 
    } 
}