8. 函数
8.1. 脚本 [func-01]
该脚本演示了参数如何传递给函数：
- 对于数字、字符串和布尔值，采用值传递；
- 数组、字面量对象和函数采用引用传递；
'use strict';
// how to pass function parameters
// -----------------------nombre - passing by value
function doSomethingWithNumber(param) {
param++;
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === count);
}
// call code
let count = 10;
doSomethingWithNumber(count);
console.log("[count outside function]=", count);
// --------------------- chain - passing by value
function doSomethingWithString(param) {
param += " xyz"
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === text);
}
// call code
let text = "abcd";
doSomethingWithString(text);
console.log("[text outside function]=", text);
// --------------------- Boolean - passing by value
function doSomethingWithBoolean(param) {
param = !param;
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === bool);
}
// call code
let bool = true;
doSomethingWithBoolean(bool);
console.log("bool [outside function]=", bool);
// --------------------- table - passage by reference
function doSomethingWithArray(param) {
param.push(1000);
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === tab);
}
// call code
const tab = [10, 20, 30];
doSomethingWithArray(tab);
console.log("[tab outside function]=", tab);
// --------------------- object - passing by reference
function doSomethingWithObject(param) {
param.unePropriétéNouvelle = "xyz";
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === obj);
}
// call code
const obj = [10, 20, 30];
doSomethingWithObject(obj);
console.log("[obj outside function]=", obj);
// --------------------- function - pass by reference
function doSomethingWithFunction(param) {
// a rather bizarre thing that works
param.unePropriétéNouvelle = "xyz";
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === f);
}
// call code
const f = x => x + 4;
doSomethingWithFunction(f);
console.log("[f outside function]=", f, f.unePropriétéNouvelle, typeof (f));
执行
[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. 脚本 [func-02]
以下脚本展示了 [function] 类型与其他数据类型无异，且变量可以采用该类型。它还展示了定义函数的两种方法：
- 一种使用 [function] 关键字；
- 另一种使用“箭头”语法 =>；
'use strict';
// you can assign a function to a variable
const variable1 = function (a, b) {
return a + b;
};
console.log("typeof(variable1)=", typeof (variable1));
// the variable can then be used as a function
console.log("variable1(10,12)=", variable1(10, 12));
// the function can be defined using the notation =>
const variable2 = (a, b, c) => {
return a - b + c;
};
console.log("variable2(10,12,14)=", variable2(10, 12, 14));
// braces can be omitted if there is only one expression in the function code
// this expression is then the return value of the
const variable3 = (a, b, c) => a + b + c;
console.log("variable3(10,12,14)=", variable3(10, 12, 14));
执行
[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. 脚本 [func-03]
本脚本演示了将一个函数作为参数传递给另一个函数的功能。这种技术在 JavaScript 框架中被广泛使用。
'use strict';
// function parameters can be of type [function]
// function f1
function f1(param1, param2) {
return param1 + param2 + 10;
}
// function f2
function f2(param1, param2) {
return param1 + param2 + 20;
}
// function g with a function f as parameter
function g(param1, param2, f) {
return f(param1, param2) + 100;
}
// uses of g
console.log(g(0, 10, f1));
console.log(g(0, 10, f2));
// the function-type effective parameter can be passed directly - form 1
console.log(g(0, 10, (param1, param2) => {
return param1 + param2 + 30;
}));
// the function-type effective parameter can be passed directly - form 2
console.log(g(0, 10, function (param1, param2) {
return param1 + param2 + 40;
}));
执行
[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. 脚本 [func-04]
以下脚本演示了 JavaScript 函数可以像类一样工作：
'use strict';
// a function can be used as an object
// an empty shell
function f() {
}
// to which external properties are attributed
f.prop1 = "val1";
f.show = function () {
console.log(this.prop1);
}
// use of f
f.show();
// a function g operating as a class
function g() {
this.prop2 = "val2";
this.show = function () {
console.log(this.prop2);
}
}
// instantiate the function with [new]
new g().show();
注释
- 第 5–7 行：函数 f 的主体未定义任何属性；
- 第9–12行：属性是从外部赋值给函数f的；
- 第14行：使用函数（对象）f。请注意，我们不写[f()]，而是直接写[f]。这是对象的表示法；
- 第 17–22 行：我们将函数 [g] 定义为一个具有属性和方法的类；
- 第 24 行：通过 [new g()] 对函数 [g] 进行实例化；
执行结果
[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 引入了类（class）的概念，这使得我们现在无需使用函数来创建类。
8.5. 脚本 [func-05]
脚本 [func-05] 演示了名为 [余项运算符] 的运算符的使用：
'use strict';
// rest operator
function f(arg1, ...otherArgs) {
// 1st argument
console.log("arg1=", arg1);
// other arguments
let i = 0;
otherArgs.forEach(element => {
console.log("otherArguments[", i, "]=", element);
i++;
});
}
// call
f(1, "deux", "trois", { x: 2, y: 3 })
- 第 3 行：[...otherArgs] 语法表示，当调用形式为 f(param1, param2, param3) 时，我们将得到第 3 行：
- arg1=param1
- otherArgs = [param2, param3]。因此，[otherArgs] 是一个数组，用于收集 [param1] 之后传递的所有实际参数；
应用结果如下：