Codebeispiele, die die Unterschiede und die Verwendung gewöhnlicher Funktionen und Pfeilfunktionen in JavaScript ausführlich erläutern

Dieser Artikel stellt hauptsächlich den Unterschied und die Verwendung gewöhnlicher Funktionen und Pfeilfunktionen in JavaScript vor. Er ist sehr gut und hat Referenzwert.

Mir wurde kürzlich eine Frage gestellt:

Was ist der Unterschied zwischen der Pfeilfunktion ( => ) und der gewöhnlichen Funktion ( function ) in JavaScript?

Was ich damals dachte war: Diese Frage ist sehr einfach~ (Flagge), und dann habe ich die falsche Antwort gegeben...

Das in der Pfeilfunktion hat nichts zu tun mit dem Kontext, wenn es aufgerufen wird, und es hängt vom Kontext ab, in dem es definiert wird

Das ist nicht ganz die richtige Antwort... obwohl es auch nicht ganz falsch ist

dies in Pfeilfunktionen

Zunächst einmal gibt es in meiner Antwort keinen falschen Teil: Das in der Pfeilfunktion hat nichts mit dem Kontext zu tun, wenn sie aufgerufen wird

function make () {
  return ()=>{
    console.log(this);
  }
}
const testFunc = make.call({ name:'foo' });
testFunc(); //=> { name:'foo' }
testFunc.call({ name:'bar' }); //=> { name:'foo' }

Wie Sie diesem Beispiel entnehmen können, ist es wahr, dass sich die Pfeilfunktion nach ihrer Definition nicht ändert, egal wie sie aufgerufen wird, dies wird sich nicht ändern

Aber streng genommen hängt dies nicht „vom Definitionskontext ab“, da die Pfeilfunktion ihr eigenes this überhaupt nicht bindet. Wenn sie dies in einer Pfeilfunktion aufruft, sucht sie einfach nach oben entlang der Bereichskette Finden Sie die nächstgelegene und verwenden Sie sie.
In Bezug auf die Wirkung ist dies die gleiche wie bei mir. Es gibt keine große Abweichung vom vorherigen Verständnis, aber ihr Wesen ist völlig anders. Die Pfeilfunktion fügt nicht die Funktion gewöhnlicher Funktionen hinzu dass dies nicht vom aufrufenden Kontext beeinflusst wird, aber viele Funktionen reduziert;

Pfeilfunktionen sind eigentlich einfachere Funktionen

Tatsächlich ist es so Nicht nur das unterscheidet sich von gewöhnlichen Funktionen in Pfeilfunktionen. Zu den gebundenen lokalen Variablen gehören: this, arguments, super(ES6), new .target(ES6)...

Leihen Sie sich ein Beispiel von anderen aus:

function foo() {
  setTimeout( () => {
   console.log("args:", arguments);
  },100);
}
foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]

In gewöhnlichen Funktionen werden verschiedene lokale Variablen automatisch nach oben durchsucht die Bereichskette...

So sind Pfeilfunktionen Eine einfache, reine Sache;

Ich persönlich denke also, dass Pfeilfunktionen besser für die funktionale Programmierung geeignet sindProgrammierung . Pfeilfunktionen sind nicht nur kürzer, sondern auch schwieriger für Variablen zu verwenden, die keinen expliziten Einfluss haben, was zu unerwarteten Berechnungsergebnissen führt den gleichen Effekt wie Pfeilfunktionen?

Wenn Sie einfach darüber nachdenken würden, diesen flüchtigen Kerl so zu reparieren, wie ich es damals getan habe ... wäre das sehr einfach, es gibt einige häufig verwendete Methoden, wie zum Beispiel diese:

oder

function make () {
  var self = this;
  return function () {
    console.log(self);
  }
}

Die zweite Methode kann diese Variable jedoch nur korrigieren. Wie oben erwähnt, werden Variablen wie Argumente in Pfeilfunktionen auch aus der Bereichskette gefunden Um einen ähnlichen Effekt zu erzielen, haben wir nur eine Möglichkeit, eine lokale Variable neu zu definieren, und Babel verwendet diese Methode auch zur Verarbeitung von Pfeilfunktionen.

function make () {
  return function () {
    console.log(this);
  }.bind(this);
}

Also... was ist, wenn ich Argumente in einer Pfeilfunktion verwenden möchte?

function make () {
  return ()=>{
    console.log(this);
    console.log(arguments);
  }
}
//babel it...
function make() {
  var _this = this,
    _arguments = arguments;
  return function () {
    console.log(_this);
    console.log(_arguments);
  };
}

...Ich denke, wenn Sie dieses Bedürfnis haben, ist es möglicherweise angemessener, eine gewöhnliche Funktion zu verwenden...Aber das bedeutet nicht, dass Sie Es können keine Pfeilfunktionen wie

verwendet werden. Alle Parameter werden in Form eines Arrays

erhalten. Wir können den Erweiterungsoperator

verwenden, um Parameter wie diesen zu erhalten:

Vielleicht gibt es Szenarien, in denen dies verwendet werden muss. Es gibt verschiedene Schreibweisen, aber ich denke immer noch, dass Pfeilfunktionen für einfache Situationen besser geeignet sind, die feste Parameter akzeptieren und ein Berechnungsergebnis zurückgeben

Das obige ist der detaillierte Inhalt vonCodebeispiele, die die Unterschiede und die Verwendung gewöhnlicher Funktionen und Pfeilfunktionen in JavaScript ausführlich erläutern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!