Function: name

Probieren Sie es aus

const func1 = function () {};

const object = {
  func2: function () {},
};

console.log(func1.name);
// Expected output: "func1"

console.log(object.func2.name);
// Expected output: "func2"

Wert

Eine Zeichenfolge.

Beschreibung

Die Eigenschaft name einer Funktion kann verwendet werden, um die Funktion in Debugging-Werkzeugen oder Fehlermeldungen zu identifizieren. Für die Sprache selbst hat sie keine semantische Bedeutung.

Die Eigenschaft name ist schreibgeschützt und kann nicht mit dem Zuweisungsoperator geändert werden:

function someFunction() {}

someFunction.name = "otherFunction";
console.log(someFunction.name); // someFunction

Verwenden Sie stattdessen Object.defineProperty(), um sie zu ändern.

Die Eigenschaft name wird in der Regel aus der Art abgeleitet, wie die Funktion definiert ist. In den folgenden Abschnitten werden die verschiedenen Möglichkeiten beschrieben, wie dies geschehen kann.

Funktionsdeklaration

Die Eigenschaft name gibt den Namen einer Funktionsdeklaration zurück.

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

Als Standard exportierte Funktionsdeklaration

Eine export default-Deklaration exportiert die Funktion als Deklaration statt als Ausdruck. Ist die Deklaration anonym, lautet der Name "default".

// -- someModule.js --
export default function () {}

// -- main.js --
import someModule from "./someModule.js";

someModule.name; // "default"

Function-Konstruktor

Funktionen, die mit dem Function()-Konstruktor erstellt werden, haben den Namen „anonymous“.

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

Funktionsausdruck

Wenn der Funktionsausdruck einen Namen hat, wird dieser als Wert der Eigenschaft name verwendet.

const someFunction = function someFunctionName() {};
someFunction.name; // "someFunctionName"

Anonyme Funktionsausdrücke, die mit dem Schlüsselwort function oder der Syntax für Pfeilfunktionen erstellt werden, haben standardmäßig "" (eine leere Zeichenfolge) als Namen.

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

Solche Fälle sind jedoch selten: Um die Funktion an anderer Stelle aufzurufen, wird der Funktionsausdruck üblicherweise einem Bezeichner zugeordnet. Der Name eines anonymen Funktionsausdrucks kann in bestimmten syntaktischen Kontexten abgeleitet werden, darunter Variablendeklarationen und Methoden sowie Initialisierer und Standardwerte.

Ein praktischer Fall, in dem der Name nicht abgeleitet werden kann, ist eine Funktion, die von einer anderen Funktion zurückgegeben wird:

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

Variablendeklaration und Methode

Bei Variablen und Methoden kann der Name einer anonymen Funktion aus ihrer syntaktischen Position abgeleitet werden.

const f = function () {};
const object = {
  someMethod: function () {},
};

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

Dasselbe gilt für Zuweisungen:

let f;
f = () => {};
f.name; // "f"

Initialisierer und Standardwert

Funktionen in Initialisierern (Standardwerten) bei Destrukturierung, Standardparametern, Klassenfeldern usw. übernehmen den Namen des gebundenen Bezeichners als Wert ihrer Eigenschaft name.

const [f = () => {}] = [];
f.name; // "f"

const { someMethod: m = () => {} } = {};
m.name; // "m"

function foo(f = () => {}) {
  console.log(f.name);
}
foo(); // "f"

class Foo {
  static someMethod = () => {};
}
Foo.someMethod.name; // someMethod

Kurzschreibweise für Methoden

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

Gebundene Funktion

Function.prototype.bind() erzeugt eine Funktion, deren Name aus „bound “ und dem Funktionsnamen besteht.

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

Getter und Setter

Bei Verwendung der Accessor-Eigenschaften get und set erscheint „get“ beziehungsweise „set“ im Funktionsnamen.

const o = {
  get foo() {
    return 1;
  },
  set foo(x) {},
};

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

Klasse

Der Name einer Klasse wird nach demselben Verfahren bestimmt wie bei Funktionsdeklarationen und -ausdrücken.

class Foo {}
Foo.name; // "Foo"

Symbol als Funktionsname

Wenn ein Symbol als Funktionsname verwendet wird und das Symbol eine Beschreibung hat, besteht der Name der Methode aus dieser Beschreibung in eckigen Klammern.

const sym1 = Symbol("foo");
const sym2 = Symbol();

const o = {
  [sym1]() {},
  [sym2]() {},
};

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

Private Felder und Methoden

Bei privaten Feldern und privaten Methoden ist das Rautezeichen (#) Teil des Namens.

class Foo {
  #field = () => {};
  #method() {}
  getNames() {
    console.log(this.#field.name);
    console.log(this.#method.name);
  }
}

new Foo().getNames();
// "#field"
// "#method"

Beispiele

Den Konstruktornamen eines Objekts ermitteln

Mit obj.constructor.name können Sie die „Klasse“ eines Objekts überprüfen.

function Foo() {} // Or: class Foo {}

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

Da statische Mitglieder jedoch zu eigenen Eigenschaften der Klasse werden, lässt sich bei praktisch keiner Klasse mit einer statischen Methodeneigenschaft name() der Klassenname auf diese Weise ermitteln:

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

Bei einer Methode static name() enthält Foo.name nicht mehr den tatsächlichen Klassennamen, sondern eine Referenz auf das Funktionsobjekt name(). Wenn Sie versuchen, die Klasse von fooInstance über fooInstance.constructor.name zu ermitteln, erhalten Sie daher nicht den Klassennamen, sondern eine Referenz auf die statische Klassenmethode. Beispiel:

const fooInstance = new Foo();
console.log(fooInstance.constructor.name); // ƒ name() {}

Aufgrund statischer Felder muss name nicht einmal eine Funktion sein.

class Foo {
  static name = 123;
}
console.log(new Foo().constructor.name); // 123

Wenn eine Klasse eine statische Eigenschaft namens name hat, wird diese außerdem beschreibbar. Die integrierte Eigenschaft ist ohne eine benutzerdefinierte statische Definition dagegen schreibgeschützt:

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

Verlassen Sie sich daher nicht darauf, dass die integrierte Eigenschaft name immer den Namen einer Klasse enthält.

JavaScript-Komprimierungs- und Minifizierungswerkzeuge

Quellcode wie dieser:

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

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

kann zu Folgendem komprimiert werden:

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

In der unkomprimierten Version wird der Zweig für eine truthy-Bedingung ausgeführt und „'foo' is an instance of 'Foo'“ protokolliert. Die komprimierte Version verhält sich dagegen anders und führt den else-Zweig aus. Wenn Sie sich wie im obigen Beispiel auf die Eigenschaft name verlassen, stellen Sie sicher, dass Ihre Build-Pipeline Funktionsnamen nicht ändert, oder gehen Sie nicht davon aus, dass eine Funktion einen bestimmten Namen hat.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill für Function: name in core-js
• Polyfill von es-shims für Function.prototype.name
• Function