ES6クラスインスタンスからクラス名を取得する「調和のとれた」方法はありますか？以外

someClassInstance.constructor.name

現在、私はTraceurの実装を期待しています。そして、Babelにはポリフィルがあるようですが、Function.nameTraceurにはありません。

まとめると、ES6 / ES2015 / Harmonyには他に方法がなく、ES.NextにはATMが期待されていません。

それは非縮小化されたサーバー側アプリケーションに有用なパターンを提供するかもしれませんが、ブラウザ/デスクトップ/モバイル向けのアプリケーションでは望ましくありません。

Babel はcore-js polyfillを使用します。Traceur Function.nameおよびTypeScriptアプリケーションでは、必要に応じて手動でロードする必要があります。

someClassInstance.constructor.nameこれはまさに正しい方法です。トランスパイラーはこれをサポートしない場合がありますが、これは仕様による標準的な方法です。（nameClassDeclarationプロダクションを介して宣言された関数のプロパティは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'

更新

Babelは問題ありませんでしたが、uglify / minificationで問題が発生しました。私はゲームを作成しており、プールされたSpriteリソースのハッシュを作成しています（キーは関数名です）。縮小後、すべての関数/クラスに名前が付けられましたt。これはハッシュを殺します。私はGulpこのプロジェクトで使用しています。gulp-uglifyのドキュメントを読んだ後、このローカル変数/関数名のマングリングが発生しないようにするパラメーターがあることがわかりました。だから、私のgulpfileで私は変更しました

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

ここでは、パフォーマンスと読みやすさのトレードオフがあります。名前をマングルしないと、ビルドファイルが（わずかに）大きくなり（ネットワークリソースが増え）、コードの実行が遅くなる可能性があります（引用が必要-BSの場合があります）。一方、同じままにしておくと、getClassName静的およびインスタンスレベルで、すべてのES6クラスを手動で定義する必要があります。結構です！

更新

コメントでの議論の後、.nameそれらの関数を定義するために規約を回避することは良いパラダイムのようです。ほんの数行のコードしか必要とせず、コードの完全な小型化と一般性を可能にします（ライブラリで使用する場合）。だから私は自分の考えを変え、getClassName自分のクラスで手動で定義すると思います。@estusに感謝！。とにかく、特にクライアントベースのアプリケーションでは、直接変数アクセスと比較して、ゲッター/セッターは良いアイデアです。

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プロパティがあるため、クラス名を含む文字列を取得するもう1つの方法は、次のようにすることです。

YourClass.name

以下は、これが役立つ理由の良い例です。

Webコンポーネントの読み込み

MDNのドキュメントは、私たちを教え、これは、Webコンポーネントをロードする方法です。

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

バベルミニファイ（熱分解後）

今のところ簡単な解決策はないようです...除外のマングル化を検討する必要があります。