Existem maneiras 'harmoniosas' de obter o nome da classe da instância da classe ES6? Outro que não seja

someClassInstance.constructor.name

Atualmente, estou contando com a implementação do Traceur. E parece que Babel tem um polyfill por Function.nameenquanto Traceur não.

Para resumir tudo: não havia outro caminho no ES6 / ES2015 / Harmony, e nada é esperado no caixa eletrônico no ES.Next.

Ele pode fornecer padrões úteis para aplicativos do servidor não minificados, mas é indesejável em aplicativos destinados ao navegador / desktop / celular.

Babel usacore-js para polyfill Function.name; ele deve ser carregado manualmente para aplicativos Traceur e TypeScript conforme apropriado.

someClassInstance.constructor.nameé exatamente a maneira correta de fazer isso. Os transpilers podem não suportar isso, mas é o caminho padrão conforme a especificação. (A namepropriedade das funções declaradas por meio das produções ClassDeclaration é definida em 14.5.15 , etapa 6.)

Como o @Domenic diz, use someClassInstance.constructor.name. @Esteban menciona nos comentários que

someClassInstance.constructoré uma função. Todas as funções têm uma namepropriedade ...

Portanto, para acessar o nome da classe estaticamente, faça o seguinte (isso funciona com minha versão Babel BTW. De acordo com os comentários em @Domenic, sua milhagem pode variar).

class SomeClass {
  constructor() {}
}

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

Atualizar

Babel estava bem, mas uglify / minification acabou me causando problemas. Estou criando um jogo e criando um hash de recursos de Sprite em pool (onde a chave é o nome da função). Após a minificação, todas as funções / classes foram nomeadas t. Isso mata o hash. Estou usando Gulpneste projeto e, depois de ler os documentos do gulp-uglify , descobri que há um parâmetro para impedir que essa variável / nome da função local seja alterada . Então, no meu gulpfile eu mudei

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

Há uma troca de desempenho versus legibilidade aqui. Não manipular os nomes resultará em um arquivo de compilação (um pouco) maior (mais recursos de rede) e execução de código potencialmente mais lenta (citação necessária - pode ser BS). Por outro lado, se eu mantivesse o mesmo, teria que definir manualmente getClassNameem todas as classes ES6 - no nível estático e de instância. Não, obrigado!

Atualizar

Após a discussão nos comentários, parece que evitar a .nameconvenção em favor da definição dessas funções é um bom paradigma. Leva apenas algumas linhas de código e permitirá minificação e generalidade completas do seu código (se usado em uma biblioteca). Acho que mudo de idéia e defino manualmente getClassNamenas minhas aulas. Obrigado @estus! . Getter / Setters geralmente são uma boa idéia em comparação com o acesso direto a variáveis ​​de qualquer maneira, especialmente em um aplicativo baseado em cliente.

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)

Obtendo o nome da turma diretamente da turma

As respostas anteriores explicaram que someClassInstance.constructor.namefunciona muito bem, mas se você precisar converter programaticamente o nome da classe em uma string e não desejar criar uma instância apenas para isso, lembre-se:

typeof YourClass === "function"

E, como toda função tem uma namepropriedade, outra maneira agradável de obter uma string com o nome da sua classe é:

YourClass.name

O que se segue é um bom exemplo de por que isso é útil.

Carregando componentes da Web

Como a documentação do MDN nos ensina, é assim que você carrega um componente da web:

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

Onde YourComponent uma classe se estende HTMLElement. Como é uma boa prática nomear a classe do seu componente após a própria tag do componente, seria bom escrever uma função auxiliar que todos os seus componentes pudessem usar para se registrar. Então aqui está essa função:

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

Então, tudo que você precisa fazer é:

registerComponent(YourComponent);

O que é legal porque é menos propenso a erros do que você mesmo escrever a tag do componente. Para finalizar, esta é a upperCamelCaseToSnakeCase()função:

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

Para transpilação de babel (antes da minificação)

Se você estiver usando o Babel @babel/preset-env, é possível manter as definições de classes sem convertê-las em funções (o que remove a constructorpropriedade)

Você pode descartar alguma compatibilidade antiga do navegador com esta configuração em babel.config / babelrc:

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

Mais informações sobre targets: https://babeljs.io/docs/en/babel-preset-env#targets

Para minificação de babel (após transpilação)

Parece que não há uma solução fácil no momento ... Precisamos examinar exclusões desconcertantes.