Heim > Artikel > Web-Frontend > Entdecken Sie das Konzept des JavaScript-Funktionsbereichs und die verschiedenen Arten von JavaScript-Funktionen

Entdecken Sie das Konzept des JavaScript-Funktionsbereichs und die verschiedenen Arten von JavaScript-Funktionen

WBOYnach vorne: 2023-09-07 14:41:021069Durchsuche

探索 JavaScript 函数作用域的概念和不同类型的 JavaScript 函数

In JavaScript ermöglichen uns verschiedene Bereiche den Zugriff auf Funktionen und Variablen von verschiedenen Stellen im Code. In diesem Tutorial erfahren Sie mehr über den Funktionsumfang. Darüber hinaus werden wir die verschiedenen Arten von Funktionsausdrücken in JavaScript untersuchen.

Funktionsumfang

Wenn wir in JavaScript eine neue Funktion erstellen, wird auch der Umfang dieser spezifischen Funktion erstellt. Das bedeutet, dass wir auf jede Variable, die wir innerhalb einer Funktion deklarieren oder eine darin verschachtelte Funktion definieren, nur innerhalb des Funktionsblocks zugreifen können.

Wenn wir versuchen, von außerhalb der Funktion auf eine innerhalb eines Funktionsblocks definierte Variable zuzugreifen, erhalten wir einen Referenzfehler.

Grammatik

Sie können der folgenden Syntax folgen, um Funktionen zu definieren und den Funktionsumfang zu verstehen.

function  function_name(){
   var variable = 10; // variable has a function scope.
}
let variable1 = variable; 
// we can't access the variable here as it has a function scope.

In der obigen Syntax können Sie sehen, dass wir nicht auf die Variablen außerhalb der Funktion zugreifen können, da der Funktionsblock dies einschränkt.

Beispiel 1

In diesem Beispiel haben wir die Beispielfunktion erstellt und die Variablen innerhalb der Funktion mit Blockbereich definiert. Wenn wir versuchen, von außerhalb der Funktion auf eine innerhalb der Sample()-Funktion definierte Variable zuzugreifen, löst JavaScript einen Referenzfehler aus.

<html>
<body>
   <h2>Function Scope in JavaScript</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      // defining the function
      function sample() {
         //  variables with function scope.
         var website = "TutorialsPoint!";
         var language = "JavaScript";
         output.innerHTML +=
            "You are learning the " +
            language +
            " programming language on " +
            website +
            " </br>";
      }
      sample();
      // we can't access language and website variables here.
   </script>
</body>
</html>

Beispiel 2

Wir haben in diesem Fall nested_function() in der Beispielfunktion definiert. Wir können nested_funciton() außerhalb der sample()-Funktion nicht aufrufen, da nested_function im Geltungsbereich der Beispielfunktion liegt.

<html>
<body>
   <h2>Function sSope in JavaScript</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      function sample() {
         //  variables with function scope.
         var num = 10;
         function nested_function() {
            // num variables also can be accessed here as nested_function() is
            //inside the scope of sample function
            var string = "JavaScript";
            output.innerHTML +=
               "The value of the num variable is " + num + "<br/>";
            output.innerHTML +=
               "The value of the string variable is " + string + "</br>";
         }
         //  we can call the nested_function() inside the sample() function only
         nested_function();
         // we can't access the string variable here as the scope of 
         //nested_function bounds it
      }
      sample();
   </script>
</body>
</html>

Verschiedene Arten von Funktionen in JavaScript

Entsprechend der Definition und Deklaration von Funktionen gibt es viele Arten von Funktionen. Wir werden sie hier einzeln lernen.

Normale Funktion

Normale Funktionen sind Funktionen, die üblicherweise von allen JavaScript-Entwicklern verwendet werden. Wir können reguläre Funktionen definieren, indem wir den Funktionsnamen gefolgt vom Funktionsschlüsselwort verwenden.

Reguläre Funktionen bleiben an der Spitze des aktuellen Funktionsumfangs. Das bedeutet, dass wir die Funktion aufrufen können, bevor wir sie definieren, sie sollte jedoch nach der Ausführung definiert werden.

Grammatik

Folgen Sie dieser Syntax, um reguläre Funktionen zu definieren.

function function_name(){
   // function body
}

In der obigen Syntax haben wir das Schlüsselwort function verwendet, um eine Funktion zu definieren. „Funktionsname“ ist der Name der Funktion, und wir können den Code für den Funktionskörper in geschweifte Klammern schreiben.

Funktionsausdruck

Funktionsausdrücke funktionieren auch wie gewöhnliche Funktionen. Der Unterschied besteht jedoch darin, dass es keinen Namen hat und wir den Funktionsausdruck in einer Variablen speichern müssen. Wir können den Bezeichner verwenden, um die Funktion aufzurufen, die ihn speichert.

JavaScript wertet Funktionsausdrücke Schritt für Schritt aus. Daher wird es nicht an die Spitze des Gültigkeitsbereichs gehoben, sodass wir es nicht aufrufen können, bevor wir es deklariert haben.

Grammatik

Folgen Sie dieser Syntax, um Funktionsausdrücke zu definieren.

var function_identifier = function () {
   // function body
}
function_identifier();

In der obigen Syntax haben wir eine Funktion ohne Namen nur mit dem Schlüsselwort function definiert und in der Variablen function_identifier gespeichert. Darüber hinaus können Benutzer sehen, wie wir function_identifier verwenden, um Funktionsausdrücke aufzurufen.

Pfeilfunktion

Pfeilfunktionen wurden in ES6 eingeführt, der letzten großen Überarbeitung von JavaScript im Jahr 2015. Es handelt sich um eine kürzere Syntax zum Definieren von Funktionen ohne Funktionsnamen. Außerdem werden sie als Ausdrücke und anonyme Funktionen bezeichnet, da sie ihre Identitäten nicht enthalten.

Grammatik

Folgen Sie dieser Syntax, um Pfeilfunktionen zu definieren.

var function_identifier =  (params) => {
   // function body
}
function_identifier(arguments);

In der obigen Syntax speichern wir den Pfeilfunktionsausdruck in function_identifier. Darüber hinaus haben wir die Argumente und Argumente innerhalb der Pfeilfunktion übergeben, während wir die Funktion mithilfe der Variablen function_identifier aufgerufen haben.

Schließfunktion

Wir können verschachtelte Funktionen in JavaScript erstellen und über untergeordnete Funktionen auf übergeordnete Funktionsvariablen zugreifen. Da die untergeordnete Funktion Zugriff auf alle im Bereich der übergeordneten Funktion definierten Variablen enthält, können wir die untergeordnete Funktion als Abschlussfunktion bezeichnen.

Grammatik

function parent() {
   // variables of the parent
   var child = () => {
      // variables of child
      // access variables of the parent
   };
   return child;
}
var child = parent();
child();

In der obigen Syntax können wir innerhalb der untergeordneten Funktion auf alle Variablen der übergeordneten Funktion zugreifen, und die übergeordnete Funktion gibt die untergeordnete Funktion zurück. Daher können wir eine untergeordnete Funktion indirekt von außerhalb der übergeordneten Funktion aufrufen, selbst wenn sie innerhalb des Gültigkeitsbereichs der übergeordneten Funktion definiert ist.

Konstrukteur

Grammatik

Wir können den Konstruktor verwenden, um Objekte zu erstellen.

function constructor(property){
   this.property = property
}
var string = new constructor("value");

In der obigen Syntax erstellen wir das Objekt des Konstruktors.

In diesem Tutorial haben wir anhand von zwei Beispielen gelernt, wie das Funktions-Scoping für verschachtelte Funktionen funktioniert. Darüber hinaus haben wir die verschiedenen Arten von Funktionen kennengelernt. Darüber hinaus gibt es einige andere Arten von Funktionen wie rekursive oder Rückruffunktionen, die Benutzer im Internet erkunden können.

Das obige ist der detaillierte Inhalt vonEntdecken Sie das Konzept des JavaScript-Funktionsbereichs und die verschiedenen Arten von JavaScript-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript es6 构造函数标识符回调函数递归闭包 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 schütze ich eine Seite mit einem Passwort, das nur HTML, CSS und JavaScript verwendet?Nächster Artikel：Wie schütze ich eine Seite mit einem Passwort, das nur HTML, CSS und JavaScript verwendet?

In Verbindung stehende Artikel

Mehr sehen