Funktionen

Einführung in Fns:

Grundlegende Bausteine ​​der Sprache.
Die wichtigsten Konzepte.
Fn – Codestück, das immer wieder verwendet werden kann.
{Invoking, Running, Calling} und Fn bedeuten alle dasselbe.
Fn – kann Daten als Argumente verwenden und Daten nach der Berechnung als Ergebnis zurückgeben.
Der Fn-Aufruf wird nach der Ausführung durch das von ihm zurückgegebene Ergebnis ersetzt.
Fns eignen sich perfekt für die Umsetzung des DRY-Prinzips
Argumente werden übergeben, Parameter sind Platzhalter, die an fn übergebene Werte empfangen.

Fn-Deklaration vs. Ausdruck:

Die Fn-Deklaration beginnt mit dem Schlüsselwort fn.
Fn-Ausdrücke sind anonyme Fn, die in einer Variablen gespeichert werden. Dann fungiert die Variable, die die Fn speichert, als Fn.
Der anonyme fn defn ist ein Ausdruck, und der Ausdruck erzeugt einen Wert. Fn sind nur Werte.
Fn sind kein String- oder Zahlentyp. Es ist ein Wert und kann daher in einer Variablen gespeichert werden.
Die Fn-Deklaration kann bereits aufgerufen werden, bevor sie im Code definiert, d. h. hochgezogen, wird. Dies funktioniert nicht mit dem Fn-Ausdruck.
Der Fn-Ausdruck zwingt den Benutzer, zuerst Fns zu definieren und sie dann später zu verwenden. Alles wird in Variablen gespeichert.
Beide haben ihren Platz in JS und müssen daher richtig beherrscht werden.
Fn-Ausdruck = im Wesentlichen ein in einer Variablen gespeicherter Fn-Wert

Arrow Fn wurde mit ES6 geliefert

Implizite Rückgabe für Einzeiler, für mehrere Zeilen ist eine explizite Rückgabe erforderlich.
Pfeil-FNS erhalten kein eigenes Schlüsselwort „dieses“
Lernen ist kein linearer Prozess, Wissen baut sich schrittweise auf. Man kann nicht alles auf einmal über eine Sache lernen.

## Default parameters
const bookings = [];

const createBooking = function(flightNum, numPassengers=1, price= 100 * numPassengers){
  // It will work for parameters defined before in the list like numPassengers is defined before its used in expression of next argument else it won't work.
  // Arguments cannot be skipped also with this method. If you want to skip an argument, then manually pass undefined value for it which is equivalent to skipping an argument
  /* Setting default values pre-ES6 days.
  numPassengers = numPassengers || 1;
  price = price || 199;*/

// Using enhanced object literal, where if same property name & value is there, just write them once as shown below.
  const booking = {
    flightNum,
    numPassengers,
    price,
  };

  console.log(booking);
  bookings.push(booking);
}

createBooking('AI123');
/*
{
  flightNum: 'AI123',
  numPassengers: 1,
  price: 100
}
*/ 

createBooking('IN523',7);
/*
{
  flightNum: 'IN523',
  numPassengers: 7,
  price: 700
}
*/ 

createBooking('SJ523',5);
/*
{
  flightNum: 'SJ523',
  numPassengers: 5,
  price: 500
} 
*/ 

createBooking('AA523',undefined, 100000);
/*
{
  flightNum: 'AA523',
  numPassengers: 1,
  price: 100000
}
*/ 

Aufrufen einer Fn aus einer anderen Fn heraus:

Sehr verbreitete Technik zur Unterstützung des DRY-Prinzips.
Unterstützt die Wartbarkeit
return beendet sofort den fn
return = um einen Wert aus dem fn auszugeben, beenden Sie die Ausführung
Drei Arten, fn zu schreiben, aber alle funktionieren auf ähnliche Weise, d. h. Eingabe, Berechnung, Ausgabe
Parameter = Platzhalter zum Empfangen von I/P-Werten, wie lokale Variablen eines Fn.

Wie die Übergabe von Argumenten funktioniert, d. h. Wert vs. Referenztypen

Primitive werden als Wert an fn übergeben. Der ursprüngliche Wert bleibt erhalten.
Objekte werden als Referenz an fn übergeben. Der ursprüngliche Wert wird geändert.
JS hat keinen Übergabewert als Referenz.

Die Interaktion verschiedener FNS mit demselben Objekt kann manchmal zu Problemen führen

Fns sind in JS erstklassig, daher können wir HO-Fns schreiben.

Fns werden als Werte behandelt, einfach als ein weiterer „Typ“ von Objekten.
Da Objekte Werte sind, sind FNS auch Werte. Kann daher auch in Variablen gespeichert, als Objekteigenschaften usw. angehängt werden.
Außerdem können FNS auch an andere FNS weitergegeben werden. Ex. Ereignis-Listener-Handler.
Rückkehr von FNS.
Fns sind Objekte, und Objekte haben in JS ihre eigenen Methodeneigenschaften. Daher kann fn sowohl Methoden als auch Eigenschaften haben, die für sie aufgerufen werden können. Ex-Anruf, Bewerben, Binden etc.

Fn höherer Ordnung: Fn, das ein anderes Fn als Argument empfängt, das ein neues Fn oder beides zurückgibt. Nur möglich, weil FNS in JS erstklassig sind
Fn, das im Rückruf-Fn übergeben wird, der von HOF aufgerufen wird.

Fns, die eine andere Fn zurückgeben, z. B. in Abschlüssen.

Erstklassige FNS und HOF sind unterschiedliche Konzepte.

Callback Fns Adv:
Erlauben Sie uns, Abstraktionen zu schaffen. Erleichtert die Betrachtung größerer Probleme.
Modularisieren Sie den Code in kleinere Teile, die er wiederverwendet werden kann.

// Example for CB & HOF:
// CB1
const oneWord = function(str){
  return str.replace(/ /g,'').toLowerCase();
};

// CB2
const upperFirstWord = function(str){
    const [first, ...others] = str.split(' ');
    return [first.toUpperCase(), ...others].join(' ');
};

// HOF
const transformer = function(str, fn){
  console.log(`Original string: ${str}`);
  console.log(`Transformed string: ${fn(str)}`);
  console.log(`Transformed by: ${fn.name}`);
};
transformer('JS is best', upperFirstWord);
transformer('JS is best', oneWord);

// JS uses callbacks all the time.
const hi5 = function(){
  console.log("Hi");
};
document.body.addEventListener('click', hi5);

// forEach will be exectued for each value in the array.
['Alpha','Beta','Gamma','Delta','Eeta'].forEach(hi5);

Fns geben eine weitere Fn zurück.

// A fn returning another fn.
const greet = function(greeting){
  return function(name){
    console.log(`${greeting} ${name}`);
  }
}

const userGreet = greet('Hey');
userGreet("Alice");
userGreet("Lola");

// Another way to call
greet('Hello')("Lynda");

// Closures are widely used in Fnal programming paradigm.

// Same work using Arrow Fns. Below is one arrow fn returning another arrow fn.
const greetArr = greeting => name => console.log(`${greeting} ${name}`);

greetArr('Hola')('Roger');

„Sie werden nur dann Fortschritte machen, wenn Sie ein bestimmtes Thema gründlich verstanden haben“

call(), apply(), bind():

Wird verwendet, um das Schlüsselwort „dieses“ festzulegen, indem sein Wert explizit festgelegt wird.
call – akzeptiert eine Liste von Argumenten nach dem Wert des Schlüsselworts „this“.
apply – akzeptiert ein Array von Argumenten nach dem Wert des Schlüsselworts „this“. Es werden Elemente aus diesem Array übernommen und an Funktionen übergeben.

bind(): Diese Methode erstellt eine neue Funktion, bei der das Schlüsselwort this an das angegebene Objekt gebunden ist. Die neue Funktion behält den durch .bind() festgelegten Kontext bei, unabhängig davon, wie die Funktion aufgerufen wird.

call() und apply(): Diese Methoden rufen eine Funktion mit einem angegebenen Wert und Argumenten auf. Der Unterschied zwischen ihnen besteht darin, dass .call() Argumente als Liste akzeptiert, während .apply() Argumente als Array akzeptiert.

const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name){
    console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    this.bookings.push({flight: `${this.iataCode} ${flightNum}`, name});
  },
};

lufthansa.book(4324,'James Bond');
lufthansa.book(5342,'Julie Bond');
lufthansa;


const eurowings = {
  airline: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};

// Now for the second flight eurowings, we want to use book method, but we shouldn't repeat the code written inside lufthansa object.

// "this" depends on how fn is actually called.
// In a regular fn call, this keyword points to undefined.
// book stores the copy of book method defuned inside the lufthansa object.
const book = lufthansa.book;

// Doesn't work
// book(23, 'Sara Williams');

// first argument is whatever we want 'this' object to point to.
// We invoked the .call() which inturn invoked the book method with 'this' set to eurowings 
// after the first argument, all following arguments are for fn.
book.call(eurowings, 23, 'Sara Williams');
eurowings;

book.call(lufthansa, 735, 'Peter Parker');
lufthansa;

const swiss = {
  airline: 'Swiss Airlines',
  iataCode: 'LX',
  bookings: []
}

// call()
book.call(swiss, 252, 'Joney James');

// apply()
const flightData = [652, 'Mona Lisa'];
book.apply(swiss, flightData);

// Below call() syntax is equivalent to above .apply() syntax. It spreads out the arguments from the array.
book.call(swiss, ...flightData);

Das obige ist der detaillierte Inhalt vonFunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!