Heim > Artikel > Web-Frontend > Erklären Sie den Unterschied in der Foo-Nutzung zwischen function foo() {} und var foo = function() {}

Erklären Sie den Unterschied in der Foo-Nutzung zwischen function foo() {} und var foo = function() {}

王林nach vorne: 2023-09-14 20:13:091126Durchsuche

解释一下 function foo() {} 和 var foo = function() {} 在 foo 用法上的区别

In JavaScript haben wir verschiedene Möglichkeiten, Funktionen zu definieren. function foo() {} und var foo = function() { } sind zwei verschiedene Möglichkeiten, eine Funktion zu definieren. Beide Methoden haben ihre Vorteile und unterschiedliche Anwendungsfälle; beide führen jedoch zum gleichen Ergebnis bei der Ausführung der Funktion.

In diesem Tutorial erfahren wir den Unterschied zwischen den beiden Möglichkeiten, eine Funktion zu definieren.

Erklärung der Funktion foo() { }: Funktionsdeklaration

function foo() { } ist die reguläre Methode zum Deklarieren einer Funktion in JavaScript und wird von jedem Anfänger und Entwickler verwendet. Alternativ können wir es eine benannte Funktion nennen.

Wenn die Programmausführungssteuerung den Umfang der Funktionsdeklaration erreicht, wertet JavaScript die Funktionsdeklaration aus. Die Auswertung der Funktionsdeklaration ist nicht Teil des schrittweisen Prozesses, sondern wird zu Beginn ausgewertet.

Darüber hinaus werden Funktionsdeklarationen innerhalb des spezifischen Bereichs, in dem sie deklariert werden, an die Spitze jedes Codes gehoben. Daher können wir die Funktion an einer beliebigen Stelle im Gültigkeitsbereich aufrufen, sogar vor der Deklaration.

Grammatik

Benutzer können Funktionen gemäß der folgenden Syntax deklarieren.

function foo(parameters, .... ) {
   // function body
}

In der obigen Syntax ist „function“ das Schlüsselwort, das die Funktionsdeklaration darstellt, und foo ist der Funktionsname.

Beispiel

In diesem Beispiel haben wir die Funktion foo() durch Funktionsdeklaration definiert. Danach rufen wir es wie eine normale Funktion auf.

<html>
   <body>
      <h2>function foo() { } (function declaration)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // declaring the function
         function foo() {
            output.innerHTML += "The function foo is invoked!";
         }
         foo();
      </script>
   </body>
</html>

Beispiel

Im folgenden Beispiel definieren wir eine Funktion mit Parametern. Als zweites Argument übergeben wir invokedPosition, das die Position darstellt, von der aus wir die Funktion aufrufen.

Wir haben die Funktion foo() vor der Deklaration aufgerufen, da JavaScript die Funktion zu Beginn auswertet, wenn der Ausführungsfluss in den Gültigkeitsbereich eintritt und an die Spitze gehoben wird.

<html>
   <body>
      <h2>function foo() { } (function declaration)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // As foo is hoisted on top, we can call the function before the declaration
         foo(10, "Top");
         
         // declaring the function with parameters
         function foo(param1, inovkingPosition) {
            output.innerHTML += "The function foo is invoked from " + inovkingPosition + "</br>";
            output.innerHTML += "The value of the param1 is " + param1 + " <br/> <br/>";
         }
         foo(20, "bottom");
      </script>
   </body>
</html>

var foo = function() { } Erklärung: Funktionsausdruck

var foo = function() { } ist auch dasselbe wie das Definieren einer Funktion, die als Funktionsausdruck bezeichnet wird. Hier ist function() { } der Funktionsausdruck, den wir in der Variable foo speichern. foo ist eine normale Variable wie jede andere Variable, sogar wir können Zahlen und Zeichenfolgen in der foo-Variablen speichern.

JavaScript wertet Funktionsausdrücke am Anfang nicht aus, wie dies bei Funktionsdeklarationen der Fall ist. Es wertet Funktionsausdrücke Schritt für Schritt aus. Wenn der Ausführungsfluss einen Funktionsausdruck erreicht, wertet JavaScript den Ausdruck aus und speichert ihn in der foo-Variablen.

Außerdem wird der Funktionsausdruck nicht an den Anfang des Codes gehoben, sodass wir den Funktionsausdruck nicht aufrufen können, bevor wir ihn wie eine Funktionsdeklaration definieren.

Grammatik

Benutzer können Funktionsausdrücke verwenden, um Funktionen gemäß der folgenden Syntax zu definieren.

var foo = function (params) {
   
   // function body
};

In der obigen Syntax hat die Funktionsdefinition keinen Namen, daher können wir sie als anonyme Funktion bezeichnen. Wir können die Variable foo als Bezeichner der Funktion verwenden.

Beispiel

In diesem Beispiel haben wir die Funktion mithilfe des Funktionsausdrucks definiert und im foo-Bezeichner gespeichert. Danach verwenden wir den foo-Bezeichner, um den darin gespeicherten Funktionsausdruck aufzurufen und übergeben die Argumente im foo-Bezeichner.

<html>
   <body>
      <h2>var foo = function() { } (function expression)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // defining the function expression and storing it in the foo variable
         var foo = function (param) {
            output.innerHTML += "Inside the function expression. </br>";
            output.innerHTML += "The value of the param is " + param + "</br>";
         };
         
         // calling the function expression via foo identifier
         foo("Hi Users!");
      </script>
   </body>
</html>

Funktionsausdrücke haben unterschiedliche Anwendungsfälle. Benutzer können eine kurze Syntax für Funktionen schreiben, die sie als Rückruffunktion verwenden. Darüber hinaus können Benutzer es auch als Verschlussfunktion verwenden. Manchmal müssen wir eine Funktion als Parameter übergeben und können dann Funktionsausdrücke verwenden.

Beispiel

In diesem Beispiel übergeben wir den Funktionsausdruck als Argument an die Methode sort(). Benutzer können sehen, dass wir anonyme Funktionen als Parameter übergeben, anstatt Deklarationen mit Namen zu schreiben.

<html>
   <body>
      <h2>Passing function expression as an argument</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let number = [320, 45, 3, 23, 54];
      
         // passing the function expression as an argument of the sort() method
         number.sort(function (element1, element2) {
            return element2 - element1;
         });
         output.innerHTML += "The sorted array is " + number;
      </script>
   </body>
</html>

Unterschied zwischen function foo() { } und var foo = function() { }

Die folgende Tabelle hebt die Hauptunterschiede zwischen function foo() { } und var foo = function() { } hervor:

Funktion foo() { }	var foo = function() { }
Dies ist eine Funktionsdeklaration.	Es ist ein Funktionsausdruck.
Es ist an der Oberseite des Zielfernrohrs aufgehängt.	Die Reichweite wird nicht erhöht.
JavaScript wertet Bereiche zu Beginn ihrer Ausführung aus.	JavaScript wertet den Code aus, während er ihn durchläuft.
Wir können es anhand seines Funktionsnamens identifizieren.	Wir können es anhand der Kennung identifizieren, wo es gespeichert ist.
wird verwendet, um gewöhnliche Funktionen zu definieren.	Verwenden Sie es, wenn wir eine Funktion als Parameter übergeben oder eine Funktion als Abschluss verwenden müssen.

Fazit

In JavaScript gibt es zwei Möglichkeiten, Funktionen zu definieren: Funktionsdeklaration und Funktionsausdruck. Funktionsdeklarationen werden mit dem Schlüsselwort function definiert, gefolgt vom Funktionsnamen, der normalerweise als function foo() {} geschrieben wird. Wenn die Programmausführung den Bereich erreicht, in dem die Funktion deklariert ist, wertet JavaScript die Funktionsdeklaration aus und verschiebt sie an den Anfang des Codes in diesem Bereich. Dies bedeutet, dass sie aufgerufen werden können, bevor sie deklariert werden.

Funktionsausdrücke werden mithilfe von Variablen definiert, die normalerweise als var foo = function() {} geschrieben werden. Funktionsausdrücke werden nicht gehisst und müssen vor dem Aufruf definiert werden. Funktionsdeklarationen und Funktionsausdrücke können dieselbe Aufgabe ausführen, haben jedoch unterschiedliche Syntax und Rechenverhalten.

Das obige ist der detaillierte Inhalt vonErklären Sie den Unterschied in der Foo-Nutzung zwischen function foo() {} und var foo = function() {}. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript sort 标识符回调函数字符串 var 闭包 function 作用域

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich mit FabricJS eine Leinwand mit Hintergrundfarbe?Nächster Artikel：Wie erstelle ich mit FabricJS eine Leinwand mit Hintergrundfarbe?

In Verbindung stehende Artikel

Mehr sehen