We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

function.name プロパティは、関数の名前を返します。。

Function.name のプロパティ属性
書込可能 不可
列挙可能 不可
設定可能
非標準であった ES6 以前の実装では、configurable 属性も false であったことに注意してください。

説明

name プロパティは関数の名前、または(ES6 以前の実装では)無名関数に対して空文字を返します:

function doSomething() {}

console.log(doSomething.name); // logs "doSomething"

構文 new Function(...) または単に Function(...) で関数を作成するとその name プロパティは、空文字が設定されます。以下の例では無名関数を作成していますので、name は空文字を返します:

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

console.log(f.name == ''); // true
console.log(object.someMethod.name == ''); // also true

function expression で、name を持つ関数を定義することができます:

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

このプロパティは読み取り専用であり、関数の name を変更することはできません:

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

object.someMethod.name = 'someMethod';
console.log(object.someMethod.name); // empty string, someMethod is anonymous

オブジェクトの "クラス" を確認するために、obj.constructor.name を用いることができます:

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

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

Warning: スクリプトインタープリターは、関数が name と呼ばれるプロパティを持っていない場合に限り、関数の name プロパティを設定します(9.11.2. of the ECMAScript2015 Language Specification セクションを見てください。)静的なメソッドやプロパティの name() を持つ ES2015 のクラスでは、オブジェクトの関数名の読み取りは動作しません。

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 や Firefox の新しいバージョンでのクラスに対する振る舞いは、次の ES5 スニペットに似ています:
function Foo() {}
Object.defineProperty(Foo, "name", { writable: true });
Foo.name = function() { 
   return "Hello"; 
};
var foo = new Foo();
console.log(foo.constructor.name); // logs function() { return "Hello"; }

したがって、実際のクラス名を常に保持するために Function.name に頼ることは望ましくありません。

Warning: Function.name を使用しているときに、JavaScript 圧縮(ミニファイ)や難読かのような変換を行う際には注意が必要です。これらのツールは、これらのツールは、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' と表示するのに対し、圧縮版は異なる振る舞いをし、偽の分岐を実行します。それゆえ、上述の例のように Function.name に依存するならば、ビルドパイプラインが関数名を変更しないようにするか、特定の関数名を想定しないつくりにする必要があります。

仕様

仕様 ステータス コメント
ECMAScript 2015 (6th Edition, ECMA-262)
name の定義
標準 初期定義。
ECMAScript Latest Draft (ECMA-262)
name の定義
ドラフト  

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer/Edge Opera Safari
基本サポート 33.0 (有) 12 (有) (有)
Configurable: true 43.0 38 (38) ? ? ?
無名関数の名前推論 51.0 未サポート [1] ? ? ?
機能 Android Android Webview Firefox Mobile (Gecko) IE/Edge Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート (有) (有) (有) 12 (有) (有) (有)
Configurable: true ? ? 38.0 (38) ? ? ? ?
無名関数の名前推論 未サポート 51.0 未サポート [1] ? ? ? 51.0

[1] バグ 883377 を見てください。

ドキュメントのタグと貢献者

このページの貢献者: shimataro, YuichiNukiyama, ethertank, yyss
最終更新者: shimataro,