Чи є якісь "гармонійні" способи отримати ім'я класу з екземпляра класу ES6? Окрім

someClassInstance.constructor.name

В даний час я розраховую на реалізацію Traceur. І, схоже, у Function.nameБабелі є поліфіл, поки у Трасера ​​немає.

Підводячи підсумок: у ES6 / ES2015 / Гармонія іншого шляху не було, і банкоматів у ES.Next не очікується.

Він може надавати корисні зразки для немініфікованих додатків на сервері, але небажаний у додатках, призначених для браузера / настільних ПК / мобільних пристроїв.

Babel використовуєcore-js для полізаповнення Function.name, його слід завантажувати вручну для програм Traceur і TypeScript, якщо потрібно.

someClassInstance.constructor.nameце саме правильний спосіб зробити це. Транспілери можуть не підтримувати це, але це стандартний спосіб відповідно до специфікації. ( nameВластивість функцій, задекларованих за допомогою ClassDeclaration productions, встановлено в 14.5.15 , крок 6.)

Як говорить @Domenic, використовуйте someClassInstance.constructor.name. @Esteban в коментарях згадує, що

someClassInstance.constructorє функцією. Усі функції мають nameвластивість ...

Таким чином, для доступу до назви класу статично, зробіть наступне (це працює з моєю версією Babel BTW. Відповідно до коментарів до @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! . Як правило, Getter / Setters є хорошою ідеєю порівняно з прямим змінним доступом у будь-якому разі, особливо у клієнтській програмі.

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

Для мінімізації вабелів (після транспіляції)

Здається, що зараз немає простого рішення ... Нам потрібно розглянути виключення.