ES6 sınıfı örneğinden sınıf adını almanın 'uyumlu' yolları var mı? Ondan başka

someClassInstance.constructor.name

Şu anda Traceur uygulamasına güveniyorum. Ve Function.nameTraceur'da Babel'in çok amaçlı bir dolgusu var gibi görünüyor .

Her şeyi özetlemek gerekirse: ES6 / ES2015 / Harmony'de başka bir yol yoktu ve ES.Next'te ATM'den hiçbir şey beklenmiyor.

Minimuma indirilmemiş sunucu tarafı uygulamaları için yararlı desenler sağlayabilir, ancak tarayıcı / masaüstü / mobil amaçlı uygulamalarda istenmeyen bir durumdur.

Babel kullandığıcore-js Polyfill için Function.name, uygun şekilde Traceur ve typescript uygulamaları için elle yüklenmelidir.

someClassInstance.constructor.namebunu yapmanın doğru yolu. Transpiller bunu desteklemeyebilir, ancak şartnameye göre standart yoldur. ( nameClassDeclaration yapımları ile beyan edilen fonksiyonların özellikleri 14.5.15 , adım 6'da belirtilmiştir.)

@Domenic'in dediği gibi kullanın someClassInstance.constructor.name. @Ebeban yorumlarda bahsediyor ki

someClassInstance.constructorbir işlevdir. Tüm İşlevlerin bir nameözelliği vardır ...

Bu nedenle, sınıf adına statik olarak erişmek için aşağıdakileri yapın (bu benim Babel BTW sürümüm ile çalışır. @Domenic hakkındaki yorumlara göre kilometreniz değişebilir).

class SomeClass {
  constructor() {}
}

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

Güncelleme

Babel iyiydi, ama çirkinlik / küçülme sonunda sorunlara neden oldu. Bir oyun yapıyorum ve bir araya getirilmiş Sprite kaynaklarının bir karmasını oluşturuyorum (anahtar işlev adıdır). Küçültmeden sonra her işlev / sınıf adlandırıldı t. Bu hash öldürür. GulpBu projede kullanıyorum ve bulduğum gulp-uglify belgelerini okuduktan sonra bu yerel değişken / işlev adı yönetiminin gerçekleşmesini önleyen bir parametre var. Böylece, gf dosyamda değiştim

.pipe($.uglify()) için .pipe($.uglify({ mangle: false }))

Burada performans ile okunabilirlik karşılaştırması var. Adların yönetilmemesi (biraz) daha büyük bir derleme dosyasına (daha fazla ağ kaynağı) ve potansiyel olarak daha yavaş kod yürütülmesine neden olur (alıntı gerekir - BS olabilir). Öte yandan, aynı getClassNametutsaydım, her ES6 sınıfında statik ve örnek düzeyinde manuel olarak tanımlamam gerekirdi. Hayır teşekkürler!

Güncelleme

Yorumlardaki tartışmadan sonra, .namebu işlevleri tanımlamak lehine sözleşmeden kaçınmak iyi bir paradigma gibi görünüyor . Yalnızca birkaç satır kod alır ve kodunuzun tam olarak küçültülmesine ve genelleştirilmesine izin verir (kitaplıkta kullanılıyorsa). Bu yüzden sanırım fikrimi değiştiriyorum ve getClassNamederslerimi manuel olarak tanımlayacağım . Teşekkürler @estus! . Getter / Setters, özellikle istemci tabanlı bir uygulamada, doğrudan değişken erişime kıyasla genellikle iyi bir fikirdir.

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)

Sınıf adını doğrudan sınıftan alma

Önceki cevaplar someClassInstance.constructor.nameişe yaradığını açıkladı , ancak sınıf adını bir dizeye programlı olarak dönüştürmeniz gerekiyorsa ve bunun için bir örnek oluşturmak istemiyorsanız şunu unutmayın:

typeof YourClass === "function"

Ve her işlevin bir nameözelliği olduğundan, sınıf adınızla bir dize almanın başka bir güzel yolu da sadece şunu yapmaktır:

YourClass.name

Aşağıda, bunun neden faydalı olduğuna dair iyi bir örnek verilmiştir.

Web bileşenlerini yükleme

MDN belgelerinin bize öğrettiği gibi, bir web bileşenini şu şekilde yüklersiniz :

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

Nereden YourComponentuzanan bir sınıf HTMLElement. Bileşen etiketinin kendisinden sonra bileşeninizin sınıfını adlandırmak iyi bir uygulama olarak kabul edildiğinden, tüm bileşenlerinizin kendilerini kaydetmek için kullanabileceği bir yardımcı işlev yazmak iyi olurdu. İşte bu fonksiyon:

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

Tek yapmanız gereken:

registerComponent(YourComponent);

Bu da güzel çünkü bileşen etiketini kendiniz yazmaktan daha az hataya açık. Sarmak için bu upperCamelCaseToSnakeCase()işlev:

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

Babil transpilasyonu için (küçültmeden önce)

Babel ile kullanıyorsanız @babel/preset-env, sınıf tanımlarını işlevlere dönüştürmeden (özelliği kaldırır constructor) tutmak mümkündür

Bu yapılandırmayla bazı eski tarayıcı uyumluluğunu aşağıdakilere bırakabilirsiniz babel.config / babelrc:

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

Hakkında daha fazla bilgi targets: https://babeljs.io/docs/en/babel-preset-env#targets

Babil minimizasyonu için (transpilasyondan sonra)

Şu anda kolay bir çözüm yok gibi görünüyor ... Hariç tutulan istisnalara bakmamız gerekiyor.