[js] ES6 函数

参数默认

function Man(firstName = 'Hu', secondName = 'DK') {
    console.log(`Hello, ${firstName} ${secondName}`);
}

Man(); // Hello, Hu DK
Man('Zhao'); // Hello, Zhao DK
// null不会触发默认值
Man(null, 'DW'); // Hello, null DW
Man(undefined, 'DW'); // Hello, Hu DW

参数变量默认声明，且有局部作用域，不能在内部再用let或const声明，也不能有同名参数。
参数变量默认值不传值，每次都要重新计算默认表达式的值。

let myAge = 5;
function Man(age = myAge + 3) {
    console.log(age);
}
Man(); // 8
myAge = 7;
Man(); // 10

但是默认值传入之后不会再改变

let myAge = 5;
function Man(age = myAge + 2) {
    this.age = age;
}
var hu = new Man();
hu.age; // 7
myAge = 4;
var lin = new Man();
hu.age; // 7
lin.age; // 6

解构赋值+默认值
两者可结合使用

function Couple({Man = 'Li Lei', Women = 'Han Meimei'}) {
    console.log(`${Man} marry ${Women}`);
}

Couple({}); // Li Lei marry Han Meimei
Couple({Man: 'Zhang San'}); // Zhang San marry Han Meimei
Couple({Man: 'Zhang San', Women: 'Han Lin'}); // Zhang San marry Han Lin
Couple() // Uncaught TypeError: Cannot match against 'undefined' or 'null'.

可以对其再进行一次默认
C2中默认值是一个有具体属性的对象，但是若传入了一个对象，则对象解构赋值无默认值

function C1({Man = 'Li Lei', Women = 'Han Meimei'} = {}) {
    console.log(`${Man} marry ${Women}`);
}
function C2({Man, Women} = {Man : 'Li Lei', Women : 'Han Meimei'}) {
    console.log(`${Man} marry ${Women}`);
}

C1(); // Li Lei marry Han Meimei
C2(); // Li Lei marry Han Meimei

C1({}); // Li Lei marry Han Meimei
C2({}); // undefined marry undefined

C1({Man: 'Zhang San'}); // Zhang San marry Han Meimei
C2({Man: 'Zhang San'}); // Zhang San marry undefined

C1({Girl: 'Lily'}); // Li Lei marry Han Meimei
C2({Girl: 'Lily'}); // undefined marry undefined

参数默认值一般放在尾部

作用域
参数默认值会造成一个单独的作用域，只在函数进行声明初始化时出现，等初始化结束就消失；在无参数默认值时不出现该作用域。

let x = 0;
function f(x, y = x) {
    console.log(y);
}
f(); // undefined
f(3); // 3

函数执行的时候，会先执行函数参数，再执行函数体，因此在函数中定义的变量无法在参数默认值创建的作用域中获取。

let x = 0;
function f(y = x) {
    let x = 1;
    console.log(y);
}
function f1(y = z) {
    let z = 1;
    console.log(z);
}
// 暂时性死区，相当于 let x = x
function f2(x = x) {
    console.log(x);
}
f(); // 0
f1(); // Uncaught ReferenceError: z is not defined
f2(); // Uncaught ReferenceError: x is not defined

x = 1;
function f(x, y = function () { x = 2; }) {
    let x = 3;
    y();
    console.log(x);
}
// 3个x在不同的作用域中
f(); // 3

rest参数
rest参数搭配的变量为一个数组，与arguments的伪数组不同。

function f() {
    let sum = 0;
    Array.prototype.map.apply(arguments, [(item) => { sum += item; }]);
    return sum;
}
function f1(...values) {
    let sum = 0;
    values.map((item) => { sum += item; });
    return sum;
}
f(1,2,3,4,5,6,7,8,9,10); // 55
f1(1,2,3,4,5,6,7,8,9,10); // 55

rest参数必须为最后一个参数

函数length
函数length是函数所期待的传入的参数个数
指定的默认值、rest参数不会算在length中

(function t(a, b = 't') {}).length // 1
// 指定默认值后的参数也不计入后面的参数
(function t(a, b = 't', c, d) {}).length // 1
(function t(a, ...args) {}).length // 1

name属性

function f1() {}
var f2 = function () {}
var f3 = f2;
var f4 = function t() {}
var f5 = f4.bind({});
var f6 = f5.bind({});
f1.name; // f1
f2.name; // f2
f3.name; // f2
f4.name; // t
f5.name; // bound t
f6.name; // bound bound t
(new Function).name; // anonymous

lambda =>

var f = function (a, b, c) {
    let d = a + b - c;
    return d;
}
var f = (a, b, c) => { let d = a + b - c; return d; }
// 返回对象必须加()，箭头后的{}会被当作程序块
// 只有一行语句时可省略return
var c = a => ({ Name: a });

可与变量解构、参数默认值与rest参数结合使用

let Man = ({firstName = 'Hu', secondName = 'DK'} = {}) => `${firstName} ${secondName}`;
Man(); // Hu DK

let sum = (...values) => { 
    let sum = 0; 
    values.forEach((item) => { sum += item; }); 
    return sum; 
}
sum(1,2,3,4,5); // 15

箭头函数的this是固定的，继承自外围作用域（词法作用域），是定义时的所在对象，不是使用时的所在对象。箭头函数本身没有自己的this

var obj = {
    doSth1: function (...values) {
        values.map(item => { console.log(this); });
    },
    doSth2: (item) => { console.log(this); }
}

obj.doSth1(1) // obj
obj.doSth2(1) // window 这个很奇怪

• 使用非箭头函数来处理由object.method()语法调用的方法
• 其它情况全都使用箭头函数

箭头函数不可当作构造函数
箭头函数内部无arguments对象
箭头函数不可以使用yield命令

尾递归优化
函数调用会在内存形成“调用记录”，但若是尾调用，是函数的最后一步操作，则不需要保留外层函数的调用帧

var g = function (x) {
    return x;
}
var f = function () {
    let a = 1;
    let b = 2;
    return g(a * b);
}

f(); // =>
g(2);

采用了尾调用的尾递归，可以实现尾递归优化，从而减少递归的溢出。
ES6中实现了尾递归优化（尾调用优化）

参考
阮一峰-ECMAScript6 Function