Was ist die Bedeutung von "=>" (ein Pfeil, gebildet aus Gleichheitszeichen & größer als) in JavaScript?

Question

Ich weiß, dass der >= Operator mehr als oder gleich bedeutet, aber ich habe => in einigen Quellcodes gesehen. Was bedeutet dieser Operator?

Hier ist der Code:

promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
    if (!aDialogAccepted)
        return;

    saveAsType = fpParams.saveAsType;
    file = fpParams.file;

    continueSave();
}).then(null, Components.utils.reportError);

Answer 1

Wie bereits von anderen erwähnt, handelt es sich um eine neue Syntax zum Erstellen von Funktionen.

Allerdings unterscheiden sich diese Art von Funktionen von normalen:

• Sie binden den Wert von this. Wie von der Spezifikation erklärt,

  Eine Pfeilfunktion definiert keine lokalen Bindungen für arguments, super, this oder new.target. Jede Referenz auf arguments, super, this oder new.target innerhalb einer Pfeilfunktion muss zu einer Bindung in einem lexikalisch umgebenden Umfeld auflösen. Typischerweise wird dies das Funktionsumfeld einer unmittelbar umgebenden Funktion sein.

  Auch wenn eine Pfeilfunktion Referenzen auf super enthalten kann, wird das in Schritt 4 erstellte Funktionsobjekt nicht durch Ausführen von MakeMethod in eine Methode umgewandelt. Eine Pfeilfunktion, die auf super verweist, ist immer in einer Nicht-Pfeilfunktion enthalten und der notwendige Zustand zur Implementierung von super ist über den vom Funktionsobjekt der Pfeilfunktion erfassten Bereich zugänglich.

• Sie sind keine Konstruktoren.

  Das bedeutet, dass sie keine interne Methode [[Construct]] haben und somit nicht instanziiert werden können, z.B.

  var f = a => a;
  f(123);  // 123
  new f(); // TypeError: f is not a constructor

Answer 2

Unzufrieden mit den anderen Antworten. Die am meisten bewertete Antwort vom 13.03.2019 ist faktisch falsch.

Die kurze knappe Version von dem, was => bedeutet, ist, dass es eine Abkürzung für das Schreiben einer Funktion UND für das Binden an das aktuelle this ist

const foo = a => a * 2;

ist effektiv eine Abkürzung für

const foo = function(a) { return a * 2; }.bind(this);

Sie können sehen, dass alle Dinge verkürzt wurden. Wir brauchten weder function, noch return, noch .bind(this), noch Klammern oder Klammern

Ein etwas längeres Beispiel für eine Pfeilfunktion könnte sein

const foo = (width, height) => {
  const area = width * height;
  return area;
};

Das zeigt, dass wenn wir mehrere Argumente für die Funktion möchten, wir Klammern brauchen und wenn wir mehr als einen einzigen Ausdruck schreiben möchten, brauchen wir Klammern und ein explizites return.

Es ist wichtig, den .bind Teil zu verstehen, und es ist ein großes Thema. Es hat damit zu tun, was this in JavaScript bedeutet.

ALLE Funktionen haben einen impliziten Parameter namens this. Wie this gesetzt wird, wenn eine Funktion aufgerufen wird, hängt davon ab, wie diese Funktion aufgerufen wird.

Nehmen Sie

function foo() { console.log(this); }

Wenn Sie es normal aufrufen

function foo() { console.log(this); }
foo();

wird this das globale Objekt sein.

Wenn Sie im Strict-Modus sind

`use strict`;
function foo() { console.log(this); }
foo();

// oder

function foo() {
   `use strict`;
   console.log(this);
 }
foo();

wird es undefined sein

Sie können this direkt mit call oder apply setzen

function foo(msg) { console.log(msg, this); }

const obj1 = {abc: 123}
const obj2 = {def: 456}

foo.call(obj1, 'hello');  // gibt Hallo {abc: 123} aus
foo.apply(obj2, ['hi']);  // gibt Hi {def: 456} aus

Sie können this auch implizit mit dem Punktoperator . setzen

function foo(msg) { console.log(msg, this); }
const obj = {
   abc: 123,
   bar: foo,
}
obj.bar('Hola');  // gibt Hola {abc:123, bar: f} aus

Ein Problem entsteht, wenn Sie eine Funktion als Callback oder Listener verwenden möchten. Sie erstellen eine Klasse und möchten eine Funktion als Callback zuweisen, die auf eine Instanz der Klasse zugreift.

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click', function() {
       console.log(this.name);  // funktioniert nicht
    }); 
  }
}

Der obige Code funktioniert nicht, weil wenn das Element das Ereignis auslöst und die Funktion aufruft, der Wert von this nicht die Instanz der Klasse sein wird.

Ein üblicher Weg, dieses Problem zu lösen, ist die Verwendung von .bind

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click', function() {
       console.log(this.name); 
    }.bind(this); // <=========== HINZUGEFÜGT! ===========
  }
}

Weil die Pfeil-Syntax dasselbe macht, können wir schreiben

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click',() => {
       console.log(this.name); 
    });
  }
}

bind macht effektiv eine neue Funktion. Wenn bind nicht existieren würde, könnten Sie im Grunde genommen Ihre eigene wie folgt machen

function bind(functionToBind, valueToUseForThis) {
  return function(...args) {
    functionToBind.call(valueToUseForThis, ...args);
  };
}

In älterem JavaScript ohne den Spread-Operator würde es

function bind(functionToBind, valueToUseForThis) {
  return function() {
    functionToBind.apply(valueToUseForThis, arguments);
  };
}

Das Verständnis dieses Codes erfordert ein Verständnis von Schließungen, aber die Kurzversion ist, dass bind eine neue Funktion erstellt, die die ursprüngliche Funktion immer mit dem this-Wert aufruft, der daran gebunden wurde. Pfeilfunktionen tun dasselbe, da sie eine Abkürzung für bind(this) sind

Answer 3

Ich habe gelesen, das ist ein Symbol von Pfeilfunktionen in ES6

this

var a2 = a.map(function(s){ return s.length });

mit Pfeilfunktion kann man schreiben als

var a3 = a.map( s => s.length );

MDN Docs

Answer 4

Pfeilfunktionen, die durch das Symbol (=>) gekennzeichnet sind, helfen Ihnen, anonyme Funktionen und Methoden zu erstellen. Dadurch wird die Syntax kürzer. Zum Beispiel unten eine einfache „Add“-Funktion, die die Addition von zwei Zahlen zurückgibt.

Funktion Add(num1, num2){
return num1 + num2;
}

Die obige Funktion wird kürzer, indem die „Pfeil“-Syntax wie unten gezeigt verwendet wird.

Der obige Code hat zwei Teile wie im obigen Diagramm dargestellt: -

Eingabe:— Dieser Abschnitt gibt die Eingabeparameter für die anonyme Funktion an.

Logik:— Dieser Abschnitt kommt nach dem Symbol „=>“. Dieser Abschnitt enthält die Logik der tatsächlichen Funktion.

Viele Entwickler denken, dass Pfeilfunktionen Ihre Syntax kürzer, simpler und damit lesbarer machen.

Wenn Sie oben genannten Satz glauben, dann lassen Sie mich Ihnen versichern, dass es ein Mythos ist. Wenn Sie für einen Moment darüber nachdenken, ist eine ordnungsgemäß geschriebene Funktion mit einem Namen viel lesbarer als kryptische Funktionen, die in einer Zeile mit einem Pfeilsymbol erstellt werden.

Der Hauptzweck der Pfeilfunktion besteht darin, sicherzustellen, dass der Code im Kontext des Aufrufers ausgeführt wird.

Sehen Sie sich den untenstehenden Code an, in dem eine globale Variable "Kontext" definiert ist, auf die innerhalb einer Funktion "SomeOtherMethod" zugegriffen wird, die aus der anderen Methode "SomeMethod" aufgerufen wird.

"SomeMethod" hat eine lokale "Kontext"-Variable. Jetzt erwarten wir, dass, wenn "SomeOtherMethod" aus "SomeMethod" aufgerufen wird, "lokaler Kontext" angezeigt wird, aber „globaler Kontext“ wird angezeigt.

var context = “global context”;

function SomeOtherMethod(){
alert(this.context);
}

function SomeMethod(){
this.context = “local context”;
SomeOtherMethod();
}

var instance = new SomeMethod();

Aber wenn der Aufruf durch Verwendung einer Pfeilfunktion ersetzt wird, wird "lokaler Kontext" angezeigt.

var context = "global context";

    function SomeMethod(){
        this.context = "local context";
        SomeOtherMethod = () => {
            alert(this.context);
        }
        SomeOtherMethod();
    }
    var instance = new SomeMethod();

Ich würde Sie ermutigen, diesen Link zu lesen (Pfeilfunktion in JavaScript), der alle Szenarien des JavaScript-Kontexts erläutert und in welchen Szenarien der Kontext des Aufrufers nicht respektiert wird.

Sie können auch die Demonstration der Pfeilfunktion mit JavaScript in diesem von mir erstellten YouTube-Video sehen, das praktisch den Begriff „Kontext“ erklärt.

Answer 5

Hinzufügen eines einfachen CRUD-Beispiels mit Arrowfunktion

 //Pfeilfunktion
 var customers   = [
   {
     name: 'Dave',
     contact:'9192631770'
   },
   {
     name: 'Sarah',
     contact:'9192631770'
   },
   {
     name: 'Akhil',
     contact:'9928462656' 
   }],

// READ ohne Parameter
 getFirstCustomer = () => { 
   console.log(this);
   return customers[0];
 };
  console.log("Erster Kunde "+JSON.stringify(getFirstCustomer())); // 'Dave' 

   //1 Param SEARCH
  getNthCustomer = index=>{
    if( index>customers.length)
    {
     return  "Kein solches Element";
   }
   else{
       return customers[index];
     } 
  };
  console.log("N-ter Kunde ist " +JSON.stringify(getNthCustomer(1))); 

   //2 Parameter ADD
  addCustomer = (name, contact)=> customers.push({
     'name': name,
     'contact':contact
    });
  addCustomer('Hitesh','8888813275');
  console.log("Kunde hinzugefügt "+JSON.stringify(customers)); 

  //2 Parameter UPDATE
  updateCustomerName = (index, newName)=>{customers[index].name= newName};
  updateCustomerName(customers.length-1,"HiteshSahu");
  console.log("Kunde aktualisiert "+JSON.stringify(customers));

  //1 Parameter DELETE
  removeCustomer = (customerToRemove) => customers.pop(customerToRemove);
  removeCustomer(getFirstCustomer());
  console.log("Kunde entfernt "+JSON.stringify(customers));