8. Funkcje
8.1. skrypt [func-01]
Skrypt zajmuje się sposobem przekazywania parametrów funkcji:
- przekazywanie przez wartość w przypadku liczb, ciągów znaków i wartości logicznych;
- przekazywanie przez odwołanie w przypadku tablic, obiektów literałowych i funkcji;
'use strict';
// sposób przekazywania parametrów funkcji
// -----------------------liczba – przekazywanie przez wartość
function doSomethingWithNumber(param) {
param++;
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === count);
}
// kod wywołania
let count = 10;
doSomethingWithNumber(count);
console.log("[count outside function]=", count);
// --------------------- ciąg znaków – przekazywanie przez wartość
function doSomethingWithString(param) {
param += " xyz"
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === text);
}
// kod wywołania
let text = "abcd";
doSomethingWithString(text);
console.log("[text outside function]=", text);
// --------------------- wartość logiczna – przekazywanie przez wartość
function doSomethingWithBoolean(param) {
param = !param;
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === bool);
}
// kod wywołania
let bool = true;
doSomethingWithBoolean(bool);
console.log("bool [outside function]=", bool);
// --------------------- tablica – przekazywanie przez odwołanie
function doSomethingWithArray(param) {
param.push(1000);
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === tab);
}
// kod wywołania
const tab = [10, 20, 30];
doSomethingWithArray(tab);
console.log("[tab outside function]=", tab);
// --------------------- obiekt – przekazywanie przez odwołanie
function doSomethingWithObject(param) {
param.unePropriétéNouvelle = "xyz";
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === obj);
}
// kod wywołania
const obj = [10, 20, 30];
doSomethingWithObject(obj);
console.log("[obj outside function]=", obj);
// --------------------- funkcja – przekazywanie przez referencję
function doSomethingWithFunction(param) {
// coś dość dziwnego, ale jednak działającego
param.unePropriétéNouvelle = "xyz";
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === f);
}
// kod wywołania
const f = x => x + 4;
doSomethingWithFunction(f);
console.log("[f outside function]=", f, f.unePropriétéNouvelle, typeof (f));
Wykonanie
[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. skrypt [func-02]
Poniższy skrypt pokazuje, że typ [function] jest typem danych jak każdy inny i że zmienna może mieć ten typ. Pokazuje również dwa sposoby zdefiniowania funkcji:
- jeden z użyciem słowa kluczowego [function];
- drugi z użyciem notacji „strzałki” =>;
'use strict';
// funkcję można przypisać do zmiennej
const variable1 = function (a, b) {
return a + b;
};
console.log("typeof(variable1)=", typeof (variable1));
// zmienną tę można następnie wykorzystać jako funkcję
console.log("variable1(10,12)=", variable1(10, 12));
// funkcję można zdefiniować za pomocą notacji =>
const variable2 = (a, b, c) => {
return a - b + c;
};
console.log("variable2(10,12,14)=", variable2(10, 12, 14));
// nie trzeba używać nawiasów klamrowych, jeśli w kodzie funkcji znajduje się tylko jedno wyrażenie
// wyrażenie to stanowi wówczas wartość zwracaną przez funkcję
const variable3 = (a, b, c) => a + b + c;
console.log("variable3(10,12,14)=", variable3(10, 12, 14));
Wykonanie
[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. skrypt [func-03]
Ten skrypt pokazuje, jak przekazać funkcję jako parametr do innej funkcji. Ta metoda jest szeroko stosowana w frameworkach JavaScript.
'use strict';
// parametry funkcji mogą być typu [fonction]
// funkcja f1
function f1(param1, param2) {
return param1 + param2 + 10;
}
// funkcja f2
function f2(param1, param2) {
return param1 + param2 + 20;
}
// funkcja g z funkcją f jako parametrem
function g(param1, param2, f) {
return f(param1, param2) + 100;
}
// wykorzystania funkcji g
console.log(g(0, 10, f1));
console.log(g(0, 10, f2));
// parametr rzeczywisty typu funkcja może być przekazywany bezpośrednio – forma 1
console.log(g(0, 10, (param1, param2) => {
return param1 + param2 + 30;
}));
// parametr rzeczywisty typu funkcja może być przekazywany bezpośrednio – forma 2
console.log(g(0, 10, function (param1, param2) {
return param1 + param2 + 40;
}));
Wykonanie
[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. skrypt [func-04]
Poniższy skrypt pokazuje, że funkcja JavaScript może zachowywać się jak klasa:
'use strict';
// funkcja może być używana jako obiekt
// pusta skorupa
function f() {
}
//, do której przypisuje się właściwości z zewnątrz
f.prop1 = "val1";
f.show = function () {
console.log(this.prop1);
}
// użycie funkcji f
f.show();
// funkcja g działająca jak klasa
function g() {
this.prop2 = "val2";
this.show = function () {
console.log(this.prop2);
}
}
// instancjonowanie funkcji za pomocą [new]
new g().show();
Komentarze
- wiersze 5–7: treść funkcji f nie definiuje żadnych właściwości;
- wiersze 9–12: z zewnątrz przypisuje się właściwości funkcji f;
- wiersz 14: użycie funkcji (obiektu) f. Należy zauważyć, że nie pisze się [f()], lecz po prostu [f]. Jest to notacja obiektu;
- wiersze 17–22: definiuje się funkcję [g] tak, jakby była to klasa z właściwościami i metodami;
- wiersz 24: funkcja [g] jest instancjonowana przez [new g()];
Wyniki wykonania
[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 wprowadziła pojęcie klasy, dzięki czemu możemy teraz uniknąć korzystania z funkcji w celu uzyskania klas.
8.5. skrypt [func-05]
Skrypt [func-05] pokazuje zastosowanie operatora o nazwie [rest operator]:
'use strict';
// operator resztowy
function f(arg1, ...otherArgs) {
// pierwszy argument
console.log("arg1=", arg1);
// pozostałe argumenty
let i = 0;
otherArgs.forEach(element => {
console.log("otherArguments[", i, "]=", element);
i++;
});
}
// wywołanie
f(1, "deux", "trois", { x: 2, y: 3 })
- wiersz 3: zapis [...otherArgs] sprawia, że przy wywołaniu typu f(param1, param2, param3) otrzymamy wiersz 3:
- arg1=param1
- otherArgs=[param2, param3]. [otherArgs] jest zatem tablicą zawierającą wszystkie rzeczywiste parametry przekazane za [param1];
Wyniki działania aplikacji są następujące: