JavaScript函数.displayName 属性

在 JavaScript 中，函数是一等公民，具有许多有用的属性和方法。其中一个非常有用的属性是 displayName 属性。

定义

函数的 displayName 属性是可读写的字符串，表示函数的名称。它与函数名不同，因为函数名可以通过函数表达式和箭头函数省略。

用法

有许多原因可以使用函数的 displayName 属性。这是一些常见的用例：

调试

当你在调试 JavaScript 代码时，会发现 displayName 属性非常有用。例如，当你在调试两个具有相同名称的函数时，你可能需要查看每个函数的 displayName 属性以区分它们。

function foo() {}
function bar() {}

foo.displayName = 'foo';
bar.displayName = 'bar';

console.log(foo.displayName); // "foo"
console.log(bar.displayName); // "bar"

函数工厂

当你使用函数工厂创建函数时，你可以设置 displayName 属性来标识创建的函数。

function functionFactory(name) {
  const fn = function () {};
  fn.displayName = name;
  return fn;
}

const myFunction = functionFactory('myFunction');
console.log(myFunction.displayName); // "myFunction"

类成员

当你使用类创建函数时，你可以设置 displayName 属性来标识类成员函数。

class MyClass {
  myFunction() {}
}

MyClass.prototype.myFunction.displayName = 'MyClass.myFunction';
console.log(MyClass.prototype.myFunction.displayName); // "MyClass.myFunction"

总结

JavaScript 函数的 displayName 属性是一个非常有用的属性，可以帮助你在调试时识别函数以及在函数工厂和类成员中标识函数。