Function.name

function.name 属性返回函数实例的名称。
Function.name 属性的属性特性:
writable false
enumerable false
configurable true

请注意,在非标准的ES2015之前的实现中,configurable属性也是false 。

示例

函数声明的名称

 name 属性返回一个函数声明的名称。

function doSomething() { }
doSomething.name;  // "doSomething" 

构造函数的名称

使用new Function(...)语法创建的函数或只是 Function(...) create Function对象及其名称为“anonymous”。

(new Function).name; // "anonymous"

推断函数名称

变量和方法可以从句法位置推断匿名函数的名称(ECMAScript 2015中新增)。

var f = function() {};
var object = {
  someMethod: function() {}
};

console.log(f.name); // "f"
console.log(object.someMethod.name); // "someMethod"

你可以在 函数表达式中定义函数的名称:

var object = {
  someMethod: function object_someMethod() {}
};

console.log(object.someMethod.name); // "object_someMethod"

try { object_someMethod } catch(e) { alert(e); }
// ReferenceError: object_someMethod is not defined

你不能更改函数的名称,此属性是只读的:

var object = {
  // anonymous
  someMethod: function() {}
};

object.someMethod.name = 'otherMethod';
console.log(object.someMethod.name); // someMethod

要更改它,可以使用Object.defineProperty()

简写方法的名称

var o = {
  foo(){}
};
o.foo.name; // "foo";

绑定函数的名称

Function.bind() 所创建的函数将会在函数的名称前加上"bound " 。

function foo() {}; 
foo.bind({}).name; // "bound foo"

getters 和 setters 的函数名

当通过 get 和 set 访问器来存取属性时, "get" 或 "set" 会出现在函数名称前。

var o = { 
  get foo(){}, 
  set foo(x){} 
}; 

var descriptor = Object.getOwnPropertyDescriptor(o, "foo"); 
descriptor.get.name; // "get foo" 
descriptor.set.name; // "set foo";

类中的函数名称

你可以使用obj.constructor.name来检查对象的“类”(但请务必阅读以下警告):

function Foo() {}  // ES2015 Syntax: class Foo {}

var fooInstance = new Foo();
console.log(fooInstance.constructor.name); // logs "Foo"

警告:脚本解释器只有在函数没有名为name的属性时才会设置内置的Function.name属性(参见 9.2.11 of the ECMAScript2015 Language Specification)。但是,ES2015规定由关键字static修饰的静态方法也会被认为是类的属性(ECMAScript2015, 14.5.14.21.b + 12.2.6.9)。

因此,我们无法获取具有静态方法属性name()的几乎任何类的类名称:

class Foo {
  constructor() {}
  static name() {}
}

使用static name()方法Foo.name不再保存实际的类名称,而是引用name()函数对象。 ES2015语法中的上述类定义将在Chrome或Firefox中运行,类似于ES5语法中的以下代码段:

function Foo() {}
Object.defineProperty(Foo, 'name', { writable: true });
Foo.name = function() {};

通过fooInstance.constructor.name获取fooInstance类不会给我们所有的类名,而是静态类方法的引用。 例如:

var fooInstance = new Foo();
console.log(fooInstance.constructor.name); // logs function name()

你也可以从ES5语法示例中看到,在Chrome或Firefox的中静态定义的Foo.name变得可写。内置定义在没有自定义静态定义时是只读的:

Foo.name = 'Hello';
console.log(Foo.name);
//如果Foo具有静态name()属性,则输出“Hello”,否则为“Foo”

因此,你不能依赖内置的Function.name属性来保持一个类的名称。

Symbol作为函数名称

如果Symbol 被用于函数名称,并且这个symbol具有相应的描述符,那么方法的名字就是方括号中的描述符。

var sym1 = Symbol("foo"); 
var sym2 = Symbol(); 
var o = { 
  [sym1]: function(){}, 
  [sym2]: function(){} 
}; 

o[sym1].name; // "[foo]"
o[sym2].name; // ""

JavaScript 压缩和 minifiers

警告:当使用Function.name和那些JavaScript压缩器(minifiers)或混淆器进行源码转换时要小心。这些工具通常用作JavaScript构建管道的一部分,以在程序部署到生产之前减少程序的大小。但这种转换通常会在构建时更改函数的名称。

例如下面的代码:

function Foo() {};
var foo = new Foo();

if (foo.constructor.name === 'Foo') {
  console.log("'foo' is an instance of 'Foo'");
} else {
  console.log('Oops!');
}

可能被压缩为:

function a() {};
var b = new a();
if (b.constructor.name === 'Foo') {
  console.log("'foo' is an instance of 'Foo'");
} else {
  console.log('Oops!');
}

在未压缩版本中,程序运行到真实分支并打印'foo' is an instance of 'Foo'。 而在压缩版本中,它的行为不同,并且进入else分支。如果您依赖于Function.name,就像上面的示例一样,确保您的构建管道不会更改函数名称,也不要假定函数具有特定的名称。

规范

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
name
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
name
Draft  

浏览器兼容性

Update compatibility data on GitHub
Desktop Mobile Server
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
name Chrome Full support 15 Edge Full support 14 Firefox Full support 1 IE No support No Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes nodejs Full support Yes
Configurable: true Chrome Full support 43 Edge Full support 14 Firefox Full support 38 IE No support No Opera Full support 30 Safari ? WebView Android Full support 43 Chrome Android Full support 43 Firefox Android Full support 38 Opera Android ? Safari iOS ? Samsung Internet Android Full support 4.0 nodejs ?
Inferred names on anonymous functions Chrome Full support 51 Edge Partial support 14
Notes
Partial support 14
Notes
Notes Names for functions defined in a dictionary are properly assigned; however, anonymous functions defined on a var/let variable assignment have blank names.
Firefox Full support 53 IE No support No Opera Full support 38 Safari ? WebView Android Full support 51 Chrome Android Full support 51 Firefox Android Full support 53 Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0 nodejs ?

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.