【ES6】函数的扩展
ES6 函数的扩展
一、允许为函数指定默认值
好处：
- 参数显而易见。
- 有利于代码优化。在对外接口中彻底拿掉这个参数，不会影响到旧代码的运行。
使用参数默认值时，函数不能有同名参数。
function func(x, x, y) {} // 不报错
function func2(x, x, y = 1) {} // 报错
参数默认值在每次调用该函数时，都会重新计算默认值（参数默认值是惰性求值的）。
let x = 1;
function func(y = x + 1) {
console.log(y);
}
func(); // 2
x = 100;
func(); // 101
惰性求值：即延迟求值，表达式不会在它被绑定到变量之后就立即求值，而是等用到时再求值。上述代码中，函数参数 y 的默认值是 x + 1 , 当调用函数 func 时，会重新计算默认值，并不会在调用前就计算好默认值。
如果最后一个参数指定默认值，在调用函数时，这个尾参数是可以省略的。如果非尾部的参数设置了默认值，在调用函数时，这个参数没法省略的，除非使用 undefined（ undefined 能触发默认值）。
function func(a, x = 1, y) {
console.log(a, x, y);
}
func(0, ,3); // 报错
func(0, undefined, 3); // 0 1 3
指定了默认值后，函数的 length 属性将失真。length 属性的返回值，等于函数的参数个数减去指定了默认值的参数个数。遇到有参数指定默认值，其后的参数个数将不再计入 length 中。
(function func(a, b = 1, c) {}.length); // 1
二、参数默认值与结构赋值默认值
小练习（吃透它）：
// 写法一：函数参数的默认值是空对象，但是设置了对象解构赋值的默认值
function m1({ x = 0, y = 0 } = {}) {
return [x, y];
}
// 写法二：函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值
function m2({ x, y } = { x: 0, y: 0 }) {
return [x, y];
}
// 1. 函数没有参数的情况
m1(); // [0, 0]（参数为空，取参数默认值：{} , 解构：x = undifined , y = undefined , 因给 x , y 设置了默认值，于是 x = 1 , y = 1 ）
m2(); // [0, 0]（参数为空，取参数默认值：{ x: 0, y: 0 } , 解构： x = 0 , y = 0 ）
// 2. x 和 y 都有值的情况
m1({ x: 3, y: 8 }); // [3, 8]（参数不为空： { x: 3, y: 8 } , 不会取到参数默认值：{} , 解构：x = 3 , y = 8 ）
m2({ x: 3, y: 8 }); // [3, 8]（参数不为空： { x: 3, y: 8 } , 不会取到参数默认值：{ x: 0, y: 0 } , 解构：x = 3 , y = 8 ）
// 3. x 有值，y 无值的情况
m1({ x: 3 }); // [3, 0]（参数不为空：{ x: 3 } , 不会取到参数默认值：{} , 解构：x = 3 , y = undefined , 因给 x , y 设置了默认值，于是 x = 3 , y = 0 ）
m2({ x: 3 }); // [3, undefined]（参数不为空：{ x: 3 } , 不会取到参数默认值：{ x: 0, y: 0 } , 解构：x = 3 , y = undefined ）
// 4. x 和 y 都无值的情况
m1({}); // [0, 0]（参数不为空：{} , 不会取到参数默认值：{} , 解构：x = undefined , y = undefined , 因给 x , y 设置了默认值，于是 x = 0 , y = 0 ）
m2({}); // [undefined, undefined]（参数不为空：{} , 不会取到参数默认值：{ x: 0, y: 0 } , 解构：x = undefined , y = undefined ）
// 5. 将一个不含有 x 和 y 属性的对象作为参数
m1({ z: 3 }); // [0, 0]（参数不为空：{ z: 3 } , 不会取到参数默认值：{} , 解构：x = undefined , y = undefined , 因给 x , y 设置了默认值，于是 x = 1 , y = 1 ）
m2({ z: 3 }); // [undefined, undefined]（参数不为空：{ z: 3 } , 不会取到参数默认值：{ x: 0, y: 0 } , 解构：x = undefined , y = undefined ）
第 5 种情况中，函数参数为 { z: 3} , 对其解构时，其中 z 不是变量，只是模式，只有 x 和 y 才是变量，如果打印 z 会报错：z is not defined 。
三、作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。
这种语法行为，在不设置参数默认值时，是不会出现的。
let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f(); // 1
函数 f 调用时，参数 y = x 形成一个单独的作用域。这个作用域里面，let y = x （变量 x 本身没有定义，所以指向外层的全局变量 x ）。函数调用时，函数体内部的局部变量 x 影响不到默认值变量 x （如果此时，全局变量 x 不存在，就会报错）。
var x = 1;
function foo(x = x) {
// ...
}
foo(); // ReferenceError: Cannot access 'x' before initialization
参数 x = x 形成一个单独作用域。实际执行的是 let x = x ，将变量 x 绑定在这个区块内，在该作用域外使用 x 就会报错（暂时性死区）。
四、rest 参数（...变量名）
用于获取函数的多余参数，不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
rest 参数是一个真正的数组，数组特有的方法都可以使用。它只能作为函数中最后一个参数。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3); // 10
rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。
(function (...a) {}.length); // 0
(function (a, ...b) {}.length); // 1
函数的 length 属性，不包括 rest 参数。
五、箭头函数
简化回调函数
let f = () => 5;
// 以上箭头函数等同于：
let f = function () {
return 5;
};
不适用场景：
- 定义对象的方法，且该方法内部包括 this
const obj = {
age: 18,
growing: function () {
this.age++;
console.log(this.age);
},
};
obj.age; // 18
obj.growing(); // 19
如果将对象 obj 中的 growing 方法改为箭头函数形式，其中的 this 指向的就是对象 obj 外（全局对象）的 this , this.age 将不再指向对象 obj 中的 age 属性了。这是因为对象不构成单独作用域，箭头函数在定义时就是全局作用域。
-
需要动态 this 也不适合使用箭头函数（箭头函数 this 指向固定化）
-
函数体复杂，使用普通函数可读性更高
其他：
一、尾调用优化
尾调用（Tail call）：指某个函数的最后一步是调用另一个函数。尾调用不一定出现在函数尾部，只要是最后一步操作即可。
// 尾调用
function f(x) {
return g(x);
}
// 非尾调用
function f2(x) {
g(x);
}
// f2 为什么不属于尾调用？实际上 f2 等同于：
function f2(x) {
g(x);
return undefined;
}
尾调用优化（Tail call optimization）：即只保留内层函数的调用帧。可大大节省内存。
注意：
-
只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。
-
目前只有 Safari 浏览器支持尾调用优化，Chrome 和 Firefox 都不支持。
-
尾调用模式仅在严格模式下生效。
尾递归：尾调用自身。
二、 ES2017 允许函数的最后一个参数有尾逗号
三、 ES2019 修改了 toString() 方法，明确要求返回一模一样的原始代码（包括注释和空格）
四、 try...catch 中的 catch 命令的参数省略
浙公网安备 33010602011771号