函数的扩展
函数参数的默认值
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。
let x = 99;
function foo(p = x + 1) {
console.log(p);
}
foo() // 100
x = 100;
foo() // 101
参数p的默认值是x + 1。这时，每次调用函数foo，都会重新计算x + 1，而不是默认p等于 100。
通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。
// 只有传参是 undefined 默认值才生效
function f(x, y = 5, z) {
return [x, y, z];
}
f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]
函数的length属性
函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
这是因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的 rest 参数也不会计入length属性。
(function(...args) {}).length // 0
如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1
作用域
let foo = 'outer';
function bar(func = () => foo) {
let foo = 'inner';
console.log(func());
}
bar(); // outer
函数bar的参数func的默认值是一个匿名函数，返回值为变量foo。这个匿名函数中并没有定义变量foo，所以foo指向外层的全局变量foo，因此输出outer。
var x = 1;
function foo(x, y = function() { x = 2; }) {
var x = 3;
y();
console.log(x);
}
foo() // 3
x // 1
函数foo的参数形成一个单独作用域。这个作用域里面，首先声明了变量x，然后声明了变量y，y的默认值是一个匿名函数。这个匿名函数内部的变量x，指向同一个作用域的第一个参数x。
rest参数
// arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。
注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错
// 报错
function f(a, ...b, c) {
// ...
}
严格模式
ES2016规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。
箭头函数
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
this对象的指向是可变的，但是在箭头函数中，它是固定的。
function foo() {
console.log(this); // {id : 42}
setTimeout(() => {
console.log('id:', this.id);
}, 100);
// 箭头函数导致this总是指向函数定义生效时所在的对象 （永远指向外面的this）
}
var id = 21;
foo.call({ id: 42 });
// id: 42
上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。
var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);
// 如果不是箭头函数 this指向document
},
doSomething: function(type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
箭头函数中不存在arguments、super、new.target
function foo() {
setTimeout(() => {
console.log('args:', arguments);
}, 100);
}
foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]
// 这里的arguments，其实是函数foo的arguments变量。
// 箭头函数中不存在arguments
尾调用优化
什么是尾调用
尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。
function f(x){
return g(x);
}
以下三种情况，都不属于尾调用。
// 情况一
function f(x){
let y = g(x);
return y;
}
// 情况二
function f(x){
return g(x) + 1;
}
// 情况三
function f(x){
g(x);
}
// 情况三等同于 g(x); return undefined;
// 尾调用不一定出现在函数尾部，只要是最后一步操作即可。
function f(x) {
if (x > 0) {
return m(x)
}
return n(x);
}
// 函数m和n都属于尾调用，因为它们都是函数f的最后一步操作。
尾调用之所以与其他调用不同，就在于它的特殊的调用位置。
我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）。
尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。(就是C执行完成后不用返回给B了 而是直接返回给A ，因为C的返回本来就是B的最后一步)
function f() {
let m = 1;
let n = 2;
return g(m + n);
}
f();
// 等同于
function f() {
return g(3);
}
f();
// 等同于
g(3);
代码中，如果函数g不是尾调用，函数f就需要保存内部变量m和n的值、g的调用位置等信息。但由于调用g之后，函数f就结束了，所以执行到最后一步，完全可以删除f(x)的调用帧，只保留g(3)的调用帧。
这就叫做“尾调用优化”（Tail call optimization），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。
注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。
尾递归
函数调用自身，称为递归。如果尾调用自身，就称为尾递归。
递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。
// 阶乘
function fn(n) {
if (n === 1) return 1;
return n * fn(n - 1);
}
fn(5) // 120
// 斐波那契
function fn2 (n) {
if ( n <= 1 ) {return 1};
return fn2(n - 1) + fn2(n - 2);
}
fn2(10) // 89
fn2(100) // 超时
fn2(500) // 超时
上面代码是一个阶乘函数，计算n的阶乘，最多需要保存n个调用记录，复杂度 O(n)
如果改写成尾递归，只保留一个调用记录，复杂度 O(1) 。
function fn(n, total) {
if (n === 1) return total;
return fn(n - 1, n * total);
}
fn(5, 1) // 120
function fn2 (n , ac1 = 1 , ac2 = 1) {
if( n <= 1 ) {return ac2};
return fn2 (n - 1, ac2, ac1 + ac2);
}
fn2(100) // 573147844013817200000
fn2(1000) // 7.0330367711422765e+208
fn2(10000) // Infinity
递归函数的改写
function fn2(n, total) {
if (n === 1) return total;
return fn2(n - 1, n * total);
}
function factorial(n) {
return fn2(n, 1);
}
factorial(5) // 120
// ES6 的函数默认值。
function fn3(n, total = 1) {
if (n === 1) return total;
return fn3(n - 1, n * total);
}
fn3(5) // 120
ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。这是因为在正常模式下，函数内部有两个变量，可以跟踪函数的调用栈。
func.arguments：返回调用时函数的参数。
func.caller：返回调用当前函数的那个函数。
尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。
尾递归优化的实现
尾递归优化只在严格模式下生效，那么正常模式下，或者那些不支持该功能的环境中，有没有办法也使用尾递归优化呢？回答是可以的，就是自己实现尾递归优化。
它的原理非常简单。尾递归之所以需要优化，原因是调用栈太多，造成溢出，那么只要减少调用栈，就不会溢出。怎么做可以减少调用栈呢？就是采用“循环”换掉“递归”。
function sum(x, y) {
if (y > 0) {
return sum(x + 1, y - 1);
} else {
return x;
}
}
sum(1, 100000)
// Uncaught RangeError: Maximum call stack size exceeded(…)
sum是一个递归函数，参数x是需要累加的值，参数y控制递归次数。一旦指定sum递归 100000 次，就会报错，提示超出调用栈的最大次数。
蹦床函数（trampoline）可以将递归执行转为循环执行。
function trampoline(f) {
while (f && f instanceof Function) {
f = f(); // 调用f() 返回一个函数 这个循环就会一直执行
// 当需要接受的时候返回正确的结果 不再返回一个函数 while循环就会结束
// 就会执行到下面的return 返回正确的结果
}
return f;
}
上面就是蹦床函数的一个实现，它接受一个函数f作为参数。只要f执行后返回一个函数，就继续执行。注意，这里是返回一个函数，然后执行该函数，而不是函数里面调用函数，这样就避免了递归执行，从而就消除了调用栈过大的问题。
然后，要做的就是将原来的递归函数，改写为每一步返回另一个函数。
function sum(x, y) {
if (y > 0) {
// y大于0的时候一直返回一个函数 上面while循环就会一直循环
return sum.bind(null, x + 1, y - 1);
} else {
// y不再大于0 即循环停止的条件 返回想要的值不再是一个函数 终止上面的while循环
return x;
}
}
trampoline(sum(1, 100000))
蹦床函数并不是真正的尾递归优化，下面的实现才是。
function tco(f) {
var value;
var active = false;
var accumulated = [];
return function accumulator() {
accumulated.push(arguments); // [1,100000]
if (!active) {
active = true;
while (accumulated.length) {
// 调用shift会将accumulated的length变为0
value = f.apply(this, accumulated.shift()); // [1,100000]
// f.apply(this, accumulated.shift()); 调用的就是sum函数 将1，100000传进去
// sum中又调用sum 将 [2, 99999]当做参数传入 上面 arguments又接受到[2, 99999] 又转给 accumulated
// 每次sum递归调用的时候 函数都执行在while循环中 其中active 永远是true 所以在sum调用的时候 if语句永远不会执行
// 每次相当于 return undefined
// 当满足结束条件 y <= 0的时候 sum函数不再调用它自身 而是直接返回正确的值x
// 这个时候accumulated.shift()再一次执行 将accumulated置空 结束while循环
// 递归的时候 accumulated.shift() 也置空了accumulated ，但是 apply 调用的再次调用了 sum 函数
// accumulated.push(arguments); 这个push语句一直在执行。 sum函数不再递归 这句就不再执行了 while就结束了
}
active = false;
return value;
}
};
}
var sum = tco(function(x, y) {
if (y > 0) {
return sum(x + 1, y - 1)
}
else {
return x
}
});
sum(1, 100000)
// 100001
上面代码中，tco函数是尾递归优化的实现，它的奥妙就在于状态变量active。默认情况下，这个变量是不激活的。一旦进入尾递归优化的过程，这个变量就激活了。然后，每一轮递归sum返回的都是undefined，所以就避免了递归执行；而accumulated数组存放每一轮sum执行的参数，总是有值的，这就保证了accumulator函数内部的while循环总是会执行。这样就很巧妙地将“递归”改成了“循环”，而后一轮的参数会取代前一轮的参数，保证了调用栈只有一层。
网友评论