Les fonctions fléchées peuvent-elles lier de manière permanente les méthodes de classe dans ES6 ?

Comment lier de manière permanente des fonctions de classe à l'aide de fonctions fléchées dans les classes ES6

Les classes ES6 offrent une manière plus concise d'écrire du code JavaScript orienté objet . Cependant, lorsqu'il s'agit de définir des méthodes de classe, les développeurs peuvent se demander s'il est possible de lier de manière permanente la méthode à l'instance de classe à l'aide de fonctions fléchées, comme ce qui peut être fait avec CoffeeScript.

Problème :

Traditionnellement, les méthodes de classe sont liées à l'instance à l'aide de la méthode bind() dans le constructeur. Cependant, l'utilisation de fonctions fléchées introduit des différences syntaxiques qui nécessitent une approche modifiée.

Syntaxe :

Pour lier une fonction de classe en tant que méthode d'instance de classe à l'aide d'une fonction flèche, le la syntaxe suivante peut être utilisée :

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

Notez le différence :

Par rapport à l'approche traditionnelle, la fonction flèche nécessite un signe égal (=) après le nom de la propriété.

Fonction expérimentale :

Cette fonctionnalité est actuellement considérée comme expérimentale dans Babel. Pour l'utiliser, le plugin transform-class-properties doit être activé. Cela peut être fait en l'ajoutant à la section plugins du fichier de configuration Babel :

{
  "plugins": [
    "transform-class-properties"
  ]
}

Exemple d'utilisation :

Une fois la fonctionnalité activée, les développeurs peuvent passer la méthode de classe en tant que fonction de rappel et elle sera limitée à l'instance de classe, plutôt qu'à l'objet window. Par exemple, le code suivant enregistrerait la valeur de « val » à partir de l'instance SomeClass :

setTimeout(SomeClass.handleInputChange, 1000, 'foo');

Conclusion :

En exploitant les fonctions fléchées et en activant l'option plugin transform-class-properties, les développeurs peuvent lier de manière permanente des méthodes de classe aux instances de classe. Cette approche simplifie le processus de liaison et fournit une syntaxe concise et cohérente pour définir les méthodes de classe dans ES6.

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!