Deklarieren von Funktionen in JavaScript [duplicate]

Was ist der Unterschied zwischen diesen beiden Möglichkeiten, eine Funktion zu deklarieren?

function someFunc() { ... }

var someFunc = function() { ... }

Ich frage nicht im technischen Sinne. Ich frage nicht, was für die Lesbarkeit besser ist oder welcher Stil bevorzugt wird.

Ich bin da mit den meisten Leuten hier anderer Meinung. Technisch gesehen kann diese Syntax für die Deklaration von Funktionen in beide Richtungen dasselbe bedeuten
(Ich stehe mit meiner letzten Aussage falsch. Ich habe in einem Diff-Beitrag nachgelesen, warum sie technisch unterschiedlich sind, und ich werde am Ende hinzufügen, warum) ; aber die Art und Weise, wie sie eine Rolle in sich entwickelnden Mustern spielen, ist enorm. Ich kann “Javascript: The Good Parts” von Doughlas Crockford sehr empfehlen.

Aber um meinen Standpunkt auf subtile und einfache Weise zu beweisen; hier ist ein kleines beispiel.

//Global function existing to serve everyone
function swearOutLoud(swearWord) {
    alert("You "+ swearWord);           
}
//global functions' territory ends here

//here is mr. spongebob. He is very passionate about his objects; but he's a bit rude.
var spongeBob = {
    name : "squarePants",
    swear : function(swearWord) {
                name = "spongy";
                alert("You "+ swearWord);
                return this;
            }
}

//finally spongebob learns good manners too. EVOLUTION!
spongeBob.apologize = function() {
    alert("Hey " + this.name + ", I'm sorry man!");
    return this;
}


//Ask spongebob to swear and then apologize in one go (CASCADING EFFECT!!)
alert(spongeBob.swear("twit").apologize());

Wenn Sie sich den obigen Code ansehen, habe ich eine Funktion mit dem Namen swearOutLoud deklariert. Welches würde ein Schimpfwort von jedem Objekt oder Anruf nehmen und Ihnen die Ausgabe geben. Es kann Operationen an jedem Objekt ausführen, indem es den ihm übergebenen “this”-Parameter und die Argumente verwendet.

Die zweite Deklaration wird jedoch als Attribut des Objekts namens “spongeBob” deklariert. Dies ist wichtig zu beachten; wie hier bewege ich mich in Richtung eines objektgetriebenen Verhaltens. Während ich auch den “kaskadierenden Effekt” beibehalte, wenn ich “dies” zurückgebe, wenn ich nichts anderes zurückzugeben habe.

Etwas Ähnliches wird in jquery gemacht; und dieses kaskadierende Muster ist wichtig, wenn Sie versuchen, ein Framework oder so etwas zu schreiben. Sie verknüpfen es auch mit dem Builder-Entwurfsmuster.

Aber mit Funktionen, die als Attribute eines Objekts deklariert sind, kann ich ein objektzentriertes Verhalten erreichen, das zu einem besseren Programmierparadigma führt. Es sei denn, es ist gut gestaltet; einzelne außerhalb deklarierte Funktionen mit globalem Zugriff führen zu einer nicht objektorientierten Art der Codierung. Letzteres ist mir irgendwie lieber.

Um zu sehen, wie Kaskadierung wirkt, schauen Sie sich die letzte Aussage an, wo Sie SpongeBob bitten können, sofort zu schwören und sich zu entschuldigen; obwohl entschuldigung später als Attribut hinzugefügt wurde.

Ich hoffe, ich mache meinen Punkt klar. Der Unterschied aus technischer Sicht mag gering sein; aber aus der Perspektive des Designs und der Codeentwicklung ist es riesig und macht einen großen Unterschied.

Aber das bin nur ich! Nimm es oder lass es. 🙂

BEARBEITEN:

Beide Anrufe sind also technisch unterschiedlich; da eine benannte Deklaration an den globalen Namensraum gebunden ist und zur Parsing-Zeit definiert wird. Kann also aufgerufen werden, noch bevor die Funktion deklariert ist.

 //success
 swearOutLoud("Damn");

function swearOutLoud(swearWord) {
    alert("You " + swearWord)
}

Der obige Code wird ordnungsgemäß funktionieren. Aber Code unten wird nicht.

swear("Damn!");
    var swear = function(swearWord) {
    console.log(swearWord);
}

Ein Vorteil der Verwendung function someFunc() { ... } ist, dass der Funktionsname im Firebug-Debugger angezeigt wird. Funktionen, die anders deklariert sind (var someFunc = function() { ... }) kommen als anonym.

Tatsächlich besteht der Unterschied darin, dass die zweite Deklaration uns die Möglichkeit gibt, Funktionen wie diese zu deklarieren, wodurch es möglich wird, eine Funktion als Eigenschaft für ein Objekt zu haben:

var myObject=new Object();
myObject.someFunc=function() { ... }; 

Vom Stil her ist das zweite Beispiel konsistenter mit anderen gängigen Arten, Funktionen zu deklarieren, und daher könnte argumentiert werden, dass es besser lesbar ist

this.someFunc = function() { ... }
...
someFunc: function() { ... },

Wie bereits erwähnt, ist es jedoch anonym und daher taucht der Name beim Profiling nicht auf. Eine andere Möglichkeit, die Funktion zu deklarieren, ist wie folgt, wodurch Sie das Beste aus beiden Welten erhalten

var someFunc = function someFunc() { ... }

Ein weiterer Unterschied besteht darin, dass Sie in den meisten Browsern mit letzterem je nach Umständen unterschiedliche Implementierungen definieren können, mit ersterem nicht. Angenommen, Sie wollten ein browserübergreifendes Ereignisabonnement. Wenn Sie versucht haben, a zu definieren addEventListenerTo funktionieren so:

if (document.addEventListener) {
    function addEventListenerTo(target, event, listener) {
        ....
    }
} else if (document.attachEvent) {
    function addEventListenerTo(target, event, listener) {
        ....
    }
} else {
    function addEventListenerTo(target, event, listener) {
        ....
    }
}

Bei einigen Browsern werden alle Funktionen geparst, wobei die letzte Vorrang hat. Ergebnis: Das obige funktioniert einfach nicht. Das Zuweisen anonymer Funktionen zu Variablen funktioniert jedoch. Sie können auch funktionale und grundlegende anwenden aspektorientierte Programmierung Techniken, die anonyme Funktionen verwenden, die Variablen zugewiesen werden.

var fib = memoize(function (n) { 
    if (n < 0) return 0;
    if (n < 2) return 1;
    return fib(n-1) + fib(n-2); 
});

...
// patch the $ library function
if (...) {
    $ = around($, fixArg, fixResult);
}

Es ist beides wahr, dass die erste Form:

function test() { }

eine anerkanntere Syntax ist und dass die zweite Form:

var test = function() { ... }

ermöglicht es Ihnen, den Umfang der Funktion zu steuern (durch die Verwendung von var; ohne sie wäre sie sowieso global).

Und Sie können sogar beides:

var test = function test() { ... test(); ... }

Dadurch können Sie in der zweiten Form eine rekursive Funktion definieren.

Für die Lesbarkeit würde ich sagen, dass die erste deutlich besser ist. Ein zukünftiger Wartungsprogrammierer wird, selbst wenn er mit Javascript vertraut genug ist, um viele der Feinheiten zu kennen, die in diesem Thread auftauchen, das erste Format annehmen.

Wenn sie beispielsweise eines Tages Strg-F verwenden möchten, um nach der Definition Ihrer Funktion zu suchen, um zu sehen, was dort passiert, werden sie zuerst suchen someFunc = function() oder function someFunc()?

Um es geradezu typografisch zu machen (da wir über Lesbarkeit sprechen), scannen Leser den Text oft schnell und würden eher dazu neigen, eine Zeile zu überspringen, die mit “var” beginnt, wenn sie nach einer Funktionsdefinition suchen.

Ich weiß, dass dies eine nicht technische Antwort ist, aber es ist für Menschen schwieriger, Code zu lesen als für Computer.