03 ES6标准入门(函数的扩展)

思考题

第一道：

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });

第二道

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);

第三道

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()();
var t2 = f().call({id: 3})();
var t3 = f()().call({id: 4});

第四道：

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo();
x;

函数参数默认值

原来没有太意识到，原来的给参数赋默认值存的问题：

function test(a) {
  a = a || 'Hello';
  alert(a)
}
test(0)

如果参数是0或者false，就没有办法成功了。

改用ES6的方式就可以了

function test(a = 'Hello') {
  alert(a)
}
test(false)

注意，参数默认值不是传值的，每次都需要重新计算

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101

默认值与解构赋值结合

function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

里面有两重默认赋值：
1. 首先 { body = '', method = 'GET', headers = {} } = {} 右边的 {} 是做为函数参数的默认值，如果函数没有提供参数，它就会生效
2. 而等号左边那一坨，是作为对象结构赋值的默认值，当函数没有提供参数时，相当于左边这一坨要给一个空对象进行赋值，如果函数参数有值并且为对象，则左边这一坨解构赋值默认值对函数参数进行

作为练习，请问下面两种写法有什么差别？

// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

上面两种写法都对函数的参数设定了默认值，区别是写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值；写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值。

注意解构赋值失败时，也可以取其默认值

// 函数没有参数的情况
m1() 
m2() 

// x 和 y 都有值的情况
m1({x: 3, y: 8}) 
m2({x: 3, y: 8}) 

// x 有值，y 无值的情况
m1({x: 3}) 
m2({x: 3}) 

// x 和 y 都无值的情况
m1({}) 
m2({})

m1({z: 3})
m2({z: 3}) 

参数默认值位置

一般放在最后，否则参数不能省略，必须显示的传入undefined（null不行）

function test(a = 5, b) {
  return a + b
}
test(, 5); // 报错
test(undefined, 5); // 10
test(null, 5); // 5

函数的length

length属性的含义是，该函数预期传入的参数个数。

某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，rest 参数也不会计入 length 属性。

作用域

默认参数的会生成一个独立的、在函数内部作用域之上的作用域

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面代码中，函数f调用时，参数y = x形成一个单独的作用域。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x。

思考题：

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo();
x;

这道题目中的全局的 x 之所以没有被改变，是因为在函数参数作用域中定义了 x，所以 y 改变的是函数参数作用域中的 x， 如果将函数参数中定义的 x 去掉，全局的 x 就会被改变了

执行时机

注意：参数的默认值不是在定义时执行，而是在运行时执行。

function test(a=function(){alert(123)}() {}
test(5);

此时alert并不会执行

这个特性让我们可以用默认参数来定义某个参数是必须提供的，否则就报错

function test(a=function(){throw new Error('Missing parameter a')}()) {}
test();

rest参数

rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

箭头函数

箭头函数代码块部分如果多余一条语句，就要使用大括号括起来，并使用return语句返回

var sum = (num1, num2) => { return num1 + num2; }

如果返回值是一个对象，必须加上小括号

let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数的注意点：
1. 函数体内的this对象，就是定义时所在对象，而不是使用时所在对象
2. 不能用作构造函数
3. 没有arguments对象，可以使用rest对象
4. 不能使用yield命令，不能用作generator函数

箭头函数可以让this指向固定化

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，也就导致了bind/call/apply无效

尾调用优化

尾调用值得就是某个函数的最后一步是调用另一个函数，并且仅仅是调用一个函数，不能对此函数进行赋值、计算等操作

// 情况一
function f(x){
  let y = g(x);
  return y;
}

// 情况二
function f(x){
  return g(x) + 1;
}

// 情况三
function f(x){
  g(x);
}

上面的三种情况都不属于尾调用

function f(x){
  return g(x);
}

上面的情况属于尾调用

尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。

注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。

function addOne(a){
  var one = 1;
  function inner(b){
    return b + one;
  }
  return inner(a);
}

上面的函数不会进行尾调用优化，因为内层函数inner用到了外层函数addOne的内部变量one。

尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

没有进行尾递归优化：计算n的阶乘，最多需要保存n个调用记录，复杂度 O(n)

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

如果改写成尾递归，只保留一个调用记录，复杂度 O(1) 。

function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5, 1) // 120

求和函数：

// 不是尾递归
function sum(n) {
  if (n === 1) {
    return 1;
  }
  return n + sum(n - 1)
}

// 改造为尾递归
function sumNice(n, total = 0) {
  if (n === 0) {
    return total;
  }
  return sumNice(n - 1, n + total)
}

递归函数的改写

尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。

做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。

尾递归优化的实现

目标就是减少调用栈，做法就是用“循环”代替“递归”

实践中，利用循环代替递归，而一旦使用递归，就最好使用尾递归。