Function.name | JavaScript

在此页

JavaScript compressors and minifiers
范例
规范
浏览器兼容性
另请参阅
相关话题

Function object's read-only name property indicates the function's name as specified when it was created, or it may be rather anonymous or '' (an empty string) for functions created anonymously.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

特性属性在 `Function.name`
可写	no
可枚举	no
可配置	yes

Note that in non-standard, pre-ES2015 implementations the configurable attribute was false as well.

JavaScript compressors and minifiers

警告： Be careful when using Function.name and source code transformations, such as those carried out by JavaScript compressors (minifiers) or obfuscators. These tools are often used as part of a JavaScript build pipeline to reduce the size of a program prior to deploying it to production. Such transformations often change a function's name at build-time.

Source code such as:

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

may be compressed to:

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

In the uncompressed version, the program runs into the truthy-branch and logs "'foo' is an instance of 'Foo'" . Whereas, in the compressed version it behaves differently, and runs into the else-branch. If you rely on Function.name , like in the example above, make sure your build pipeline doesn't change function names, or don't assume a function to have a particular name.

范例

Function statement name

name property returns the name of a function statement.

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

Function constructor name

Functions created with the syntax new Function(...) or just Function(...) create Function objects and their name is "anonymous".

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

Anonymous function expression

Anonymous function expressions that were created using the keyword function or arrow functions would have "" (an empty string) as their name.

(function() {}).name; // ""
(() => {}).name; // ""

Inferred function names

Variables and methods can infer the name of an anonymous function from its syntactic position (new in ECMAScript 2015).

let f = function() {};
let object = {
  someMethod: function() {}
};
console.log(f.name); // "f"
console.log(object.someMethod.name); // "someMethod"

You can define a function with a name in a 函数表达式 :

let object = {
  someMethod: function object_someMethod() {}
};
console.log(object.someMethod.name); // logs "object_someMethod"
try { object_someMethod } catch(e) { console.log(e); }
// ReferenceError: object_someMethod is not defined

The name property is read-only and cannot be changed by the assigment operator:

Example below contradicts with what is said at the beginning of this section and doesn't work as described.

 let object = {
  // anonymous
  someMethod: function() {}
};
object.someMethod.name = 'otherMethod';
console.log(object.someMethod.name); // someMethod

To change it, use Object.defineProperty() .

Shorthand method names

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

Bound function names

Function.bind() produces a function whose name is "bound " plus the function name.

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

Function names for getters and setters

当使用 get and set accessor properties, "get" or "set" will appear in the function name.

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

Function names in classes

可以使用 obj.constructor.name to check the "class" of an object (but be sure to read the warnings below):

function Foo() {}  // ES2015 Syntax: class Foo {}
var fooInstance = new Foo();
console.log(fooInstance.constructor.name); // logs "Foo"

警告： The script interpreter will set the built-in Function.name property only if a function does not have an own property called name (see section 9.2.11 of the ECMAScript2015 Language Specification ). However, ES2015 specifies the static keyword such that static methods will be set as OwnProperty of the class constructor function (ECMAScript2015, 14.5.14.21.b + 12.2.6.9 ).

Therefore we can't obtain the class name for virtually any class with a static method property name() :

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

With a static name() 方法 Foo.name no longer holds the actual class name but a reference to the name() function object. Above class definition in ES2015 syntax will behave in Chrome or Firefox similar to the following snippet in ES5 syntax:

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

Trying to obtain the class of fooInstance 凭借 fooInstance.constructor.name won't give us the class name at all but a reference to the static class method. Example:

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

You may also see from the ES5 syntax example that in Chrome or Firefox our static definition of Foo.name becomes writable . The built-in definition in the absence of a custom static definition is 只读 :

Foo.name = 'Hello';
console.log(Foo.name); // logs "Hello" if class Foo has a static name() property but "Foo" if not.

Therefore you may not rely on the built-in Function.name property to always hold a class's name.

Symbols as function names

若 Symbol is used a function name and the symbol has a description, the method's name is the description in square brackets.

let sym1 = Symbol("foo");
let sym2 = Symbol();
let o = {
  [sym1]: function(){},
  [sym2]: function(){}
};
o[sym1].name; // "[foo]"
o[sym2].name; // ""

规范

规范
ECMAScript (ECMA-262) The definition of 'name' in that specification.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 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 15	Edge 14	Firefox 1	IE No	Opera 10.5	Safari 6	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 6	Samsung Internet Android 1.0	nodejs Yes
Configurable: true	Chrome 43	Edge 14	Firefox 38	IE No	Opera 30	Safari No	WebView Android 43	Chrome Android 43	Firefox Android 38	Opera Android 30	Safari iOS No	Samsung Internet Android 4.0	nodejs ?
Inferred names on anonymous functions	Chrome 51	Edge 部分支持 14 部分支持 14 Names for functions defined in a dictionary are properly assigned; however, anonymous functions defined on a var/let variable assignment have blank names.	Firefox 53	IE No	Opera 38	Safari 10	WebView Android 51	Chrome Android 51	Firefox Android 53	Opera Android 41	Safari iOS 10	Samsung Internet Android 5.0	nodejs ?

图例

完整支持
部分支持
不支持
兼容性未知 ?

另请参阅

Function

元数据

最后修改： May 20, 2020

在此页