ES6_函数的扩展

函数的扩展

函数参数的默认值

基本用法

ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

  function Point(x = 0,y = 0) {
    this.x = x;
    this.y = y;
  }
  const p = new Point()
  console.log(p)

参数变量是默认声明的，所以不能用let或const再次声明。

使用参数默认值时，函数不能有同名参数

参数默认值不是传值的，而是每次都重新计算吗默认值表达式的值——参数默认值是惰性求值的。

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

  let a = foo()
  let b = foo()
  console.log(a,b)//100 100

与解构默认值结合使用

只有当函数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()//Uncaught TypeError: Cannot destructure property `x` of 'undefined' or 'null'.
  
  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() // [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]

参数默认值的位置

通常情况下，定义了默认值的参数，应该是函数的尾参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的

略的。

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
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属性将失真。
length属性的含义：该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的rest参数也不会计入length属性。

(function(...args) {}).length // 0

如果设置了默认值的参数不是尾参数，呢么length属性也不再计入后面的参数了。

作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。

应用

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

可以将参数默认值设为undefined，表明这个参数是可以省略的。

rest参数

ES6引入rest参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。
rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

  function add(...values) {
    let sum = 0;
    for(var val of values){
      sum +=val
    }
    console.log(values)//【2，5，3】
    return sum
  }

  add(2,5,3)//10

利用rest参数，可以向该函数传入任意数目的参数

例子：rest参数代替arguments变量的例子

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

arguments对象不是数组，而是一个类似数组的对象。为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest是一个真正的数组，数组特有的方法都可以使用。
例子：利用rest参数改写数组push方法的例子。

  function push(array,...items) {
    items.forEach(function(item) {
      array.push(item);
      console.log(item);
    })
  }

  var a = []
  push(a,1,2,3)

注意：rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错
函数的length属性，不包括rest参数。

严格模式

从ES5开始，函数内部可以设定为严格模式。

function doSomething(a, b) {
  'use strict';
  // code
}

ES2016做了一些修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显示设定为严格模式，否则会报错。
规定的原因：函数内部的严格模式，同时适用于函数体和函数参数，但是，函数执行的时候，先执行函数参数，然后再执行函数体。但只有从函数体之中，才能知道参数是否应该以严格模式执行，但是参数却应该优先于函数体执行。
规避方法：

1. 设定全局性的严格模式
2. 把函数包在一个无参数的立即执行函数里

  const doSomething = (function () {
    'use strict';
    return function (value = 42){
      return value
    }
  }())

name属性

函数的name属性，返回该函数的函数名。
ES5与ES6的区别：
如果将一个匿名函数赋值给一个变量，ES5的name属性，会返回空字符串，而ES6的name属性会返回实际的函数名。

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

如果将一个具名函数赋值给一个变量，则ES5和ES6的name属性都返回这个具名函数原本的名字。
Function构造函数返回的函数实例，name属性的值为anonymous。
bind返回的函数，name属性会加上bound前缀。

箭头函数

基本用法

用“箭头”（=>）定义函数
如果箭头函数不需要参数或需要多个参数，就用一个圆括号代表参数部分。
如果箭头函数的代码部分多于一条语句，就要用大括号将它们括起来，并且使用return语句返回。
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则报错。
使用注意点：

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
2. 不可以当做构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest函数替代。
4. 不可以使用yield命令，因此箭头函数不能用作Generator函数。

  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的this指向绑定定义时所在的作用域（Timer函数），s2的this指向运行时所在的作用域（即全局对象）

箭头函数可以让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对象。
箭头函数转成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，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target

箭头函数没有自己的this，所以不能用call（）、apply（）、bind（）。

不适用场合

箭头函数使得this从“动态”变成“静态”。

1. 定义对象的方法，且该方法内部包括this

const cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}

2. 需要动态使用this的场合

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通的函数，this就会动态指向被点击的按钮对象。

尾调用优化

尾调用（Tail Call）是函数式编程的一个重要概念：指某个函数的最后一步是调用另一个函数。

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

不属于尾调用的三种情况：

// 情况一调用函数g之后，还有赋值操作，所以不属于尾调用
function f(x){
  let y = g(x);
  return y;
}

// 情况二于调用后还有操作，即使写在一行内
function f(x){
  return g(x) + 1;
}

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

尾调用不一定出现在函数尾部，只要是最后一步操作即可。

function f(x) {
  if (x > 0) {
    return m(x)
  }
  return n(x);
}

尾调用优化

函数调用会在内存中形成一个“调用记录”，又称“调用帧”（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），即只保留内层函数的调用帧。
注意：只有不再用到外部函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。

尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。
递归非常耗费你内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出 ”错误。

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

递归函数的改写

方法一：在尾递归函数之外，再提供一个正常形式的函数。

  function tailFactorial(n, total) {
    if(n === 1) return total;
    return tailFactorial(n - 1, n * total)
  }
  function factorial(n) {
    return tailFactorial(n,1)
  }
  let a = factorial(5)
  console.log(a)

函数式编程有一个概念——柯里化（currying），意思是将多参数的函数转换成单参数的形式。

  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);
  let a = factorial(5)

方法二：采用ES6的函数默认值

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

严格模式

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(…)

蹦床函数（trampoline）可以将递归执行转为循环执行

  function trampoline(f) {
    while(f && f instanceof Function) {
      f = f();
    }
    return f;
  }
  function sum(x,y) {
    // debugger
    if(y > 0) {
      return sum.bind(null, x+1, y-1)
    }else{
      return x;
    }
  }

  trampoline(sum(1,10000))//10001

这边的蹦床函数，返回的是一个函数，然后执行该函数，而不是函数里面调用函数，这样就避免了递归执行，从而消除了调用栈过大的问题。

真正尾调用优化

  function tco(f) {
    var value
    var active = false
    var accumulated = []

    return function accumulator() {
      accumulated.push(arguments)
      if(!active){
        active = true
        while(accumulated.length) {
          value = f.apply(this, accumulated.shift());
        }
        active = false
        return value
      }
    }
  }

  var sum = tco(function(x,y) {
    if(y>0){
      return sum(x+1, y-1)
    }else{
      return x
    }
  })

  sum(1,10)

默认情况下，active状态变量不激活，一旦进入尾递归优化的过程，变量就被激活额，每一轮递归sum返回的都是undefined，所以避免递归执行，而accumulated数组存放每一轮sum执行的参数，保证accumulator函数内部的while循环总会执行，这样就巧妙地将‘递归’改成‘循环。后一轮的参数会取代前一轮的参数，保证了调用栈只有一层。’

函数参数的尾逗号

ES2017允许函数的最后一个参数有尾逗号（trailing comma）

function clownsEverywhere(
  param1,
  param2,
) { /* ... */ }

clownsEverywhere(
  'foo',
  'bar',
);

Function.prototype.toString()

toString()会返回一模一样的原始代码（之前会省略注释和空格）

catch命令的参数省略

ES2019允许catch语句省略参数

try {
  // ...
} catch {
  // ...
}