Gibt es harmonische Möglichkeiten, den Klassennamen von der ES6-Klasseninstanz abzurufen? Außer

someClassInstance.constructor.name

Derzeit zähle ich auf die Implementierung von Traceur. Und es scheint, dass Babel eine Polyfüllung hat, Function.nameTraceur nicht.

Um es zusammenzufassen: In ES6 / ES2015 / Harmony gab es keinen anderen Weg, und in ES.Next wird kein Geldautomat erwartet.

Es kann nützliche Muster für nicht minimierte serverseitige Anwendungen bereitstellen, ist jedoch in Anwendungen für Browser / Desktop / Mobile unerwünscht.

Babel verwendetcore-js zum Polyfill Function.name, es sollte für Traceur- und TypeScript-Anwendungen entsprechend manuell geladen werden.

someClassInstance.constructor.nameist genau der richtige Weg, dies zu tun. Transpiler unterstützen dies möglicherweise nicht, aber es ist der Standardweg gemäß der Spezifikation. (Die nameEigenschaft von Funktionen, die über ClassDeclaration-Produktionen deklariert wurden , wird in 14.5.15 , Schritt 6 festgelegt.)

Wie @Domenic sagt, verwenden Sie someClassInstance.constructor.name. @Esteban erwähnt in den Kommentaren, dass

someClassInstance.constructorist eine Funktion. Alle Funktionen haben eine nameEigenschaft ...

Um statisch auf den Klassennamen zuzugreifen, gehen Sie wie folgt vor (dies funktioniert übrigens mit meiner Babel-Version. Gemäß den Kommentaren zu @Domenic kann Ihr Kilometerstand variieren).

class SomeClass {
  constructor() {}
}

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

Aktualisieren

Babel ging es gut, aber Uglify / Minification verursachte mir Probleme. Ich mache ein Spiel und erstelle einen Hash gepoolter Sprite-Ressourcen (wobei der Schlüssel der Funktionsname ist). Nach der Minimierung wurde jede Funktion / Klasse benannt t. Dies tötet den Hash. Ich verwende es Gulpin diesem Projekt und nachdem ich die gulp-uglify-Dokumente gelesen habe, habe ich festgestellt, dass es einen Parameter gibt, der verhindert, dass diese lokale Variable / Funktionsname beschädigt wird. Also habe ich mich in meinem Gulpfile verändert

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

Hier gibt es einen Kompromiss zwischen Leistung und Lesbarkeit. Wenn die Namen nicht entstellt werden, führt dies zu einer (geringfügig) größeren Build-Datei (mehr Netzwerkressourcen) und möglicherweise zu einer langsameren Codeausführung (Zitieren erforderlich - möglicherweise BS). Wenn ich es jedoch gleich halten würde, müsste ich es getClassNamefür jede ES6-Klasse manuell definieren - auf statischer und Instanzebene. Nein Danke!

Aktualisieren

Nach der Diskussion in den Kommentaren scheint .namees ein gutes Paradigma zu sein , die Konvention zugunsten der Definition dieser Funktionen zu vermeiden . Es dauert nur wenige Codezeilen und ermöglicht eine vollständige Minimierung und Allgemeingültigkeit Ihres Codes (falls in einer Bibliothek verwendet). Ich denke, ich ändere meine Meinung und werde getClassNamemeine Klassen manuell definieren . Danke @estus! . Getter / Setter sind normalerweise eine gute Idee im Vergleich zum direkten Variablenzugriff, insbesondere in einer Client-basierten Anwendung.

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)

Abrufen des Klassennamens direkt von der Klasse

In früheren Antworten wurde erklärt, dass dies einwandfrei someClassInstance.constructor.namefunktioniert. Wenn Sie jedoch den Klassennamen programmgesteuert in eine Zeichenfolge konvertieren müssen und keine Instanz dafür erstellen möchten, denken Sie daran:

typeof YourClass === "function"

Und da jede Funktion eine nameEigenschaft hat, können Sie auch eine Zeichenfolge mit Ihrem Klassennamen abrufen:

YourClass.name

Was folgt, ist ein gutes Beispiel dafür, warum dies nützlich ist.

Laden von Webkomponenten

Wie aus der MDN-Dokumentation hervorgeht , laden Sie eine Webkomponente folgendermaßen:

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

Wo YourComponentist , die sich eine Klasse aus HTMLElement. Da es als bewährte Methode angesehen wird, die Klasse Ihrer Komponente nach dem Komponenten-Tag selbst zu benennen, wäre es hilfreich, eine Hilfsfunktion zu schreiben, mit der sich alle Ihre Komponenten registrieren könnten. Hier ist also diese Funktion:

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

Alles was Sie tun müssen ist:

registerComponent(YourComponent);

Das ist schön, weil es weniger fehleranfällig ist, als das Komponenten-Tag selbst zu schreiben. Zum Abschluss ist dies die upperCamelCaseToSnakeCase()Funktion:

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

Zur Babeltranspilation (vor der Minifizierung)

Wenn Sie Babel mit verwenden @babel/preset-env, ist es möglich, Klassendefinitionen beizubehalten, ohne sie in Funktionen zu konvertieren (wodurch das entfernt wirdconstructor Eigenschaft entfernt wird).

Sie können einige alte Browserkompatibilitäten mit dieser Konfiguration in Ihrem Verzeichnis löschen babel.config / babelrc:

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

Weitere Informationen zu targets: https://babeljs.io/docs/en/babel-preset-env#targets

Zur Babelminimierung (nach Transpilation)

Es sieht so aus, als ob es momentan keine einfache Lösung gibt ... Wir müssen uns die Ausschlüsse von Verstümmelungen ansehen.