Apakah ada cara 'harmonis' untuk mendapatkan nama kelas dari instance kelas ES6? Selain daripada

someClassInstance.constructor.name

Saat ini saya mengandalkan implementasi Traceur. Dan sepertinya Babel memiliki polyfill untuk Function.namesementara Traceur tidak.

Singkatnya: tidak ada cara lain di ES6 / ES2015 / Harmony, dan tidak ada ATM yang diharapkan di ES.Berikutnya.

Ini mungkin menyediakan pola yang berguna untuk aplikasi sisi server yang tidak dijinakkan tetapi tidak diinginkan dalam aplikasi yang dimaksudkan untuk browser / desktop / seluler.

Babel menggunakancore-js untuk polyfill Function.name, itu harus dimuat secara manual untuk aplikasi Traceur dan TypeScript yang sesuai.

someClassInstance.constructor.namepersis cara yang tepat untuk melakukan ini. Transpiler mungkin tidak mendukung ini, tetapi itu adalah cara standar per spesifikasi. ( nameProperti fungsi yang dideklarasikan melalui produksi ClassDeclaration diatur dalam 14.5.15 , langkah 6.)

Seperti kata @Domenic, gunakan someClassInstance.constructor.name. @Esteban menyebutkan dalam komentar itu

someClassInstance.constructoradalah sebuah Fungsi. Semua Fungsi memiliki nameproperti ...

Jadi, untuk mengakses nama kelas secara statis, lakukan hal berikut (ini bekerja dengan BTW versi Babel saya. Menurut komentar pada @Domenic, jarak tempuh Anda mungkin berbeda).

class SomeClass {
  constructor() {}
}

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

Memperbarui

Babel baik-baik saja, tetapi uglify / minification akhirnya menyebabkan saya bermasalah. Saya membuat game, dan saya sedang membuat hash sumber Sprite dikumpulkan (di mana kuncinya adalah nama fungsi). Setelah minifikasi, setiap fungsi / kelas diberi nama t. Ini membunuh hash. Saya menggunakan Gulpdalam proyek ini, dan setelah membaca dokumen gulp-uglify saya menemukan ada parameter untuk mencegah ini variabel / fungsi nama mangling terjadi. Jadi, dalam gulpfile saya, saya berubah

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

Ada trade-off kinerja vs keterbacaan di sini. Tidak mengacaukan nama-nama akan menghasilkan (sedikit) membangun file yang lebih besar (lebih banyak sumber daya jaringan) dan berpotensi eksekusi kode lebih lambat (kutipan diperlukan - mungkin BS). Di sisi lain, jika saya menyimpannya sama saya harus mendefinisikan secara manual getClassNamepada setiap kelas ES6 - pada tingkat statis dan contoh. Tidak, terima kasih!

Memperbarui

Setelah diskusi dalam komentar, sepertinya menghindari .namekonvensi yang mendukung mendefinisikan fungsi-fungsi tersebut adalah paradigma yang baik. Hanya membutuhkan beberapa baris kode, dan akan memungkinkan minifikasi penuh dan generalisasi kode Anda (jika digunakan di perpustakaan). Jadi saya kira saya berubah pikiran dan secara manual akan menentukan getClassNamekelas saya. Terima kasih @estus! . Getter / Setters biasanya merupakan ide yang bagus dibandingkan dengan akses variabel langsung, terutama dalam aplikasi berbasis klien.

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)

Mendapatkan nama kelas langsung dari kelas

Jawaban sebelumnya menjelaskan bahwa itu someClassInstance.constructor.nameberfungsi dengan baik, tetapi jika Anda secara terprogram mengubah nama kelas menjadi string dan tidak ingin membuat turunan hanya untuk itu, ingat bahwa:

typeof YourClass === "function"

Dan, karena setiap fungsi memiliki nameproperti, cara lain yang bagus untuk mendapatkan string dengan nama kelas Anda adalah dengan hanya melakukan:

YourClass.name

Berikut ini adalah contoh bagus mengapa ini berguna.

Memuat komponen web

Seperti yang diajarkan oleh dokumentasi MDN kepada kami, ini adalah cara Anda memuat komponen web:

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

Di mana YourComponentkelas membentang dari HTMLElement. Karena dianggap praktik yang baik untuk memberi nama kelas komponen Anda setelah tag komponen itu sendiri, alangkah baiknya menulis fungsi pembantu yang dapat digunakan semua komponen Anda untuk mendaftar sendiri. Jadi, inilah fungsi itu:

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

Jadi yang perlu Anda lakukan adalah:

registerComponent(YourComponent);

Yang bagus karena lebih sedikit kesalahan daripada menulis tag komponen sendiri. Untuk menyelesaikannya, ini adalah upperCamelCaseToSnakeCase()fungsinya:

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

Untuk transpilasi babel (sebelum minifikasi)

Jika Anda menggunakan Babel dengan @babel/preset-env, dimungkinkan untuk menjaga definisi kelas tanpa mengubahnya menjadi fungsi (yang menghapus constructorproperti)

Anda dapat menjatuhkan beberapa kompatibilitas browser lama dengan konfigurasi ini di babel.config / babelrc:

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

Informasi lebih lanjut tentang targets: https://babeljs.io/docs/en/babel-preset-env#targets

Untuk minifikasi babel (setelah transpilasi)

Sepertinya tidak ada solusi mudah saat ini ... Kita perlu melihat pengecualian yang membingungkan.