函数：displayName

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都有效。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

Function 实例的可选displayName 属性指定函数的显示名称。

值

displayName 属性最初不在任何函数上存在——它是代码作者添加的。出于显示目的，它应该是一个字符串。

描述

如果存在，displayName 属性可能会被控制台和分析器优先于name 属性显示为函数的名称。

在浏览器中，只有 Firefox 控制台使用此属性。React 开发工具在显示组件树时也使用displayName 属性。

Firefox 会进行一些基本的尝试来解码可能由匿名 JavaScript 函数命名约定算法生成的 displayName。检测到以下模式

如果 displayName 以一系列字母数字字符、_ 和 $ 结尾，则显示最长的此类后缀。
如果 displayName 以一系列 [] 括起来的字符结尾，则显示该序列，但不带方括号。
如果 displayName 以一系列字母数字字符和 _ 结尾，后跟一些 /、. 或 <，则返回该序列，但不带尾随 /、. 或 < 字符。
如果 displayName 以一系列字母数字字符和 _ 结尾，后跟 (^)，则显示该序列，但不带 (^)。

如果以上模式都不匹配，则显示整个 displayName。

示例

设置 displayName

在 Firefox 控制台中输入以下内容，它应该显示为类似 function MyFunction() 的内容

const a = function () {};
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()

规范

不属于任何标准。

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅

Function.prototype.name