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.
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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
}
Nach dem Login kopieren
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();
Nach dem Login kopieren
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);
Nach dem Login kopieren
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();
Nach dem Login kopieren
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");
Nach dem Login kopieren
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!
