8. Die Funktionen
8.1. Skript [func-01]
Das Skript befasst sich mit der Art der Parameterübergabe einer Funktion:
- Wertübergabe für Zahlen, Zeichenketten und Boolesche Werte;
- Referenzübergabe für Arrays, Objektliterale und Funktionen;
'use strict';
// Parameterübergabe bei einer Funktion
// -----------------------Anzahl – Übergabe nach Wert
function doSomethingWithNumber(param) {
param++;
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === count);
}
// Aufrufcode
let count = 10;
doSomethingWithNumber(count);
console.log("[count outside function]=", count);
// --------------------- Zeichenkette – Übergabe nach Wert
function doSomethingWithString(param) {
param += " xyz"
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === text);
}
// Aufrufcode
let text = "abcd";
doSomethingWithString(text);
console.log("[text outside function]=", text);
// --------------------- Boolescher Wert – Übergabe als Wert
function doSomethingWithBoolean(param) {
param = !param;
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === bool);
}
// Aufrufcode
let bool = true;
doSomethingWithBoolean(bool);
console.log("bool [outside function]=", bool);
// --------------------- Array – Übergabe per Referenz
function doSomethingWithArray(param) {
param.push(1000);
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === tab);
}
// Aufrufcode
const tab = [10, 20, 30];
doSomethingWithArray(tab);
console.log("[tab outside function]=", tab);
// --------------------- Objekt – Übergabe per Referenz
function doSomethingWithObject(param) {
param.unePropriétéNouvelle = "xyz";
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === obj);
}
// Aufrufcode
const obj = [10, 20, 30];
doSomethingWithObject(obj);
console.log("[obj outside function]=", obj);
// --------------------- Funktion – Übergabe per Referenz
function doSomethingWithFunction(param) {
// etwas ziemlich Seltsames, das aber trotzdem funktioniert
param.unePropriétéNouvelle = "xyz";
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === f);
}
// Aufrufcode
const f = x => x + 4;
doSomethingWithFunction(f);
console.log("[f outside function]=", f, f.unePropriétéNouvelle, typeof (f));
Ausführung
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\fonctions\func-01.js"
[param inside function]= 11 [type]= number [passage par référence]= false
[count outside function]= 10
[param inside function]= abcd xyz [type]= string [passage par référence]= false
[text outside function]= abcd
[param inside function]= false [type]= boolean [passage par référence]= false
bool [outside function]= true
[param inside function]= [ 10, 20, 30, 1000 ] [type]= object [passage par référence]= true
[tab outside function]= [ 10, 20, 30, 1000 ]
[param inside function]= [ 10, 20, 30, 'unePropriétéNouvelle': 'xyz' ] [type]= object [passage par référence]= true
[obj outside function]= [ 10, 20, 30, 'unePropriétéNouvelle': 'xyz' ]
[param inside function]= x => x + 4 [type]= function [passage par référence]= true
[f outside function]= x => x + 4 xyz function
8.2. Skript [func-02]
Das folgende Skript zeigt, dass der Typ [function] ein Datentyp wie jeder andere ist und dass eine Variable diesen Typ haben kann. Es zeigt außerdem zwei Möglichkeiten, eine Funktion zu definieren:
- die eine mit dem Schlüsselwort [function];
- die andere mit der „Pfeil“-Notation =>;
'use strict';
// Man kann einer Variablen eine Funktion zuweisen
const variable1 = function (a, b) {
return a + b;
};
console.log("typeof(variable1)=", typeof (variable1));
// Die Variable kann anschließend wie eine Funktion verwendet werden
console.log("variable1(10,12)=", variable1(10, 12));
// Die Definition der Funktion kann mit der Notation „=>“ erfolgen
const variable2 = (a, b, c) => {
return a - b + c;
};
console.log("variable2(10,12,14)=", variable2(10, 12, 14));
// Die geschweiften Klammern können weggelassen werden, wenn der Funktionscode nur einen Ausdruck enthält
// Dieser Ausdruck ist dann der Rückgabewert der Funktion
const variable3 = (a, b, c) => a + b + c;
console.log("variable3(10,12,14)=", variable3(10, 12, 14));
Ausführung
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\fonctions\func-02.js"
typeof(variable1)= function
variable1(10,12)= 22
variable2(10,12,14)= 12
variable3(10,12,14)= 36
8.3. Skript [func-03]
Dieses Skript befasst sich mit der Möglichkeit, eine Funktion als Parameter an eine andere Funktion zu übergeben. Dieses Verfahren wird in JavaScript-Frameworks häufig verwendet.
'use strict';
// Die Parameter einer Funktion können vom Typ [fonction] sein
// Funktion f1
function f1(param1, param2) {
return param1 + param2 + 10;
}
// Funktion f2
function f2(param1, param2) {
return param1 + param2 + 20;
}
// Funktion g mit der Funktion f als Parameter
function g(param1, param2, f) {
return f(param1, param2) + 100;
}
// Verwendungen von g
console.log(g(0, 10, f1));
console.log(g(0, 10, f2));
// Der effektive Parameter vom Typ „Funktion“ kann direkt übergeben werden – Form 1
console.log(g(0, 10, (param1, param2) => {
return param1 + param2 + 30;
}));
// Der effektive Parameter vom Typ „Funktion“ kann direkt übergeben werden – Form 2
console.log(g(0, 10, function (param1, param2) {
return param1 + param2 + 40;
}));
Ausführung
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\fonctions\func-03.js"
120
130
140
150
8.4. Skript [func-04]
Das folgende Skript zeigt, dass sich eine JavaScript-Funktion wie eine Klasse verhalten kann:
'use strict';
// Eine Funktion kann als Objekt verwendet werden
// eine leere Hülle
function f() {
}
//, der von außen Eigenschaften zugewiesen werden
f.prop1 = "val1";
f.show = function () {
console.log(this.prop1);
}
// Verwendung von f
f.show();
// eine Funktion g, die wie eine Klasse funktioniert
function g() {
this.prop2 = "val2";
this.show = function () {
console.log(this.prop2);
}
}
// Instanziierung der Funktion mit [new]
new g().show();
Kommentare
- Zeilen 5–7: Der Funktionskörper von f definiert keine Eigenschaften;
- Zeilen 9–12: Der Funktion `f` werden von außen Eigenschaften zugewiesen;
- Zeile 14: Verwendung der Funktion (des Objekts) f. Beachten Sie, dass man nicht [f()] schreibt, sondern einfach [f]. Dies ist die Notation für ein Objekt;
- Zeilen 17–22: Es wird eine Funktion [g] definiert, als wäre sie eine Klasse mit Eigenschaften und Methoden;
- Zeile 24: Die Funktion [g] wird durch [new g()] instanziiert;
Ausführungsergebnisse
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\classes\class-00.js"
val1
val2
ES6 hat das Konzept der Klasse eingeführt, wodurch wir nun vermeiden können, über Funktionen zu gehen, um Klassen zu erhalten.
8.5. Skript [func-05]
Das Skript [func-05] veranschaulicht die Verwendung eines Operators namens [rest operator]:
'use strict';
// Restoperator
function f(arg1, ...otherArgs) {
// 1. Argument
console.log("arg1=", arg1);
// die übrigen Argumente
let i = 0;
otherArgs.forEach(element => {
console.log("otherArguments[", i, "]=", element);
i++;
});
}
// Aufruf
f(1, "deux", "trois", { x: 2, y: 3 })
- Zeile 3: Die Notation [...otherArgs] bewirkt, dass bei einem Aufruf vom Typ f(param1, param2, param3) Zeile 3 wie folgt lautet:
- arg1=param1
- otherArgs=[param2, param3]. [otherArgs] ist somit ein Array, das alle tatsächlichen Parameter enthält, die an [param1] übergeben wurden;
Die Ergebnisse der Anwendung lauten wie folgt: