Technologieaustausch

Fortgeschrittene JavaScript-Programmierung (vierte Ausgabe) – Aufzeichnungsfunktionen lernen (Teil 1)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Funktion

Jede Funktion ist eine Instanz des Funktionstyps, und die Funktion verfügt wie andere Referenztypen auch über Eigenschaften und Methoden. Funktionen sind Objekte, und der Funktionsname ist ein Zeiger auf das Funktionsobjekt und nicht unbedingt eng an die Funktion selbst gebunden.

Funktionsdeklarative Definition der Funktionsdefinition

  1. function sum (n1,n2){
  2. return n1+n2;
  3. }

Funktionsausdruck der Funktionsdefinition

  1. let sum = function(n1,n2){
  2. return n1+n2;
  3. };

Funktionsdefinition Pfeilfunktion

  1. let sum = (n1,n2)=>{
  2. return n1+n2;
  3. };

Funktionsdefinitionskonstruktor

  1. let sum = new Function("n1","n2","return n1+n2");
  2. /*这个构造函数接收任意多个字符串参数,
  3. 最后一个参数始终会被当成函数体,
  4. 而之前的参数都是新函数的参数*/

Pfeilfunktion

Pfeilfunktionen können überall dort verwendet werden, wo ein Funktionsausdruck verwendet werden kann.

  1. let sum = (a,b)=>{
  2. return a+b;
  3. };
  4. let sum1 = function(a,b){
  5. return a+b;
  6. };
  7. //箭头函数适合嵌入函数的场景
  8. let arr = [1,2,3];
  9. console.log(arr.map(function(i) {return i+1;}));
  10. console.log(arr.map((i)=>{return i+1;}));
  11. //二者结果一样,但是箭头函数更为简洁
  12. //如果只有一个参数,括号可以不用。只有没有参数,或者多个参数的情况下,才使用括号
  13. let double = (x)=>{return 2*x;};
  14. let triple = x => {return 3*x};
  15. //箭头函数也可以不使用大括号,但这样会改变函数的行为。使用大括号就说明包含函数体,可以在一
  16. //个函数中包含多条语句,跟常规函数一样。如果不使用,后面只能有一行代码。
  17. let double = (x)=>{return 2*x;};
  18. let triple = x=>3*x;

Obwohl Pfeilfunktionen eine einfache Syntax haben, gibt es viele Situationen, in denen sie nicht geeignet sind. Pfeilfunktionen können weder die Argumente super noch new.target verwenden und auch nicht als Konstruktoren verwendet werden. Darüber hinaus verfügen Pfeilfunktionen nicht über ein Prototypattribut.

Parameter in Pfeilfunktionen

Die Funktion wird mithilfe der Pfeilsyntax definiert, sodass auf die an die Funktion übergebenen Parameter nicht mit dem Schlüsselwort arguments, sondern nur über die definierten benannten Parameter zugegriffen werden kann.

  1. function foo() {
  2. console.log(arguments[0]);
  3. }
  4. foo(5); // 5
  5. let bar = () => {
  6. console.log(arguments[0]);
  7. };
  8. bar(5); // ReferenceError: arguments is not defined

Funktionsname

Eine Funktion kann mehrere Namen haben.

  1. function sum(num1, num2) {
  2. return num1 + num2;
  3. }
  4. console.log(sum(10, 10)); // 20
  5. let anotherSum = sum;
  6. console.log(anotherSum(10, 10)); // 20
  7. sum = null;
  8. console.log(anotherSum(10, 10)); // 20

Standardparameterwert

Sie können einem Parameter einen Standardwert zuweisen, indem Sie = nach dem Parameter in der Funktionsdefinition verwenden.

  1. function makeKing(name = 'Henry') {
  2. return `King ${name} VIII`;
  3. }
  4. console.log(makeKing('Louis')); // 'King Louis VIII'
  5. console.log(makeKing()); // 'King Henry VIII'

Standardparameterwerte sind nicht auf Grundwerte oder Objekttypen beschränkt, es können auch von der aufrufenden Funktion zurückgegebene Werte verwendet werden

  1. let romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI'];
  2. let ordinality = 0;
  3. function getNumerals() {
  4. // 每次调用后递增
  5. return romanNumerals[ordinality++];
  6. }
  7. function makeKing(name = 'Henry', numerals = getNumerals()) {
  8. return `King ${name} ${numerals}`;
  9. }
  10. console.log(makeKing()); // 'King Henry I'
  11. console.log(makeKing('Louis', 'XVI')); // 'King Louis XVI'
  12. console.log(makeKing()); // 'King Henry II'
  13. console.log(makeKing()); // 'King Henry III'

Parametererweiterung und -sammlung

ES6 fügt einen neuen Erweiterungsoperator hinzu, mit dem Sammlungsdaten sehr präzise bedient und kombiniert werden können. Das nützlichste Szenario für den Spread-Operator ist die Parameterliste in einer Funktionsdefinition, wo er die schwache Typisierung und die Parameter variabler Länge der Sprache voll ausnutzen kann. Der Spread-Operator kann zum Übergeben von Parametern beim Aufruf einer Funktion oder zum Definieren von Funktionsparametern verwendet werden.

Erweiterte Parameter

  1. let values = [1, 2, 3, 4];
  2. function getSum() {
  3. let sum = 0;
  4. for (let i = 0; i < arguments.length; ++i) {
  5. sum += arguments[i];
  6. }
  7. return sum;
  8. }
  9. //不使用扩展操作符实现累加
  10. console.log(getSum.apply(null,values));
  11. //使用扩展操作符
  12. console.log(getSum(...values));

Parameter sammeln

Wenn vor den erfassten Parametern benannte Parameter stehen, werden nur die übrigen Parameter erfasst; andernfalls wird ein leeres Array erhalten. Da das Ergebnis der Parametererfassung variabel ist, kann es nur als letzter Parameter verwendet werden.

  1. function getProduct(...values,lastValue){}//不可以
  2. function ignoreFirst(firstValue,...values){console.log(values)}//可以
  3. ignoreFirst(); // []
  4. ignoreFirst(1); // []
  5. ignoreFirst(1,2); // [2]
  6. ignoreFirst(1,2,3); // [2, 3]

Funktionsdeklaration und Funktionsausdruck

Bevor Code ausgeführt wird, liest die JavaScript-Engine die Funktionsdeklaration und generiert die Funktionsdefinition im Ausführungskontext. Der Funktionsausdruck muss warten, bis der Code in seiner Zeile ausgeführt wird, bevor die Funktionsdefinition im Ausführungskontext generiert wird.
  1. // 没问题
  2. console.log(sum(10, 10));
  3. function sum(num1, num2) {
  4. return num1 + num2;
  5. }
  6. /*函数声明提升*/
  7. // 会出错
  8. console.log(sum(10, 10));
  9. let sum = function(num1, num2) {
  10. return num1 + num2;
  11. };