Comment étendre les fonctions avec les classes ES6 et accéder aux variables d'instance ?

Extension de fonctions avec les classes ES6

ES6 introduit la possibilité d'étendre des objets spéciaux comme l'objet Function. Cela nous permet de créer des classes qui héritent de fonctions et se comportent comme des fonctions lorsqu'elles sont appelées. Cependant, la mise en œuvre de la logique de tels appels nécessite un examen attentif.

Comprendre le prototype de fonction

Lors de l'appel d'une classe en tant que fonction, le mot-clé this fait référence à l'objet global (fenêtre dans un environnement de navigateur) plutôt que l'instance de classe. Pour accéder à l'instance de classe, nous ne pouvons pas utiliser l'appel super() traditionnel, car il attend une chaîne de code pour le constructeur de fonction.

Codage en dur de la valeur

Une approche consiste à coder en dur la valeur dans le constructeur :

class Smth extends Function {
  constructor(x) {
    super("return " + JSON.stringify(x) + ";");
  }
}

(new Smth(256))() // Returns 256

Cependant, ce n'est pas idéal car cela repose sur des valeurs codées en dur.

Exploiter les fermetures

Pour activer une fermeture pouvant accéder aux variables d'instance, nous pouvons créer une fonction imbriquée dans le constructeur :

class Smth extends Function {
  constructor(x) {
    // Refer to `smth` instead of `this`
    function smth() {
      return x;
    }
    Object.setPrototypeOf(smth, Smth.prototype);
    return smth;
  }
}

(new Smth(256))() // Returns 256

Abstraction avec ExtensibleFunction

Pour abstraire ce modèle, nous pouvons créer une classe ExtensibleFunction :

class ExtensibleFunction extends Function {
  constructor(f) {
    return Object.setPrototypeOf(f, new.target.prototype);
  }
}

class Smth extends ExtensibleFunction {
  constructor(x) {
    super(function() {
      return x;
    });
  }
}

(new Smth(256))() // Returns 256

Cette approche fournit un moyen réutilisable de créer des fonctions extensibles avec accès aux variables d'instance.

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!