Function: displayName
非標準：此特性未標準化。我們不建議在生產環境中使用非標準特性，因為它們瀏覽器支援有限，並且可能會更改或被移除。但是，在沒有標準選項的特定情況下，它們可以是合適的替代方案。
Function 例項的可選 displayName 屬性用於指定函式的顯示名稱。
值
displayName 屬性最初不在任何函式上——它是由程式碼作者新增的。出於顯示目的，它應該是一個字串。
描述
如果存在 displayName 屬性，控制檯和效能分析器在顯示函式名稱時，可能會優先使用它而不是 name 屬性。
在瀏覽器中，只有 Firefox 控制檯會使用此屬性。React 開發者工具在顯示元件樹時也會使用 displayName 屬性。
Firefox 會嘗試對 匿名 JavaScript 函式命名約定 演算法可能生成的 displayName 進行基本解碼。它會檢測以下模式：
- 如果
displayName以一系列字母數字字元、_和$結尾，則顯示最長的此類字尾。 - 如果
displayName以方括號[]包圍的字元序列結尾，則顯示不帶方括號的該序列。 - 如果
displayName以一系列字母數字字元和_結尾，後跟一些/、.或<，則在顯示該序列時會刪除尾部的/、.或<字元。 - 如果
displayName以一系列字母數字字元和_結尾，後跟(^)，則在顯示該序列時會刪除(^)。
如果以上任何模式都不匹配，則顯示整個 displayName。
示例
設定 displayName
在 Firefox 控制檯中輸入以下程式碼，應該會顯示類似 function MyFunction() 的內容。
js
function a() {}
a.displayName = "MyFunction";
a; // function MyFunction()
動態更改 displayName
您可以動態更改函式的 displayName。
js
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 屬性之前，清理一些常見的模式。
js
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()
規範
不屬於任何標準。
瀏覽器相容性
載入中…