1. 函数参数的默认值
ES6之前我们只能用下列代码达到「默认值」效果：
function log(x, y) {
y = y || 'World';
return x + '' " + y;
}
log('Hello') // 'Hello World'
log('Hello', 'China') // 'Hello China'
log('Hello', '') // 'Hello World'
但是有个「缺点」，如果y赋值了，但是对应的布尔值为「false」的时候，默认值不起作用。所以我们要多加一个判断。
if( typeof y === undefined) {
y = 'World';
}
不过在ES6中，我们就不用那么麻烦了。
function log(x, y = 'World') {
return x + '' " + y;
}
log('Hello') // 'Hello World'
log('Hello', 'China') // 'Hello China'
log('Hello', '') // 'Hello '
「默认值x生效，必须是该值仅仅为undefined的时候」
还有一个容易忽略的地方，参数默认值不是传值的，而是每次都重新计算默认值的表达式的值。也就是说，函数的默认值是「惰性求值」的。
let x = 99;
function foo(p = x + 1) {
console.log(p);
}
foo() // 100
x = 100;
foo() // 101
2. 与解构赋值默认值结合使用
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined
上述代码的foo函数，只是使用了对象的解构赋值默认值，没有使用函数的默认值，只有当foo函数的参数是一个对象的时候，变量x和y才会通过解构赋值生效，如果foo函数没有提供参数，变量x和y就不会生成，故而报错。通过提供函数的默认值，可以避免此错误。
function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // undefined 5
我们来比较下面两种写法：
function m1({ x = 0, y = 0} = {}) {
return [x, y];
}
function m2({x, y} = {x: 0, y: 0}) {
return [x, y];
}
上述代码中，都设置了默认值，区别是：
m1：函数参数的默认值是「空对象」，但是设置了对象解构赋值的默认值。
m2：函数参数的默认值是一个具有具体属性的对象，而没有设置对象解构赋值的默认值。
// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]
// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]
// x 有值，y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]
// x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]
m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]
3. 作用域
一旦设置了函数的默认值，函数进行声明初始化时，参数会「单独形成一个作用域」。等到初始化结束，这个「作用域」就会消失。
var x = 1;
function f(x, y = x) {
console.log(y);
}
f(2) // 2
上面代码中，函数f调用时，参数「y = x」单独形成一个「作用域」，这个「作用域」里默认值x指向「函数第一个参数x」，而不是「全局变量x」，所以最后输出2.
let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f() // 1
此时函数变量y的默认值x无定义，所以指向函数外的「全局变量x」。故最后输出1。
下面这么写会报错。
var x = 1;
function foo(x = x) {
// ...
}
foo() // ReferenceError: x is not defined
上面函数的参数是「x = x」，单独形成一个「作用域」。其实执行的是「let x = x」，由于「暂时性死区」问题，这行代码会报错「x未定义」。
我们看一个更复杂的例子：
var x = 1;
function foo(x, y = function() { x = 2; }) {
var x = 3;
y();
console.log(x);
}
foo() // 3
x // 1
函数foo中参数y的默认值是一个「函数」，「函数」里的「x = 2」，其实这个x是指向第一个参数的，foo函数里面又声明一个x，「该变量与foo函数第一个参数x在不同的作用域中」，所以不是同一个变量，y()执行后，foo函数内部变量x和全局变量x没有变。
如果把「var」去掉。
var x = 1;
function foo(x, y = function() { x = 2; }) {
x = 3;
y();
console.log(x);
}
foo() // 2
x // 1
「x = 3」变成一个赋值语句，操作的是「函数的第一个参数」，该赋值语句执行后，又执行了「y()」，也是对「函数的第一个参数」的操作，所以foo函数内的log输出2。
4. rest参数（重点）
用于获取函数的多余参数，这样就不需要使用「arguments」对象了。rest 参数搭配的变量是一个「数组」，该变量将多余的参数放入数组中。
举例：
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
下面是用「rest」参数代替「arguments」变量的例子。
//「arguments」变量写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// 「rest」参数写法
const sortNumbers = (...numbers) => numbers.sort();
5. 箭头函数（重点）
一个用处是简化回调函数。
// 正常函数写法
var result = values.sort(function (a, b) {
return a - b;
});
// 使用箭头函数
var result = values.sort((a, b) => a - b);
箭头函数和rest参数的结合.
const numbers = (...numbers) => numbers;
numbers(1, 2, 3, 4); // [1, 2, 3, 4];
const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4); // [1, [2, 3, 4]]
6. 箭头函数使用注意点（重点）
- 函数体内的「this」对象，就是「定义时所在的对象」，而不是「使用时所在的对象」。
- 不可以当作「构造函数」，也就是说不可以用「new」命令。
- 不可以用「arguments」命令，该对象在函数体内不存在，但是可以用「rest」参数。
- 不可以使用「yield」命令，因此箭头函数不能用作Generator函数。
上面四点中，第一点尤其重要，「this」对象的指向可以改变的，但在箭头函数中，「this」是固定的。
我们来看看这个代码：
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
在foo函数中有一个setTimeout，里面的参数是一个箭头函数，这个箭头函数的定义生效是在「foo函数生成时」。如果是普通函数，「this」对象此时指向全局对象window，这时就输出21。
此例中，箭头函数导致「this」对象总是指向「函数定义生效时所在的对象」（此例是{id: 42}），所以输出42。
箭头函数可以让setTimeout里面的「this」对象，绑定在「定义时所在的作用域」，而不是「使用时的作用域」。我们看看另一个例子。
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0
上述代码中，Timer函数里定义了两个定时器，分别使用了箭头函数和普通函数。前者的「this」对象绑定在「定义时所在的作用域」（Timer函数），后者的「this」对象绑定在「使用时所在的作用域」（全局对象window）。所以，3100 毫秒之后，「timer.s1」被更新了 3 次，而「timer.s2」一次都没更新。
箭头函数可以让「this」指向固定化，这种特性很有利于封装回调函数。下面是一个例子，DOM 事件的回调函数封装在一个对象里面。
var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);
},
doSomething: function(type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};
上面的代码中，init方法中使用了箭头函数，这导致箭头函数里面的「this」，总是指向「handler对象」。否则「this.doSomething」会报错，因为没有用箭头函数的话，「this」对象指向document对象。
「this」指向的固定化，并不是因为箭头函数内部有绑定「this」的机制，实际原因是「箭头函数根本没有自己的this」，导致「内部的this」就是「外层代码块的this」。正是因为它没有this，所以也就不能用作构造函数。
箭头函数用ES5实现。
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
上述代码中，解释的很清楚，箭头函数里面的「_this」是外层foo函数内的「this」对象。
请问下面有几个「this」？
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
上述代码中，只有一个「this」，就是foo函数的「this」，所以t1，t2，t3输出同样的结果。
7. 尾调用优化
「尾调用」：就是指某个函数的「最后一步」是调用另一个函数。
function f(x){
return g(x);
}
以上代码，函数f的最后一步是调用函数g，这就叫做「尾调用」。
我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）。
尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。
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），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。
「注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。」
function addOne(a){
var one = 1;
function inner(b){
return b + one;
}
return inner(a);
}
上面的函数不会进行尾调用优化，因为内层函数inner用到了外层函数addOne的内部变量one。
8. 尾递归
函数调用自身，称为递归。如果尾调用自身，就称为尾递归。
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
factorial(5) // 120
上面代码是一个阶乘函数，计算n的阶乘，最多需要保存n个调用记录，复杂度 O(n) 。
如果改写成尾递归，只保留一个调用记录，复杂度 O(1) 。
function factorial(n, total) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5, 1) // 120
9. 递归函数的改写
尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。比如上面的例子，阶乘函数 factorial 需要用到一个中间变量total，那就把这个中间变量改写成函数的参数。这样做的缺点就是不太直观，第一眼很难看出来，为什么计算5的阶乘，需要传入两个参数5和1？
两个方法解决。
方法1：再提供一个正常形式的函数。
function tailFactorial(n, total) {
if(n === 1) return total;
return tailFactorial(n-1, n * total);
}
function factorial(n) {
return tailFactorial(n, 1);
}
以上代码还可以用「柯里化」。
function currying(fn, n) {
return function (m) {
return fn.call(this, m, n);
};
}
function tailFactorial(n, total) {
if (n === 1) return total;
return tailFactorial(n - 1, n * total);
}
const factorial = currying(tailFactorial, 1);
factorial(5) // 120
方法2：采用 ES6 的函数默认值
function factorial(n, total = 1) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5) // 120
总结一下，「递归」本质上是一种「循环」操作。纯粹的函数式编程语言没有循环操作命令，所有的循环都用递归实现，这就是为什么尾递归对这些语言极其重要。对于其他支持「尾调用优化」的语言（比如 Lua，ES6），只需要知道循环可以用递归代替，而一旦使用递归，就最好使用尾递归。
10. 严格模式
ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。
这是因为在正常模式下，函数内部有两个变量，可以跟踪函数的调用栈。
- func.arguments：返回调用时函数的参数。
- func.caller：返回调用当前函数的那个函数。
尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。
11. 尾递归优化的实现
尾递归优化只在严格模式下生效，那么正常模式下，或者那些不支持该功能的环境中，有没有办法也使用尾递归优化呢？回答是可以的，就是自己实现尾递归优化。
它的原理非常简单。尾递归之所以需要优化，原因是调用栈太多，造成溢出，那么只要减少调用栈，就不会溢出。怎么做可以减少调用栈呢？就是采用「循环」换掉「递归」。
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();
}
return f;
}
上面就是蹦床函数的一个实现，它接受一个函数f作为参数。只要f执行后返回一个函数，就继续执行。注意，这里是返回一个函数，然后执行该函数，而不是函数里面调用函数，这样就避免了递归执行，从而就消除了调用栈过大的问题。
然后，要做的就是将原来的递归函数，改写为每一步返回另一个函数。
function sum(x, y) {
if (y > 0) {
return sum.bind(null, x + 1, y - 1);
} else {
return x;
}
}
上面代码中，sum函数的每次执行，都会返回自身的另一个版本。
网友评论