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()
规范
不属于任何标准。
浏览器兼容性
加载中…