Существуют ли «гармоничные» способы получения имени класса из экземпляра класса ES6? Кроме как

someClassInstance.constructor.name

В настоящее время я рассчитываю на реализацию Traceur. И кажется, что у Бабеля есть полифилл, Function.nameа у Трейсера нет.

Подводя итог, можно сказать, что в ES6 / ES2015 / Harmony другого пути не было, и в ES.Next ничего не ожидается.

Он может предоставлять полезные шаблоны для незавершенных серверных приложений, но нежелателен в приложениях, предназначенных для браузера / настольного компьютера / мобильного устройства.

Babel используетcore-js для заполнения Function.name, он должен быть загружен вручную для приложений Traceur и TypeScript в зависимости от ситуации.

someClassInstance.constructor.nameэто совершенно правильный способ сделать это. Транспортеры могут не поддерживать это, но это стандартный способ согласно спецификации. ( nameСвойство функций, объявленных через производства ClassDeclaration, устанавливается в 14.5.15 , шаг 6.)

Как говорит @ Domenic, используйте someClassInstance.constructor.name. @Esteban упоминает в комментариях, что

someClassInstance.constructorявляется функцией Все функции имеют nameсвойство ...

Таким образом, чтобы получить статический доступ к имени класса, сделайте следующее (это работает с моей версией Babel, кстати. Согласно комментариям на @Domenic ваш пробег может отличаться).

class SomeClass {
  constructor() {}
}

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

Обновить

Вавилон был в порядке, но в конечном итоге у меня возникли проблемы. Я создаю игру и создаю хеш объединенных ресурсов Sprite (где ключ - имя функции). После минификации каждая функция / класс была названа t. Это убивает хэш. Я использую Gulpв этом проекте, и после прочтения документации gulp-uglify я обнаружил, что есть параметр, чтобы предотвратить искажение этой локальной переменной / имени функции. Итак, в моем gulpfile я изменился

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

Здесь есть компромисс между производительностью и удобочитаемостью. Отказ от именования приведет к (немного) большему файлу сборки (больше сетевых ресурсов) и потенциально к более медленному выполнению кода (требуется цитирование - может быть BS). С другой стороны, если бы я сохранил то же самое, мне пришлось бы вручную определять getClassNameвсе классы ES6 - на статическом уровне и на уровне экземпляра. Нет, спасибо!

Обновить

После обсуждения в комментариях кажется, что отказ от .nameсоглашения в пользу определения этих функций - хорошая парадигма. Это займет всего несколько строк кода и позволит полностью минимизировать и обобщать ваш код (если он используется в библиотеке). Так что, я думаю, я передумал и буду определять getClassNameна уроках вручную . Спасибо @estus! , Метод получения / установки обычно является хорошей идеей по сравнению с прямым доступом к переменным в любом случае, особенно в клиентском приложении.

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)

Получение имени класса непосредственно из класса

В предыдущих ответах объяснялось, что someClassInstance.constructor.nameэто прекрасно работает, но если вам нужно программно преобразовать имя класса в строку и не хотите создавать экземпляр только для этого, запомните:

typeof YourClass === "function"

И, поскольку каждая функция имеет nameсвойство, другой хороший способ получить строку с именем вашего класса - это просто сделать:

YourClass.name

Далее следует хороший пример того, почему это полезно.

Загрузка веб-компонентов

Как учит нас документация MDN , вы загружаете веб-компонент следующим образом:

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

Откуда YourComponentидет класс HTMLElement? Поскольку считается хорошей практикой присваивать классу вашего компонента после самого тега компонента, было бы неплохо написать вспомогательную функцию, которую все ваши компоненты могли бы использовать для регистрации самих себя. Итак, вот эта функция:

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

Так что все, что вам нужно сделать, это:

registerComponent(YourComponent);

Что приятно, потому что это менее подвержено ошибкам, чем сам тэг компонента. Чтобы обернуть это, это upperCamelCaseToSnakeCase()функция:

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

Для трансплантации вавилона (до минификации)

Если вы используете Babel с @babel/preset-env, можно сохранить определения классов без преобразования их в функции (что удаляет constructorсвойство)

Вы можете отказаться от совместимости старого браузера с этой конфигурацией в babel.config / babelrc:

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

Дополнительная информация о targets: https://babeljs.io/docs/en/babel-preset-env#targets

Для минификации вавилона (после транспиляции)

Похоже, что сейчас нет простого решения ... Нам нужно взглянуть на искажения.