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

In JavaScript gibt es zwei Möglichkeiten, Funktionen zu erstellen:

1. Funktionserklärung:

   function fn(){
     console.log("Hello");
   }
   fn();

   Dies ist sehr einfach, selbsterklärend, wird in vielen Sprachen verwendet und ist Standard in der C-Sprachfamilie. Wir deklarieren eine Funktion, definieren sie und führen sie aus, indem wir sie aufrufen.

   Was Sie wissen sollten, ist, dass Funktionen in JavaScript eigentlich Objekte sind; intern haben wir ein Objekt für die obige Funktion erstellt und ihm einen Namen namens fn gegeben, oder der Verweis auf das Objekt ist in fn gespeichert. Funktionen sind Objekte in JavaScript; eine Instanz einer Funktion ist eigentlich eine Objektinstanz.

2. Funktionsausdruck:

   var fn=function(){
     console.log("Hello");
   }
   fn();

   JavaScript verfügt über Funktionen erster Klasse, d. h. Sie können eine Funktion erstellen und sie einer Variablen zuweisen, genauso wie Sie eine Zeichenkette oder eine Zahl erstellen und sie einer Variablen zuweisen. Hier wird die Variable fn einer Funktion zugewiesen. Der Grund für dieses Konzept ist, dass Funktionen in JavaScript Objekte sind; fn verweist auf die Objektinstanz der obigen Funktion. Wir haben eine Funktion initialisiert und sie einer Variablen zugewiesen. Es geht nicht darum, die Funktion auszuführen und das Ergebnis zuzuweisen.

Referenz: Syntax der JavaScript-Funktionsdeklaration: var fn = function() {} vs function fn() {}

Answer 2

In Anbetracht des Arguments "benannte Funktionen tauchen in Stacktraces auf" sind moderne JavaScript-Engines tatsächlich in der Lage, anonyme Funktionen darzustellen.

Zum jetzigen Zeitpunkt verweisen V8, SpiderMonkey, Chakra und Nitro auf benannte Funktionen immer mit ihrem Namen. Auf eine anonyme Funktion wird fast immer mit ihrem Bezeichner verwiesen, wenn sie einen hat.

SpiderMonkey kann den Namen einer anonymen Funktion herausfinden, die von einer anderen Funktion zurückgegeben wird. Der Rest kann das nicht.

Wenn Sie wirklich wollten, dass Ihre Iterator- und Erfolgsrückrufe in der Ablaufverfolgung angezeigt werden, könnten Sie diese auch benennen...

[].forEach(function iterator() {});

Aber im Großen und Ganzen ist es nicht wert, sich darüber aufzuregen.

Gurtzeug ( Fiddle )

'use strict';

var a = function () {
    throw new Error();
},
    b = function b() {
        throw new Error();
    },
    c = function d() {
        throw new Error();
    },
    e = {
        f: a,
        g: b,
        h: c,
        i: function () {
            throw new Error();
        },
        j: function j() {
            throw new Error();
        },
        k: function l() {
            throw new Error();
        }
    },
    m = (function () {
        return function () {
            throw new Error();
        };
    }()),
    n = (function () {
        return function n() {
            throw new Error();
        };
    }()),
    o = (function () {
        return function p() {
            throw new Error();
        };
    }());

console.log([a, b, c].concat(Object.keys(e).reduce(function (values, key) {
    return values.concat(e[key]);
}, [])).concat([m, n, o]).reduce(function (logs, func) {

    try {
        func();
    } catch (error) {
        return logs.concat('func.name: ' + func.name + '\n' +
                           'Trace:\n' +
                           error.stack);
        // Need to manually log the error object in Nitro.
    }

}, []).join('\n\n'));

V8

func.name: 
Trace:
Error
    at a (http://localhost:8000/test.js:4:11)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: b
Trace:
Error
    at b (http://localhost:8000/test.js:7:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: d
Trace:
Error
    at d (http://localhost:8000/test.js:10:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at a (http://localhost:8000/test.js:4:11)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: b
Trace:
Error
    at b (http://localhost:8000/test.js:7:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: d
Trace:
Error
    at d (http://localhost:8000/test.js:10:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at e.i (http://localhost:8000/test.js:17:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: j
Trace:
Error
    at j (http://localhost:8000/test.js:20:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: l
Trace:
Error
    at l (http://localhost:8000/test.js:23:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at http://localhost:8000/test.js:28:19
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: n
Trace:
Error
    at n (http://localhost:8000/test.js:33:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: p
Trace:
Error
    at p (http://localhost:8000/test.js:38:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27 test.js:42

SpiderMonkey

func.name: 
Trace:
a@http://localhost:8000/test.js:4:5
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: b
Trace:
b@http://localhost:8000/test.js:7:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: d
Trace:
d@http://localhost:8000/test.js:10:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: 
Trace:
a@http://localhost:8000/test.js:4:5
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: b
Trace:
b@http://localhost:8000/test.js:7:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: d
Trace:
d@http://localhost:8000/test.js:10:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: 
Trace:
e.i@http://localhost:8000/test.js:17:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: j
Trace:
j@http://localhost:8000/test.js:20:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: l
Trace:
l@http://localhost:8000/test.js:23:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: 
Trace:
m</<@http://localhost:8000/test.js:28:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: n
Trace:
n@http://localhost:8000/test.js:33:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

func.name: p
Trace:
p@http://localhost:8000/test.js:38:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

Chakra

func.name: undefined
Trace:
Error
   at a (http://localhost:8000/test.js:4:5)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at b (http://localhost:8000/test.js:7:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at d (http://localhost:8000/test.js:10:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at a (http://localhost:8000/test.js:4:5)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at b (http://localhost:8000/test.js:7:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at d (http://localhost:8000/test.js:10:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at e.i (http://localhost:8000/test.js:17:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at j (http://localhost:8000/test.js:20:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at l (http://localhost:8000/test.js:23:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at Anonymous function (http://localhost:8000/test.js:28:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at n (http://localhost:8000/test.js:33:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

func.name: undefined
Trace:
Error
   at p (http://localhost:8000/test.js:38:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

Nitro

func.name: 
Trace:
a@http://localhost:8000/test.js:4:22
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: b
Trace:
b@http://localhost:8000/test.js:7:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: d
Trace:
d@http://localhost:8000/test.js:10:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
a@http://localhost:8000/test.js:4:22
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: b
Trace:
b@http://localhost:8000/test.js:7:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: d
Trace:
d@http://localhost:8000/test.js:10:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
i@http://localhost:8000/test.js:17:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: j
Trace:
j@http://localhost:8000/test.js:20:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: l
Trace:
l@http://localhost:8000/test.js:23:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
http://localhost:8000/test.js:28:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: n
Trace:
n@http://localhost:8000/test.js:33:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: p
Trace:
p@http://localhost:8000/test.js:38:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

Answer 3

Beides sind unterschiedliche Arten, eine Funktion zu definieren. Der Unterschied besteht darin, wie der Browser sie interpretiert und in einen Ausführungskontext lädt.

Im ersten Fall handelt es sich um Funktionsausdrücke, die nur dann geladen werden, wenn der Interpreter diese Codezeile erreicht. Wenn Sie also wie im Folgenden vorgehen, erhalten Sie eine Fehlermeldung, dass die functionOne ist keine Funktion .

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

Der Grund dafür ist, dass in der ersten Zeile der FunktionOne kein Wert zugewiesen wird und sie daher undefiniert ist. Wir versuchen, sie als Funktion aufzurufen, und erhalten daher einen Fehler.

In der zweiten Zeile weisen wir die Referenz einer anonymen Funktion an functionOne zu.

Der zweite Fall sind Funktionsdeklarationen, die geladen werden, bevor irgendein Code ausgeführt wird. Wenn Sie also wie im Folgenden vorgehen, erhalten Sie keinen Fehler, da die Deklaration vor der Ausführung des Codes geladen wird.

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

Answer 4

Sie sind ziemlich ähnlich mit einigen kleinen Unterschieden, erstens ist eine Variable, die zu einer anonymen Funktion (Funktionsdeklaration) zugewiesen und zweitens ist der normale Weg, um eine Funktion in JavaScript (Anonyme Funktionsdeklaration) zu erstellen, hat beide Verwendung, Nachteile und Vorteile:

1. Funktion Ausdruck

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

Ein Funktionsausdruck definiert eine Funktion als Teil eines größeren Ausdruckssyntax (typischerweise eine Variablenzuweisung). Funktionen die über Funktionsausdrücke definiert werden, können benannt oder anonym sein. Funktion Ausdrücke dürfen nicht mit "function" beginnen (daher die Klammern um das selbstaufrufende Beispiel unten).

Weisen Sie eine Variable einer Funktion zu, bedeutet kein Hoisting, wie wir wissen, können Funktionen in JavaScript Hoist, bedeutet, dass sie aufgerufen werden können, bevor sie deklariert werden, während Variablen deklariert werden müssen, bevor auf sie zugegriffen wird, so bedeutet in diesem Fall können wir nicht auf die Funktion zugreifen, bevor sie deklariert ist, Auch könnte es ein Weg sein, dass Sie Ihre Funktionen schreiben, für die Funktionen, die eine andere Funktion zurückgeben, könnte diese Art der Deklaration Sinn machen, auch in ECMA6 & oben können Sie dies zu einem Pfeil-Funktion, die verwendet werden können, um anonyme Funktionen aufrufen zuweisen, auch diese Art der Deklaration ist ein besserer Weg, um Konstruktor-Funktionen in JavaScript zu erstellen.

2. Funktionserklärung

function functionTwo() {
    // Some code
}

Eine Funktionsdeklaration definiert eine benannte Funktionsvariable ohne ohne dass eine Variablenzuweisung erforderlich ist. Funktionsdeklarationen treten als eigenständige Konstrukte und können nicht in Nicht-Funktionsblöcken verschachtelt werden. Es ist hilfreich, sie als Geschwister von Variablendeklarationen zu betrachten. Genauso wie Variablendeklarationen mit "var" beginnen müssen, müssen Funktions Deklarationen mit "function" beginnen.

Dies ist die normale Art und Weise des Aufrufs einer Funktion in JavaScript, kann diese Funktion aufgerufen werden, bevor Sie sogar deklarieren, wie in JavaScript alle Funktionen erhalten Hoisted, aber wenn Sie 'use strict' wird dies nicht Hoist wie erwartet, es ist ein guter Weg, um alle normalen Funktionen, die nicht groß sind in Zeilen und weder eine Konstruktor-Funktion aufrufen.

Wenn Sie weitere Informationen darüber benötigen, wie das Hochziehen in JavaScript funktioniert, besuchen Sie den unten stehenden Link:

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Answer 5

Dies sind nur zwei Möglichkeiten, Funktionen zu deklarieren, und bei der zweiten Möglichkeit können Sie die Funktion vor der Deklaration verwenden.