Function.displayName

非标准: 该特性是非标准的,请尽量不要在生产环境中使用它!

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

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

描述

如果存在 displayName 属性,其可能会被控制台和性能分析工具优先选择,作为函数的名称显示。

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

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

  • 如果 displayName 以一系列字母数字字符、_$ 结尾,最长的这种后缀将被显示。
  • 如果 displayName 以一系列以 [] 包围的字符结尾,该序列将被显示,但不包括方括号。
  • 如果 displayName 以一系列字母数字字符和 _,后面跟着一些 /.< 结尾,将返回该序列,但不包括尾部的 /.< 字符。
  • 如果 displayName 以一系列字母数字字符和 _,后面跟着 (^) 结尾,该序列将被显示,但不包括 (^)

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

示例

设置 displayName

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

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

规范

不属于任何规范。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
displayName
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.

参见