var Funktionsname = function() {} vs function Funktionsname() {}

Question

Ich habe vor kurzem damit begonnen, den JavaScript-Code von jemand anderem zu pflegen. Ich behebe Fehler, füge Funktionen hinzu und versuche, den Code aufzuräumen und konsistenter zu machen.

Der vorherige Entwickler verwendete zwei Arten, Funktionen zu deklarieren, und ich kann nicht herausfinden, ob es einen Grund dafür gibt oder nicht.

Es gibt zwei Möglichkeiten:

var functionOne = function() {
    // Some code
};

function functionTwo() {
    // Some code
}

Was sind die Gründe für die Verwendung dieser beiden unterschiedlichen Methoden und was sind die Vor- und Nachteile der jeweiligen Methode? Gibt es irgendetwas, das mit der einen Methode gemacht werden kann, was mit der anderen nicht möglich ist?

Answer 1

Die erste (Funktion doSomething(x)) sollte Teil einer Objektnotation sein.

Die zweite ( var doSomething = function(x){ alert(x);} ) ist einfach die Erstellung einer anonymen Funktion und deren Zuweisung an eine Variable, doSomething . doSomething() wird also die Funktion aufrufen.

Sie möchten vielleicht wissen, was ein Funktionsdeklaration y Funktionsausdruck ist.

Eine Funktionsdeklaration definiert eine benannte Funktionsvariable, ohne dass eine Variablenzuweisung erforderlich ist. Funktionsdeklarationen treten als eigenständige Konstrukte auf und können nicht in Nicht-Funktionsblöcken verschachtelt werden.

function foo() {
    return 3;
}

ECMA 5 (13.0) definiert die Syntax wie folgt
Funktion Bezeichner ( FormalParameterList _optieren ) { FunctionBody }

Unter der obigen Bedingung ist der Funktionsname in seinem Bereich und im Bereich seiner übergeordneten Funktion sichtbar (sonst wäre er unerreichbar).

Und in einem Funktionsausdruck

Ein Funktionsausdruck definiert eine Funktion als Teil einer größeren Ausdruckssyntax (typischerweise eine Variablenzuweisung). Über Funktionsausdrücke definierte Funktionen können benannt oder anonym sein. Funktionsausdrücke sollten nicht mit "function" beginnen.

// Anonymous function expression
var a = function() {
    return 3;
}

// Named function expression
var a = function foo() {
    return 3;
}

// Self-invoking function expression
(function foo() {
    alert("hello!");
})();

ECMA 5 (13.0) definiert die Syntax wie folgt
Funktion Bezeichner _optieren ( FormalParameterList _optieren ) { FunctionBody }

Answer 2

Ich führe die Unterschiede im Folgenden auf:

1. Eine Funktionsdeklaration kann an einer beliebigen Stelle im Code platziert werden. Selbst wenn sie aufgerufen wird, bevor die Definition im Code erscheint, wird sie ausgeführt, wenn die Funktionsdeklaration in den Speicher übernommen oder sozusagen hochgezogen wird, bevor ein anderer Code auf der Seite mit der Ausführung beginnt.

   Schauen Sie sich die Funktion unten an:

   function outerFunction() {
       function foo() {
          return 1;
       }
       return foo();
       function foo() {
          return 2;
       }
   }
   alert(outerFunction()); // Displays 2

   Denn während der Ausführung sieht es so aus:-

   function foo() {  // The first function declaration is moved to top
       return 1;
   }
   function foo() {  // The second function declaration is moved to top
       return 2;
   }
   function outerFunction() {
       return foo();
   }
   alert(outerFunction()); //So executing from top to bottom,
                           //the last foo() returns 2 which gets displayed

   Wenn ein Funktionsausdruck vor dem Aufruf nicht definiert wird, führt dies zu einem Fehler. Außerdem wird hier die Funktionsdefinition selbst nicht nach oben verschoben oder im Speicher abgelegt wie bei den Funktionsdeklarationen. Aber die Variable, der wir die Funktion zuweisen, wird nach oben geholt und undefiniert zugewiesen wird.

   Dieselbe Funktion mit Funktionsausdrücken:

   function outerFunction() {
       var foo = function() {
          return 1;
       }
       return foo();
       var foo = function() {
          return 2;
       }
   }
   alert(outerFunction()); // Displays 1

   Denn während der Ausführung sieht es so aus:

   function outerFunction() {
      var foo = undefined;
      var foo = undefined;
   
      foo = function() {
         return 1;
      };
      return foo ();
      foo = function() {   // This function expression is not reachable
         return 2;
      };
   }
   alert(outerFunction()); // Displays 1

2. Es ist nicht sicher, Funktionsdeklarationen in Nicht-Funktionsblöcke wie wenn weil sie nicht zugänglich sein werden.

   if (test) {
       function x() { doSomething(); }
   }

3. Benannte Funktionsausdrücke wie der unten stehende funktionieren möglicherweise nicht in Internet Explorer-Browsern vor Version 9.

   var today = function today() {return new Date()}

Answer 3

Über die Leistung:

Neue Versionen von V8 mehrere Optimierungen unter der Haube eingeführt und auch SpiderMonkey .

Es gibt fast keinen Unterschied mehr zwischen Ausdruck und Erklärung.
Ausdruck der Funktion scheint schneller zu sein jetzt.

Chrom 62.0.3202

Feuerfuchs 55

Chrome Canary 63.0.3225

Anonymous Funktionsausdrücke eine bessere Leistung zu haben scheinen gegen Named Funktionsausdruck.

Firefox Chrom-Kanarienvogel Chrom

Answer 4

Wenn Sie diese Funktionen zum Erstellen von Objekten verwenden würden, würden Sie erhalten:

var objectOne = new functionOne();
console.log(objectOne.__proto__); // prints "Object {}" because constructor is an anonymous function

var objectTwo = new functionTwo();
console.log(objectTwo.__proto__); // prints "functionTwo {}" because constructor is a named function

Answer 5

Die erste Funktionssyntax lautet Anonymer Funktionsausdruck :

var functionOne = function() {
  // do something...
};

Die zweite ist Funktionserklärung :

function functionTwo () {
  // do something...
}

Der Hauptunterschied zwischen beiden ist der Funktionsname, da Anonyme Funktionen haben keinen Namen zu nennen.

Benannte Funktionen vs. Anonyme Funktionen

Anonyme Funktionen sind schnell und einfach zu deklarieren, und viele Bibliotheken und Werkzeuge neigen dazu, diese idiomatische Art von Code zu fördern. Anonyme Funktionen haben jedoch einige Nachteile :

• Lesbarkeit: anonyme Funktionen lassen einen Namen weg, was zu weniger lesbarem Code führen kann.

• Fehlersuche: Anonyme Funktionen haben in Stacktraces keinen Namen, was die Fehlersuche erschweren kann.

• Selbstreferenz: was ist, wenn die Funktion auf sich selbst verweisen muss, z. B. für eine Rekursion.

Benennung von Funktionsausdrücken

Die Angabe eines Namens für Ihren Funktionsausdruck behebt alle diese Nachteile und hat keine spürbaren Nachteile. Die beste Praxis ist es, Funktionsausdrücke immer zu benennen:

setTimeout(function timeHandler() { // <-- look, a name here!
  console.log("I've waited 1 second");
}, 1000);

Benennung von IIFEs (Immediate Invoked Function Expression)

(function IIFE(str) { // <-- look, always name IIFEs!
  console.log(str); // "Hello!"
})('Hello!');

Bei Funktionen, die einer Variablen zugewiesen sind, ist die Benennung der Funktion in diesem Fall nicht sehr gebräuchlich und kann zu Verwirrung führen; in diesem Fall ist die Pfeilfunktion möglicherweise die bessere Wahl.