Czy są jakieś „harmonijne” sposoby uzyskania nazwy klasy z instancji klasy ES6? Inny niż

someClassInstance.constructor.name

Obecnie liczę na wdrożenie Traceur. I wydaje się, że Babel ma polyfill, Function.namepodczas gdy Traceur nie.

Podsumowując: w ES6 / ES2015 / Harmony nie było innej drogi, aw ES nie oczekuje się ATM. Dalej.

Może dostarczać użytecznych wzorców dla niezminimalizowanych aplikacji po stronie serwera, ale jest niepożądany w aplikacjach przeznaczonych dla przeglądarek / komputerów stacjonarnych / urządzeń przenośnych.

Babel używacore-js do wypełniania Function.name, powinien być ładowany ręcznie dla aplikacji Traceur i TypeScript, jeśli jest to właściwe.

someClassInstance.constructor.namejest dokładnie właściwym sposobem, aby to zrobić. Transpilery mogą tego nie obsługiwać, ale jest to standardowy sposób w specyfikacji. ( nameWłaściwość funkcji zadeklarowanych przez produkcje ClassDeclaration jest ustawiana w 14.5.15 , krok 6.)

Jak mówi @Domenic, użyj someClassInstance.constructor.name. @Esteban wspomina w komentarzach, że

someClassInstance.constructorjest funkcją. Wszystkie funkcje mają namewłaściwość ...

Tak więc, aby uzyskać statyczny dostęp do nazwy klasy, wykonaj następujące czynności (przy okazji działa to z moją wersją Babel. Zgodnie z komentarzami na @Domenic Twój przebieg może się różnić).

class SomeClass {
  constructor() {}
}

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

Aktualizacja

Babel był w porządku, ale uglifikacja / minifikacja ostatecznie spowodowała problemy. Tworzę grę i tworzę skrót zasobów Sprite w puli (gdzie kluczem jest nazwa funkcji). Po minifikacji każda funkcja / klasa została nazwana t. To zabija haszysz. Używam Gulpw tym projekcie i po przeczytaniu dokumentacji gulp-uglify odkryłem, że istnieje parametr zapobiegający zmianie lokalnej nazwy zmiennej / funkcji. Więc zmieniłem się w moim pliku łykowym

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

Występuje tutaj kompromis między wydajnością a czytelnością. Brak zniekształcenia nazw spowoduje (nieco) większy plik kompilacji (więcej zasobów sieciowych) i potencjalnie wolniejsze wykonanie kodu (potrzebne źródło - może to być BS). Z drugiej strony, gdybym zachował to samo, musiałbym ręcznie zdefiniować getClassNamedla każdej klasy ES6 - na poziomie statycznym i instancji. Nie, dziękuję!

Aktualizacja

Po dyskusji w komentarzach wydaje się, że unikanie .namekonwencji na rzecz definiowania tych funkcji to dobry paradygmat. Zajmuje tylko kilka wierszy kodu i pozwoli na pełną minifikację i ogólność kodu (jeśli jest używany w bibliotece). Więc chyba zmienię zdanie i ręcznie zdefiniuję getClassNamena moich zajęciach. Dzięki @estus! . Getter / Setters i tak są zwykle dobrym pomysłem w porównaniu do bezpośredniego dostępu do zmiennych, zwłaszcza w aplikacji opartej na kliencie.

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)

Pobieranie nazwy klasy bezpośrednio z klasy

Poprzednie odpowiedzi wyjaśniły, że to someClassInstance.constructor.namedziała dobrze, ale jeśli chcesz programowo przekonwertować nazwę klasy na ciąg i nie chcesz tworzyć instancji tylko do tego, pamiętaj, że:

typeof YourClass === "function"

A ponieważ każda funkcja ma namewłaściwość, innym dobrym sposobem na uzyskanie ciągu znaków z nazwą klasy jest wykonanie:

YourClass.name

Poniżej znajduje się dobry przykład tego, dlaczego jest to przydatne.

Ładowanie komponentów internetowych

Jak uczy dokumentacja MDN , ładowanie komponentu internetowego jest następujące:

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

Skąd YourComponentpochodzi klasa HTMLElement. Ponieważ nazywanie klasy komponentu po samym tagu komponentu jest uważane za dobrą praktykę, dobrze byłoby napisać funkcję pomocniczą, której wszystkie komponenty mogłyby się zarejestrować. Oto ta funkcja:

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

Więc wszystko, co musisz zrobić, to:

registerComponent(YourComponent);

Co jest miłe, ponieważ jest mniej podatne na błędy niż samodzielne pisanie tagu komponentu. Podsumowując, oto upperCamelCaseToSnakeCase()funkcja:

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

Do transpilacji babel (przed minifikacją)

Jeśli używasz Babel z @babel/preset-env, możliwe jest zachowanie definicji klas bez konwertowania ich na funkcje (co usuwa constructorwłaściwość)

Możesz zrezygnować ze starej zgodności przeglądarki z tą konfiguracją w babel.config / babelrc:

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

Więcej informacji na temat targets: https://babeljs.io/docs/en/babel-preset-env#targets

Do minifikacji babel (po transpilacji)

Wygląda na to, że w tej chwili nie ma łatwego rozwiązania ... Musimy przyjrzeć się zniekształconym wykluczeniom.