Maison > interface Web > js tutoriel > le corps du texte

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

Barbara Streisand
Libérer: 2024-10-21 06:02:30
original
814 Les gens l'ont consulté

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) + ";");
  }
}
Copier après la connexion

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;
  }
}
Copier après la connexion

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

class ExtensibleFunction extends Function {
  constructor(f) {
    return Object.setPrototypeOf(f, new.target.prototype);
  }
}
Copier après la connexion

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

class Smth extends ExtensibleFunction {
  constructor(x) {
    super(function() { return x; });
  }
}
Copier après la connexion

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!

source:php
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!