Dasfunction Schlüsselwort kann verwendet werden, um eine Funktion innerhalb eines Ausdrucks zu definieren.

Sie können Funktionen auch mit derfunction Deklaration oder derArrow-Syntax definieren.

Probieren Sie es aus

const getRectArea = function (width, height) {  return width * height;};console.log(getRectArea(3, 4));// Expected output: 12

Syntax

function (param0) {  statements}function (param0, param1) {  statements}function (param0, param1, /* …, */ paramN) {  statements}function name(param0) {  statements}function name(param0, param1) {  statements}function name(param0, param1, /* …, */ paramN) {  statements}

Parameter

nameOptional

Der Funktionsname. Kann weggelassen werden, in diesem Fall ist die Funktionanonym. Der Name ist nur lokal für den Funktionskörper.

paramNOptional

Der Name eines formalen Parameters für die Funktion. Für die Syntax der Parameter siehe dieFunctions Referenz.

statementsOptional

Die Anweisungen, die den Körper der Funktion bilden.

Beschreibung

Einfunction Ausdruck ist sehr ähnlich zu und hat fast die gleiche Syntax wie einefunction Deklaration. Der Hauptunterschied zwischen einemfunction Ausdruck und einerfunction Deklaration ist derFunktionsname, der infunction Ausdrücken weggelassen werden kann, umanonyme Funktionen zu erstellen. Einfunction Ausdruck kann alsIIFE (Immediately Invoked Function Expression) verwendet werden, das ausgeführt wird, sobald es definiert ist. Siehe auch das Kapitel überFunktionen für weitere Informationen.

Hoisting von Function Expressions

Function Expressions in JavaScript werden nicht gehoben, im Gegensatz zuFunction Declarations. Sie können Function Expressions nicht verwenden, bevor Sie diese erstellen:

console.log(notHoisted); // undefined// Even though the variable name is hoisted,// the definition isn't. so it's undefined.notHoisted(); // TypeError: notHoisted is not a functionvar notHoisted = function () {  console.log("bar");};

Benannte Function Expression

Wenn Sie sich innerhalb des Funktionskörpers auf die aktuelle Funktion beziehen möchten, müssen Sie eine benannte Function Expression erstellen. Dieser Name ist dann nur lokal für den Funktionskörper (Scope). Dies vermeidet die Verwendung der veraltetenarguments.callee Eigenschaft, um die Funktion rekursiv aufzurufen.

const math = {  factorial: function factorial(n) {    console.log(n);    if (n <= 1) {      return 1;    }    return n * factorial(n - 1);  },};math.factorial(3); // 3;2;1;

Wenn eine Function Expression benannt ist, wird diename Eigenschaft der Funktion auf diesen Namen gesetzt, anstatt auf den impliziten Namen, der aus der Syntax abgeleitet wird (wie die Variable, der die Funktion zugewiesen ist).

Im Gegensatz zu Deklarationen ist der Name von Function Expressions schreibgeschützt.

"use strict";function foo() {  foo = 1;}foo();console.log(foo); // 1(function foo() {  foo = 1; // TypeError: Assignment to constant variable.})();

Beispiele

Verwendung von Function Expression

Das folgende Beispiel definiert eine unbenannte Funktion und weist siex zu. Die Funktion gibt das Quadrat ihres Arguments zurück:

const x = function (y) {  return y * y;};

Verwendung einer Funktion als Callback

Häufiger wird es alsCallback verwendet:

button.addEventListener("click", function (event) {  console.log("button is clicked!");});

Verwendung einer Immediately Invoked Function Expression (IIFE)

IIFEs sind ein häufiges Muster, das verwendet wird, um beliebig viele Anweisungen in ihrem eigenen Scope auszuführen (und möglicherweise einen Wert zurückzugeben), an einem Ort, der einen einzelnen Ausdruck erfordert. Viele traditionelle Anwendungsfälle von IIFEs wurden durch neue Syntaxfeatures wieModule undblock-skopierte Deklarationen überflüssig gemacht. IIFEs selbst werden jetzt häufiger mitArrow Functions geschrieben, aber die Idee bleibt dieselbe. Im Allgemeinen sehen IIFEs so aus:

// standard IIFE(function () {  // statements…})();// IIFE with arguments(function (a, b) {  console.log(a + b);})(1, 2); // logs 3// IIFE being used to initialize a variableconst value = (() => {  const randomValue = Math.random();  if (randomValue > 0.5) {    return "heads";  }  return "tails";})();

Hier führen wir mehrere Anwendungsfälle mit Beispielen ein.

Vermeidung der Verschmutzung des globalen Namensraums im Skriptcode

Der oberste Scope aller Skripte wird geteilt, was viele Funktionen und globale Variablen aus verschiedenen Dateien beinhalten könnte. Um Namenskonflikte zu vermeiden, ist es wichtig, die Anzahl der global deklarierten Namen zu beschränken (dies wird stark durchModule gemildert, aber manchmal ist es immer noch nützlich, den Scope von temporären Variablen zu begrenzen, besonders wenn die Datei sehr lang ist). Wenn wir Initialisierungscode haben, den wir nicht erneut verwenden müssen, könnten wir das IIFE-Muster verwenden, welches besser ist als eine Function Declaration oder eine Function Expression, da es sicherstellt, dass der Code nur hier und einmal ausgeführt wird.

// top-level of a script (not a module)var globalVariable = (() => {  // some initialization code  let firstVariable = something();  let secondVariable = somethingElse();  return firstVariable + secondVariable;})();// firstVariable and secondVariable cannot be accessed outside of the function body.

Das Modul-Muster

Wir würden auch IIFE verwenden, um private und öffentliche Variablen und Methoden zu erstellen. Für eine ausgefeiltere Verwendung des Modul-Musters und andere Verwendungen von IIFE könnten Sie das Buch "Learning JavaScript Design Patterns" von Addy Osmani sehen.

const makeWithdraw = (balance) =>  ((copyBalance) => {    let balance = copyBalance; // This variable is private    const doBadThings = () => {      console.log("I will do bad things with your money");    };    doBadThings();    return {      withdraw(amount) {        if (balance >= amount) {          balance -= amount;          return balance;        }        return "Insufficient money";      },    };  })(balance);const firstAccount = makeWithdraw(100); // "I will do bad things with your money"console.log(firstAccount.balance); // undefinedconsole.log(firstAccount.withdraw(20)); // 80console.log(firstAccount.withdraw(30)); // 50console.log(firstAccount.doBadThings); // undefined; this method is privateconst secondAccount = makeWithdraw(20); // "I will do bad things with your money"console.log(secondAccount.withdraw(30)); // "Insufficient money"console.log(secondAccount.withdraw(20)); // 0

For-Schleife mit var vor ES6

Wir könnten die folgende Verwendung von IIFE in altem Code sehen, vor der Einführung der block-skopiertenlet undconst Deklarationen. Mit der Anweisungvar haben wir nur Funktions-Skopes und den globalen Scope. Angenommen, wir möchten 2 Buttons mit den Texten Button 0 und Button 1 erstellen und wenn wir sie anklicken, sollen sie 0 und 1 anzeigen. Der folgende Code funktioniert nicht:

for (var i = 0; i < 2; i++) {  const button = document.createElement("button");  button.innerText = `Button ${i}`;  button.onclick = function () {    console.log(i);  };  document.body.appendChild(button);}console.log(i); // 2

Bei einem Klick zeigen beide Buttons 0 und Button 1 2 an, weili global ist, mit dem letzten Wert 2. Um dieses Problem vor ES6 zu beheben, könnten wir das IIFE-Muster verwenden:

for (var i = 0; i < 2; i++) {  const button = document.createElement("button");  button.innerText = `Button ${i}`;  button.onclick = (function (copyOfI) {    return function () {      console.log(copyOfI);    };  })(i);  document.body.appendChild(button);}console.log(i); // 2

Bei einem Klick zeigen die Buttons 0 und 1 0 und 1 an. Die Variablei ist global definiert. Mit der Anweisunglet könnten wir einfach tun:

for (let i = 0; i < 2; i++) {  const button = document.createElement("button");  button.innerText = `Button ${i}`;  button.onclick = function () {    console.log(i);  };  document.body.appendChild(button);}console.log(i); // Uncaught ReferenceError: i is not defined.

Bei einem Klick zeigen diese Buttons 0 und 1 an.

Kontrollflussanweisungen in Ausdruckspositionen

IIFEs ermöglichen es uns, Sprachkonstrukte wieswitch in einem Ausdruck zu verwenden.

someObject.property = (() => {  switch (someVariable) {    case 0:      return "zero";    case 1:      return "one";    default:      return "unknown";  }})();

Dieser Ansatz kann besonders nützlich in Szenarien sein, in denen Sie eine Variableconst machen möchten, aber gezwungen sind,let odervar während der Initialisierung zu verwenden:

let onlyAssignedOnce;try {  onlyAssignedOnce = someFunctionThatMightThrow();} catch (e) {  onlyAssignedOnce = null;}

Mit IIFEs können wir die Variableconst machen:

const onlyAssignedOnce = (() => {  try {    return someFunctionThatMightThrow();  } catch (e) {    return null;  }})();

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Funktionen Leitfaden
• Funktionen
• function
• Function
• Arrow functions