JavaScript-Funktionen werden mit definiert Schlüsselwort function.
Sie können eine Funktions-Deklaration oder eine verwenden Funktion Ausdruck.
Zu Beginn dieses Tutorials haben Sie erfahren, dass Funktionen mit deklariert werden folgende Syntax:
function functionName(parameters) {
// code to be executed
}Deklarierte Funktionen werden nicht sofort ausgeführt. Sie werden „zur späteren Verwendung gespeichert“, und werden später ausgeführt, wenn sie aufgerufen (aufgerufen) werden.
function myFunction(a, b) {
return a * b;
}Probieren Sie es selbst aus →
Semikolons werden verwendet, um ausführbare JavaScript-Anweisungen zu trennen.
Da eine Funktionsdeklaration keine ausführbare Anweisung ist, ist sie es Es ist nicht üblich, es mit einem Semikolon zu beenden.
Eine JavaScript-Funktion kann auch mithilfe eines Ausdrucks definiert werden.
Ein Funktionsausdruck kann in einer Variablen gespeichert werden:
const x = function (a, b) {return a * b};Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Nachdem ein Funktionsausdruck in einer Variablen gespeichert wurde, kann die Variable als Funktion verwendet werden:
const x = function (a, b) {return a * b};
let z = x(4, 3);Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
Die obige Funktion ist eigentlich eine anonyme Funktion (eine Funktion ohne a Name).
In Variablen gespeicherte Funktionen benötigen keine Funktionsnamen. Sie sind immer wird unter Verwendung des Variablennamens aufgerufen (aufgerufen).
Die obige Funktion endet mit einem Semikolon, da sie Teil einer ausführbaren Anweisung ist.
Wie Sie in den vorherigen Beispielen gesehen haben, werden JavaScript-Funktionen definiert mit dem Schlüsselwort function.
Funktionen können auch mit einem integrierten JavaScript-Funktionskonstruktor namens definiert werden Funktion().
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>
<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Sie müssen den Funktionskonstruktor eigentlich nicht verwenden. Das obige Beispiel ist dasselbe wie das Schreiben:
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Meistens können Sie die Verwendung des Schlüsselworts new in JavaScript vermeiden.
Zu Beginn dieses Tutorials haben Sie etwas über das „Heben“ (JavaScript Hoisting) gelernt.
Beim Hochziehen handelt es sich um das Standardverhalten von JavaScript, bei dem Deklarationen an den Anfang verschoben werden aktuellen Umfang.
Das Heben gilt für Variablendeklarationen und Funktionsdeklarationen.
Aus diesem Grund können JavaScript-Funktionen aufgerufen werden, bevor sie deklariert werden:
myFunction(5);
function myFunction(y) {
return y * y;
}Mithilfe eines Ausdrucks definierte Funktionen werden nicht aufgerufen.
Funktionsausdrücke können „selbstaufrufend“ gemacht werden.
Ein selbstaufrufender Ausdruck wird automatisch aufgerufen (gestartet), ohne aufgerufen zu werden.
Funktionsausdrücke werden automatisch ausgeführt, wenn dem Ausdruck gefolgt wird von().
Sie können eine Funktionsdeklaration nicht selbst aufrufen.
Du musst hinzufügen Setzen Sie Klammern um die Funktion, um anzuzeigen, dass es sich um einen Funktionsausdruck handelt:
(function () {
let x = "Hello!!"; // I will invoke myself
})();Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<p>Functions can be invoked automatically without being called:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
Die obige Funktion ist eigentlich eine anonyme selbstaufrufende Funktion (function ohne Namen).
Als Werte können JavaScript-Funktionen verwendet werden:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript-Funktionen können in Ausdrücken verwendet werden:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Der typeof-Operator in JavaScript gibt „function“ für zurück Funktionen.
Aber JavaScript-Funktionen lassen sich am besten als Objekte beschreiben.
JavaScript-Funktionen haben sowohl Eigenschaften als auch Methoden.
Die Eigenschaft arguments.length gibt die Anzahl der Argumente zurück, die wann empfangen wurden Die Funktion wurde aufgerufen:
function myFunction(a, b) {
return arguments.length;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<p>The arguments.length property returns the number of arguments received by the function:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Die Methode toString() gibt die Funktion als String zurück:
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
Eine Funktion, die als Eigenschaft eines Objekts definiert ist, wird als Methode für das Objekt bezeichnet.
Eine Funktion zum Erstellen neuer Objekte wird als Objektkonstruktor bezeichnet.
Pfeilfunktionen ermöglichen eine kurze Syntax zum Schreiben von Funktionsausdrücken.
Sie benötigen nicht das Schlüsselwort function, das Schlüsselwort return und das geschweifte Klammern.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Pfeilfunktionen haben keinen eigenen dies. Sie eignen sich nicht gut zum Definieren von Objektmethoden.
Pfeilfunktionen sind nicht aktiviert. Sie müssen vor ihrer Verwendung definiert werden.
Verwenden von const ist sicherer als die Verwendung von var, da dies bei einem Funktionsausdruck der Fall ist immer konstanter Wert.
Sie können das Schlüsselwort return und die geschweiften Klammern nur weglassen, wenn es sich bei der Funktion um eine einzelne Anweisung handelt. Aus diesem Grund könnte es eine gute Angewohnheit sein, sie immer zu behalten:
const x = (x, y) => { return x * y };
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Pfeilfunktionen werden in IE11 oder früher nicht unterstützt.