Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!
The function.name
property returns the name of the function.
Property attributes of Function.name |
|
---|---|
Writable | no |
Enumerable | no |
Configurable | yes |
configurable
attribute was false
as well.Description
The name
property returns the name of a function, or (before ES6 implementations) an empty string for anonymous functions:
function doSomething() {} console.log(doSomething.name); // logs "doSomething"
Functions created with the syntax new Function(...)
or just Function(...)
have their name
property set to an empty string. In the following examples anonymous functions are created, so name
returns an empty string:
var f = function() {}; var object = { someMethod: function() {} }; console.log(f.name == ''); // true console.log(object.someMethod.name == ''); // also true
Browsers that implement ES6 functions can infer the name of an anonymous function from its syntactic position. For example:
var f = function() {}; console.log(f.name); // "f"
You can define a function with a name in a function expression:
var 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
You cannot change the name of a function, this property is read-only:
var object = { // anonymous someMethod: function() {} }; object.someMethod.name = 'someMethod'; console.log(object.someMethod.name); // empty string, someMethod is anonymous
To change it, you could use Object.defineProperty()
though.
Examples
You can use obj.constructor.name
to check the "class" of an object (read the warnings below):
function Foo() {} // ES2015 Syntax: class Foo {} var foo = new Foo(); console.log(foo.constructor.name); // logs "Foo"
Warning: The script interpreter will set a function's name
property only if a function does not have an own property called name (see section 9.11.2. of the ECMAScript2015 Language Specification). Reading an object's constructor function name won't work for ES2015 classes with a static method or property name()
class Foo { constructor() {} static name() {} } var foo = new Foo(); console.log(foo.constructor.name); // logs function name() // Name of constructor function Foo is no longer read-only Foo.name = "Hello"; console.log(foo.constructor.name); // logs "Hello"The behavior for such a class in newer versions of Chrome or Firefox is similar to the following ES5 snippet:
function Foo() {} Object.defineProperty(Foo, "name", { writable: true }); Foo.name = function() { return "Hello"; }; var foo = new Foo(); console.log(Foo.constructor.name);
So you may not want to rely on Function.name
to always hold the actual class name.
Warning: 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() {}; var 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() {}; var 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. Therefore, 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.Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'name' in that specification. |
Standard | Initial definition. |
ECMAScript 2017 Draft (ECMA-262) The definition of 'name' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer/Edge | Opera | Safari |
---|---|---|---|---|---|
Basic support | 33.0 | (Yes) | 12 | (Yes) | (Yes) |
Configurable: true | 43.0 | 38 (38) | ? | ? | ? |
Inferred names on anonymous functions | 51.0 | No support [1] | ? | ? | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE/Edge Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 12 | (Yes) | (Yes) | (Yes) |
Configurable: true | ? | ? | 38.0 (38) | ? | ? | ? | ? |
Inferred names on anonymous functions | No support | 51.0 | No support [1] | ? | ? | ? | 51.0 |
[1] See bug 883377.