Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions below:

Pfeilfunktionen - JavaScript | MDN

Baseline Widely available

Ein Pfeilfunktionsausdruck ist eine kompakte Alternative zu einem traditionellen Funktionsausdruck, mit einigen semantischen Unterschieden und bewussten Einschränkungen in der Verwendung:

• Pfeilfunktionen haben keine eigenen Bindungen an this, arguments oder super und sollten nicht als Methoden verwendet werden.
• Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Der Aufruf mit new führt zu einem TypeError. Sie haben auch keinen Zugriff auf das new.target-Schlüsselwort.
• Pfeilfunktionen können innerhalb ihres Körpers nicht yield verwenden und können nicht als Generatorfunktionen erstellt werden.

const materials = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

console.log(materials.map((material) => material.length));
// Expected output: Array [8, 6, 7, 9]

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
}

Rest-Parameter, Standardparameter und Destrukturierung innerhalb der Parameter werden unterstützt und erfordern immer Klammern:

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

Pfeilfunktionen können async sein, indem der Ausdruck mit dem async-Schlüsselwort versehen wird.

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

Lassen Sie uns eine traditionelle anonyme Funktion Schritt für Schritt bis zur einfachsten Pfeilfunktion zerlegen. Jeder Zwischenschritt ist eine gültige Pfeilfunktion.

Hinweis: Traditionelle Funktionsausdrücke und Pfeilfunktionen unterscheiden sich nicht nur in ihrer Syntax. Wir werden ihre Verhaltensunterschiede in den folgenden Abschnitten ausführlicher vorstellen.

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body brace
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

Im obigen Beispiel können sowohl die Klammern um den Parameter als auch die geschweiften Klammern um den Funktionskörper weggelassen werden. Sie können jedoch nur unter bestimmten Bedingungen weggelassen werden.

Die Klammern können nur weggelassen werden, wenn die Funktion einen einzelnen einfachen Parameter hat. Wenn sie mehrere Parameter, keine Parameter oder Standard-, destrukturierte oder Rest-Parameter hat, sind die Klammern um die Parameterliste erforderlich.

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no parameters)
() => a + b + 100;

Die geschweiften Klammern können nur weggelassen werden, wenn die Funktion direkt einen Ausdruck zurückgibt. Wenn der Körper Anweisungen enthält, sind die geschweiften Klammern erforderlich – ebenso wie das return-Schlüsselwort. Pfeilfunktionen können nicht raten, was oder wann Sie etwas zurückgeben möchten.

// Traditional anonymous function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

Pfeilfunktionen sind nicht von Natur aus mit einem Namen verbunden. Wenn die Pfeilfunktion sich selbst aufrufen muss, verwenden Sie stattdessen einen benannten Funktionsausdruck. Sie können die Pfeilfunktion auch einer Variablen zuweisen, sodass Sie über diese Variable auf sie verweisen können.

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

Pfeilfunktionen können entweder einen Ausdruckskörper oder den üblichen Blockkörper haben.

In einem Ausdruckskörper wird nur ein einziger Ausdruck spezifiziert, der zum impliziten Rückgabewert wird. In einem Blockkörper müssen Sie eine explizite return-Anweisung verwenden.

const func = (x) => x * x;
// expression body syntax, implied "return"

const func2 = (x, y) => {
  return x + y;
};
// with block body, explicit "return" needed

Die Verwendung von Objektliteralen mit der Ausdruckskörpersyntax (params) => { object: literal } funktioniert nicht wie erwartet.

const func = () => { foo: 1 };
// Calling func() returns undefined!

const func2 = () => { foo: function () {} };
// SyntaxError: function statement requires a name

const func3 = () => { foo() {} };
// SyntaxError: Unexpected token '{'

Dies liegt daran, dass JavaScript nur dann den Pfeilfunktionsausdruck als einen mit Ausdruckskörpern ansieht, wenn das Token, das dem Pfeil folgt, kein linkes geschweiftes Klammerzeichen ist. Der Code innerhalb der Klammern ({}) wird als eine Sequenz von Anweisungen interpretiert, wobei foo ein Label und kein Schlüssel eines Objektliterals ist.

Um dies zu beheben, umschließen Sie das Objektliteral in Klammern:

const func = () => ({ foo: 1 });

Pfeilfunktionsausdrücke sollten nur für Nicht-Methoden-Funktionen verwendet werden, da sie kein eigenes this haben. Lassen Sie uns sehen, was passiert, wenn wir versuchen, sie als Methoden zu verwenden:

"use strict";

const obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c() {
    console.log(this.i, this);
  },
};

obj.b(); // logs undefined, Window { /* … */ } (or the global object)
obj.c(); // logs 10, Object { /* … */ }

Ein weiteres Beispiel mit Object.defineProperty():

"use strict";

const obj = {
  a: 10,
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (or the global object)
    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
  },
});

Da der Körper einer Klasse einen this-Kontext hat, schließen Pfeilfunktionen als Klassenfelder über den this-Kontext der Klasse ab, und das this im Körper der Pfeilfunktion wird korrekt auf die Instanz (oder die Klasse selbst, für statische Felder) verweisen. Da es sich jedoch um eine Closure handelt und nicht um die eigene Bindung der Funktion, ändert sich der Wert von this nicht basierend auf dem Ausführungskontext.

class C {
  a = 1;
  autoBoundMethod = () => {
    console.log(this.a);
  };
}

const c = new C();
c.autoBoundMethod(); // 1
const { autoBoundMethod } = c;
autoBoundMethod(); // 1
// If it were a normal method, it should be undefined in this case

Pfeilfunktions-Eigenschaften werden oft als "automatisch gebundene Methoden" bezeichnet, weil das Äquivalent mit normalen Methoden folgendes ist:

class C {
  a = 1;
  constructor() {
    this.method = this.method.bind(this);
  }
  method() {
    console.log(this.a);
  }
}

Hinweis: Klassenfelder werden auf der Instanz und nicht auf dem Prototyp definiert. Daher würde jede Instanzerstellung eine neue Funktionsreferenz erstellen und eine neue Closure allozieren, was potenziell zu einem höheren Speicherverbrauch führen könnte als bei einer normalen ungebundenen Methode.

Aus ähnlichen Gründen sind die Methoden call(), apply() und bind() nicht nützlich, wenn sie auf Pfeilfunktionen aufgerufen werden, da Pfeilfunktionen this basierend auf dem Bereich, in dem die Pfeilfunktion definiert ist, festlegen und sich der this-Wert nicht ändert, basierend darauf, wie die Funktion aufgerufen wird.

Pfeilfunktionen haben kein eigenes arguments-Objekt. Daher ist in diesem Beispiel arguments eine Referenz auf die Argumente des umgebenden Bereichs:

function foo(n) {
  const f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
  return f();
}

foo(3); // 3 + 3 = 6

In den meisten Fällen ist die Verwendung von Rest-Parametern eine gute Alternative zur Verwendung eines arguments-Objekts.

function foo(n) {
  const f = (...args) => args[0] + n;
  return f(10);
}

foo(1); // 11

Pfeilfunktionen können nicht als Konstruktoren verwendet werden und führen zu einem Fehler, wenn sie mit new aufgerufen werden. Sie haben auch keine prototype-Eigenschaft.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

Das yield-Schlüsselwort kann nicht im Körper einer Pfeilfunktion verwendet werden (außer wenn innerhalb der Pfeilfunktion weiter verschachtelte Generatorfunktionen verwendet werden). Infolgedessen können Pfeilfunktionen nicht als Generatoren verwendet werden.

Eine Pfeilfunktion kann keinen Zeilenumbruch zwischen ihren Parametern und ihrem Pfeil enthalten.

const func = (a, b, c)
  => 1;
// SyntaxError: Unexpected token '=>'

Aus Formatierungsgründen können Sie den Zeilenumbruch hinter dem Pfeil setzen oder Klammern/Konstrukte um den Funktionskörper verwenden, wie unten gezeigt. Sie können auch Zeilenumbrüche zwischen Parametern einfügen.

const func = (a, b, c) =>
  1;

const func2 = (a, b, c) => (
  1
);

const func3 = (a, b, c) => {
  return 1;
};

const func4 = (
  a,
  b,
  c,
) => 1;

Obwohl der Pfeil in einer Pfeilfunktion kein Operator ist, haben Pfeilfunktionen spezielle Parserregeln, die sich im Vergleich zu regulären Funktionen anders in Bezug auf die Operatorvorrang verhalten.

let callback;

callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments

Da => eine niedrigere Priorität als die meisten Operatoren hat, sind Klammern erforderlich, um zu verhindern, dass callback || () als die Argumentenliste der Pfeilfunktion geparst wird.

callback = callback || (() => {});

// An empty arrow function returns undefined
const empty = () => {};

(() => "foobar")();
// Returns "foobar"
// (this is an Immediately Invoked Function Expression)

const simple = (a) => (a > 15 ? 15 : a);
simple(16); // 15
simple(10); // 10

const max = (a, b) => (a > b ? a : b);

// Easy array filtering, mapping, etc.
const arr = [5, 6, 13, 0, 1, 18, 23];

const sum = arr.reduce((a, b) => a + b);
// 66

const even = arr.filter((v) => v % 2 === 0);
// [6, 0, 18]

const double = arr.map((v) => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// More concise promise chains
promise
  .then((a) => {
    // …
  })
  .then((b) => {
    // …
  });

// Arrow functions without parameters
setTimeout(() => {
  console.log("I happen sooner");
  setTimeout(() => {
    // deeper code
    console.log("I happen later");
  }, 1);
}, 1);

Die Methoden call(), apply() und bind() funktionieren wie erwartet mit traditionellen Funktionen, da wir den Gültigkeitsbereich für jede der Methoden festlegen:

const obj = {
  num: 100,
};

// Setting "num" on globalThis to show how it is NOT used.
globalThis.num = 42;

// A traditional function to operate on "this"
function add(a, b, c) {
  return this.num + a + b + c;
}

console.log(add.call(obj, 1, 2, 3)); // 106
console.log(add.apply(obj, [1, 2, 3])); // 106
const boundAdd = add.bind(obj);
console.log(boundAdd(1, 2, 3)); // 106

Bei Pfeilfunktionen, da unsere add-Funktion im Wesentlichen im Gültigkeitsbereich von globalThis (global) erstellt wurde, wird sie davon ausgehen, dass this globalThis ist.

const obj = {
  num: 100,
};

// Setting "num" on globalThis to show how it gets picked up.
globalThis.num = 42;

// Arrow function
const add = (a, b, c) => this.num + a + b + c;

console.log(add.call(obj, 1, 2, 3)); // 48
console.log(add.apply(obj, [1, 2, 3])); // 48
const boundAdd = add.bind(obj);
console.log(boundAdd(1, 2, 3)); // 48

Vielleicht der größte Vorteil der Verwendung von Pfeilfunktionen liegt bei Methoden wie setTimeout() und EventTarget.prototype.addEventListener(), die normalerweise eine Art Closure, call(), apply() oder bind() erfordern, um sicherzustellen, dass die Funktion im richtigen Gültigkeitsbereich ausgeführt wird.

Mit traditionellen Funktionsausdrücken funktioniert solcher Code nicht wie erwartet:

const obj = {
  count: 10,
  doSomethingLater() {
    setTimeout(function () {
      // the function executes on the window scope
      this.count++;
      console.log(this.count);
    }, 300);
  },
};

obj.doSomethingLater(); // logs "NaN", because the property "count" is not in the window scope.

Mit Pfeilfunktionen bleibt der this-Gültigkeitsbereich leichter erhalten:

const obj = {
  count: 10,
  doSomethingLater() {
    // The method syntax binds "this" to the "obj" context.
    setTimeout(() => {
      // Since the arrow function doesn't have its own binding and
      // setTimeout (as a function call) doesn't create a binding
      // itself, the "obj" context of the outer method is used.
      this.count++;
      console.log(this.count);
    }, 300);
  },
};

obj.doSomethingLater(); // logs 11

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4