Existe-t-il des moyens «harmonieux» pour obtenir le nom de classe à partir de l'instance de classe ES6? Autre que

someClassInstance.constructor.name

Actuellement je compte sur l'implémentation de Traceur. Et il semble que Babel ait un polyfill pendant Function.nameque Traceur n'en a pas.

Pour résumer le tout: il n'y avait pas d'autre moyen dans ES6 / ES2015 / Harmony, et rien n'est attendu ATM dans ES.Next.

Il peut fournir des modèles utiles pour les applications côté serveur non réduites mais n'est pas souhaité dans les applications destinées au navigateur / bureau / mobile.

Babel utilisecore-js pour polyfill Function.name, il doit être chargé manuellement pour les applications Traceur et TypeScript selon le cas.

someClassInstance.constructor.nameest exactement la bonne façon de procéder. Les transpileurs peuvent ne pas prendre en charge cela, mais c'est la méthode standard selon la spécification. (La namepropriété des fonctions déclarées via les productions ClassDeclaration est définie dans 14.5.15 , étape 6.)

Comme le dit @Domenic, utilisez someClassInstance.constructor.name. @Esteban mentionne dans les commentaires que

someClassInstance.constructorest une fonction. Toutes les fonctions ont une namepropriété ...

Ainsi, pour accéder au nom de la classe de façon statique, procédez comme suit (cela fonctionne avec ma version Babel BTW. Selon les commentaires sur @Domenic votre kilométrage peut varier).

class SomeClass {
  constructor() {}
}

var someClassInstance = new SomeClass();
someClassInstance.constructor.name;      // === 'SomeClass'
SomeClass.name                           // === 'SomeClass'

Mettre à jour

Babel allait bien, mais uglify / minification a fini par me causer des problèmes. Je crée un jeu et je crée un hachage de ressources Sprite mises en commun (où la clé est le nom de la fonction). Après la minification, chaque fonction / classe a été nommée t. Cela tue le hachage. J'utilise Gulpdans ce projet, et après avoir lu la documentation gulp-uglify, j'ai découvert qu'il y avait un paramètre pour empêcher cette modification du nom de la variable / fonction locale. Donc, dans mon gulpfile j'ai changé

.pipe($.uglify()) à .pipe($.uglify({ mangle: false }))

Il y a ici un compromis entre performances et lisibilité. Ne pas modifier les noms entraînera un fichier de construction (légèrement) plus volumineux (plus de ressources réseau) et une exécution de code potentiellement plus lente (citation nécessaire - peut être BS). D'un autre côté, si je gardais la même chose, je devrais définir manuellement getClassNamesur chaque classe ES6 - au niveau statique et de l'instance. Non merci!

Mettre à jour

Après la discussion dans les commentaires, il semble qu'éviter la .nameconvention en faveur de la définition de ces fonctions soit un bon paradigme. Cela ne prend que quelques lignes de code et permettra une minification complète et une généralisation de votre code (s'il est utilisé dans une bibliothèque). Donc je suppose que je change d'avis et que je définirai manuellement getClassNamemes cours. Merci @estus! . Les Getter / Setters sont généralement une bonne idée par rapport à l'accès direct aux variables de toute façon, en particulier dans une application client.

class SomeClass {
  constructor() {}
  static getClassName(){ return 'SomeClass'; }
  getClassName(){ return SomeClass.getClassName(); }
}
var someClassInstance = new SomeClass();
someClassInstance.constructor.getClassName();      // === 'SomeClass' (static fn)
someClassInstance.getClassName();                  // === 'SomeClass' (instance fn)
SomeClass.getClassName()                           // === 'SomeClass' (static fn)

Obtenir le nom de la classe directement depuis la classe

Les réponses précédentes ont expliqué que cela someClassInstance.constructor.namefonctionne très bien, mais si vous devez convertir par programme le nom de la classe en une chaîne et que vous ne voulez pas créer une instance juste pour cela, rappelez-vous que:

typeof YourClass === "function"

Et, puisque chaque fonction a une namepropriété, une autre manière intéressante d'obtenir une chaîne avec le nom de votre classe est de simplement faire:

YourClass.name

Ce qui suit est un bon exemple de pourquoi cela est utile.

Chargement des composants Web

Comme nous l'enseigne la documentation MDN, voici comment charger un composant Web:

customElements.define("your-component", YourComponent);

D'où YourComponentvient une classe qui s'étend HTMLElement. Puisqu'il est considéré comme une bonne pratique de nommer la classe de votre composant après la balise de composant elle-même, il serait bien d'écrire une fonction d'assistance que tous vos composants pourraient utiliser pour s'enregistrer. Voici donc cette fonction:

function registerComponent(componentClass) {
    const componentName = upperCamelCaseToSnakeCase(componentClass.name);
    customElements.define(componentName, componentClass);
}

Il vous suffit donc de:

registerComponent(YourComponent);

Ce qui est bien car c'est moins sujet aux erreurs que d'écrire vous-même la balise de composant. Pour conclure, voici la upperCamelCaseToSnakeCase()fonction:

// converts `YourString` into `your-string`
function upperCamelCaseToSnakeCase(value) {
    return value
        // first char to lower case
        .replace(/^([A-Z])/, $1 => $1.toLowerCase())
        // following upper chars get preceded with a dash
        .replace(/([A-Z])/g, $1 => "-" + $1.toLowerCase());
}

Pour la transpilation babel (avant minification)

Si vous utilisez Babel avec @babel/preset-env, il est possible de conserver les définitions de classes sans les convertir en fonctions (ce qui supprime la constructorpropriété)

Vous pouvez supprimer une ancienne compatibilité de navigateur avec cette configuration dans votre babel.config / babelrc:

{
  "presets": [
    ["@babel/preset-env", {"targets": {"browsers": ["> 2%"]}}]
  ]
}

Plus d'informations sur targets: https://babeljs.io/docs/en/babel-preset-env#targets

Pour la minification de babel (après transpilation)

Il semble qu'il n'y a pas de solution facile pour le moment ... Nous devons envisager de réduire les exclusions.