Esistono modi "armoniosi" per ottenere il nome della classe dall'istanza della classe ES6? Altro che

someClassInstance.constructor.name

Attualmente conto sull'implementazione di Traceur. E sembra che Babel abbia un polifill per Function.namementre Traceur no.

Riassumendo: in ES6 / ES2015 / Harmony non c'era altro modo e in ES non si prevede nulla di ATM.

Può fornire schemi utili per applicazioni lato server non minime, ma è indesiderato in applicazioni pensate per browser / desktop / dispositivi mobili.

Babel usa ilcore-js polyfill Function.name, dovrebbe essere caricato manualmente per le applicazioni Traceur e TypeScript come appropriato.

someClassInstance.constructor.nameè esattamente il modo corretto per farlo. I transpiler potrebbero non supportare questo, ma è il modo standard secondo le specifiche. (La nameproprietà delle funzioni dichiarate tramite produzioni ClassDeclaration è impostata in 14.5.15 , passaggio 6.)

Come dice @Domenic, usa someClassInstance.constructor.name. @Esteban menziona nei commenti che

someClassInstance.constructorè una funzione. Tutte le funzioni hanno una nameproprietà ...

Quindi, per accedere staticamente al nome della classe, procedi come segue (questo funziona con la mia versione di Babel BTW. Secondo i commenti su @Domenic il tuo chilometraggio può variare).

class SomeClass {
  constructor() {}
}

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

Aggiornare

Babele stava bene, ma l'ubriacatura / minificazione finì per causarmi problemi. Sto creando un gioco e sto creando un hash di risorse Sprite in pool (dove la chiave è il nome della funzione). Dopo la minificazione, ogni funzione / classe è stata nominata t. Questo uccide l'hash. Sto usando Gulpin questo progetto e dopo aver letto i documenti gulp-uglify ho scoperto che esiste un parametro per impedire che questa variabile locale / nome mangling si verifichi. Quindi, nel mio gulpfile sono cambiato

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

C'è un compromesso tra prestazioni e leggibilità qui. Non alterare i nomi comporterà un file di build (leggermente) più grande (più risorse di rete) e un'esecuzione del codice potenzialmente più lenta (citazione necessaria - potrebbe essere BS). D'altra parte, se lo mantenessi lo stesso, dovrei definire manualmente getClassNamesu ogni classe ES6, a livello statico e di istanza. No grazie!

Aggiornare

Dopo la discussione nei commenti, sembra che evitare la .nameconvenzione a favore della definizione di tali funzioni sia un buon paradigma. Richiede solo poche righe di codice e consentirà la completa minimizzazione e generalità del codice (se utilizzato in una libreria). Quindi immagino di cambiare idea e di definire manualmente le getClassNamemie lezioni. Grazie @estus! . I getter / setter sono di solito una buona idea rispetto all'accesso diretto variabile comunque, specialmente in un'applicazione client-based.

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)

Ottenere il nome della classe direttamente dalla classe

Le risposte precedenti hanno spiegato che someClassInstance.constructor.namefunziona bene, ma se è necessario convertire a livello di codice il nome della classe in una stringa e non si desidera creare un'istanza solo per quello, ricordare che:

typeof YourClass === "function"

E poiché ogni funzione ha una nameproprietà, un altro modo carino per ottenere una stringa con il nome della tua classe è semplicemente fare:

YourClass.name

Quello che segue è un buon esempio del perché questo è utile.

Caricamento dei componenti Web

Come ci insegna la documentazione MDN , ecco come caricare un componente Web:

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

Da dove YourComponentsi estende una classe HTMLElement. Dato che è buona norma nominare la classe del componente in base al tag del componente stesso, sarebbe utile scrivere una funzione di supporto che tutti i componenti potrebbero utilizzare per registrarsi. Quindi ecco quella funzione:

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

Quindi tutto ciò che devi fare è:

registerComponent(YourComponent);

Il che è bello perché è meno soggetto a errori rispetto alla scrittura del tag componente da soli. Per concludere, questa è la upperCamelCaseToSnakeCase()funzione:

// 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());
}

Per la transpilazione della babele (prima della minificazione)

Se stai usando Babel con @babel/preset-env, è possibile mantenere le definizioni delle classi senza convertirle in funzioni (che rimuove la constructorproprietà)

Puoi eliminare la vecchia compatibilità del browser con questa configurazione nel tuo babel.config / babelrc:

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

Maggiori informazioni su targets: https://babeljs.io/docs/en/babel-preset-env#targets

Per la minificazione della babele (dopo la transpilazione)

Sembra che non ci sia una soluzione facile in questo momento ... Dobbiamo guardare alle esclusioni mangling.