Function: displayName
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
displayName は Function インスタンスのプロパティで、関数の表示名を返します。
値
displayName プロパティは、初期状態ではどの関数にも存在しません。コード作成者が追加します。表示する目的のためには、文字列である必要があります。
解説
displayName プロパティが存在する場合、コンソールやプロファイラーでは、関数名として表示するのに name プロパティよりも推奨することがあります。
ブラウザーの中で、このプロパティを使用しているのは Firefox コンソールのみです。 React 開発ツールも、コンポーネントツリーを表示する際に displayName プロパティを使用しています。
Firefox は、無名の JavaScript 関数の命名規則アルゴリズムによって実現可能な displayName をデコードする基本的な試みをいくつか行います。 次のパターンが検出されます。
displayNameが英数字、_、$の並びで終わる場合、最も長い接尾辞が表示されます。displayNameが[]で囲まれた文字の並びで終わる場合、各括弧抜きの並びが表示されます。displayNameが英数字と_の後に/,.,<のいずれかが続いた場合、末尾の/,.,<の文字を除いた並びが表示されます。displayNameが英数字の並びと、それに続く_、そして(^)で終わる場合、その文字列は(^)なしで表示されます。
上記いずれのパターンにも一致しない場合は、 displayName 全体が表示されます。
例
displayName の設定
以下のものを Firefox コンソールに入力すると、 "function MyFunction()" のように表示されます。
function a() {}
a.displayName = "MyFunction";
a; / function MyFunction()
動的な displayName の変更
関数の displayName を動的に変更することができます。
const object = {
/ anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); / undefined
object.someMethod("123");
console.log(object.someMethod.displayName); / "someMethod (123)"
displayName の整理
Firefox の開発者ツールは、 displayName プロパティに表示する前に、そのプロパティに含まれるいくつかの共通パターンを整理します。
function foo() {}
function testName(name) {
foo.displayName = name;
console.log(foo);
}
testName("$foo$"); / function $foo$()
testName("foo bar"); / function bar()
testName("Foo.prototype.add"); / function add()
testName("foo ."); / function foo .()
testName("foo <"); / function foo <()
testName("foo?"); / function foo?()
testName("foo()"); / function foo()()
testName("[...]"); / function ...()
testName("foo<"); / function foo()
testName("foo..."); / function foo()
testName("foo(^)"); / function foo()
仕様書
どの仕様にも含まれていません。