es6学习-函数扩展

函数的扩展

函数参数的默认值

基本用法

ES6提供了函数的指定默认值的写法，例子如下

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

const p = new Point();
p // { x: 0, y: 0 }

优点：①读代码的人容易知道哪些参数可以省略。②以后代码优化，把这参数去掉也不会导致代码无法运行。

有几个注意点

①参数是默认声明，不能使用let或const再次声明

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

②函数参数不能有同名参数

// 不报错
function foo(x, x, y) {
  // ...
}

// 报错
function foo(x, x, y = 1) {
  // ...
}
// SyntaxError: Duplicate parameter name not allowed in this context

③参数的值是重新计算默认值的表达式的值。也就是说，参数是惰性求值

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

foo() // 100

x = 100;
foo() // 101

与解构赋值默认值结合使用

参数默认值可以与解构赋值结合起来使用，实现参数的自动赋值以及对一些配置项进行省略。

例子如下

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

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

第一种写法由于第二种，因为第一种写法当传过来的参数为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属性，将放回没有指定默认值的参数个数，所以它失准了。

作用域

设置了参数默认值后，在函数进行声明初始化时，参数会形成一个单独的作用域，初始化结束都，作用域小时。

例子

var x = 1;

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

f(2) // 2

上面例子，f函数会有参数作用域，所以y是赋予传进来的2，而不是1.

再看一个例子

let x = 1;

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

f() // 1

例子中，参数作用域没有声明x，所以它会到外层的全局作用域中找到x=1赋值给y，如果外层作用域找不到x会报错。

应用

使用参数默认值，我们可以指定一个参数不得省略，省略就报错，如下例子

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

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

foo()
// Error: Missing parameter

把参数的默认值设定为一个抛出错误的函数，如果调用这个函数的时候没有传这个参数，这个参数就会自动报错，而如果你想忽略某个参数，就把参数默认设置为undefined

rest参数

es6引入了rest参数(形式为...变量名),作用是获取多余的函数，它与一个数组搭配起来，多余的变量就是放入这个数组中

例子如下

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面是实现一个加法的函数，参数可以传任意个，都会存进values里面

另外，可以用rest代替arguments变量，使代码更加简洁。

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

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

注意：rest参数之后不能有其他参数

严格模式

es6开始，如果函数参数使用了默认值，解构赋值，或者扩展运算符，那么函数内部就不能设定为严格模式，否则会报错。

两种解决办法：设定全局性的严格模式。

'use strict';

function doSomething(a, b = a) {
  // code
}

函数包在一个无参数的立即执行函数中

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

name属性

函数name属性会返回函数名

function foo() {}
foo.name // "foo"

需要注意，如果将一个变量赋值为匿名函数，调用name属性，es5会返回空字符串，es6会返回变量名

Function构造函数返回的函数实例，name属性的值为anonymous。

(new Function).name // "anonymous"

bind返回的函数，name属性值会加上bound前缀。

unction foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

箭头函数

基本用法

ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

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

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

下面是 rest 参数与箭头函数结合的例子。

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

使用注意点

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

其中。第一点想说的是，箭头函数可以让this固定化

例子

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

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

除了this,arguments super new.target在匿名函数中都是不存在的。

箭头函数不适用的场景

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

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

上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。

2. 需要动态this的时候，也不应该使用箭头函数。

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

上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。

尾调用优化

什么是尾调用

尾调用就是指某个函数的最后一步是调用另一个函数。例子如下

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

下面例子不属于尾调用

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

以为它等同于

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

尾调用优化

函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”

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

例子

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)的调用帧

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

注意，目前只有 Safari 浏览器支持尾调用优化，Chrome 和 Firefox 都不支持。

尾递归

尾递归：就是尾调用函数自身。

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

阶乘例子

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

factorial(5) // 120

计算n的阶乘，最多需要保存n个调用记录，复杂度 O(n)

尾递归

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

factorial(5, 1) // 120

只保留一个调用记录，复杂度O(1) 。

递归函数的改写

尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数

但能会造成代码不直观

解决办法

1. 函数式编程柯里化：意思是将多参数的函数转换成单参数的形式。
2. 使用ES6的函数默认值

严格模式

ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。

函数参数的尾逗号

ES2017允许函数的最后一个参数有尾逗号

以前，函数定义或调用时，不允许最后一个参数后面有逗号

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

clownsEverywhere(
  'foo',
  'bar'
);

现在是可以的

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

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

Function.protorype.toString()

ES2019对函数实例的toString()做了修改。

toString()方法返回函数代码本身，以前会省略注释和空格

以前

function /* foo comment */ foo () {}

foo.toString()
// function foo() {}

如今

function /* foo comment */ foo () {}

foo.toString()
// "function /* foo comment */ foo () {}"

catch命令的参数省略

ES2019中，try….catch的catch代码块后面可以不接参数

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

参考资料：阮一峰es6入门