Maison >interface Web >js tutoriel >Comment étendre les fonctions dans les classes ES6 : navigation dans « ce » et techniques de fermeture

Comment étendre les fonctions dans les classes ES6 : navigation dans « ce » et techniques de fermeture

Barbara Streisand
Barbara Streisandoriginal
2024-10-21 06:02:30888parcourir

How to Extend Functions in ES6 Classes: Navigating 'this' and Closure Techniques

Extension de fonctions avec les classes ES6 : comprendre « ceci » et les astuces de fermeture

L'extension d'objets spéciaux dans ES6 permet l'héritage des fonctions, les activant à appeler en tant que fonctions. Cependant, l'implémentation de la logique de tels appels nécessite un examen attentif de la référence 'this'.

Par défaut, lorsqu'une méthode est appelée sur une instance de classe, 'this' pointe vers l'instance elle-même. Cependant, lorsqu'une fonction est appelée directement, « ceci » fait référence à l'objet global (par exemple, une fenêtre). Pour résoudre ce problème, nous avons deux options :

1. Données de codage en dur dans le constructeur :

L'appel 'super' peut invoquer le constructeur Function, en attendant une chaîne de code. Pour accéder aux données de l'instance, nous pouvons les coder en dur :

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

2. Closure et Closure Wrappers :

Pour une solution plus flexible, nous devons créer une fermeture qui attribue des données d'instance à la fonction renvoyée :

class Smth extends Function {
  constructor(x) {
    function smth() { return x; }
    Object.setPrototypeOf(smth, Smth.prototype);
    return smth;
  }
}

Pour abstraire cette fonctionnalité, nous peut introduire une classe 'ExtensibleFunction' :

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

Les sous-classes peuvent alors hériter d'ExtensibleFunction :

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

L'utilisation de fonctions fléchées ou de fonctions nommées peut également fournir des approches alternatives, bien qu'elles puissent différer dans leur comportement en matière d'héritage.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn