ECMAScript 6 学习笔记----函数的扩展

1.函数参数的默认值

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

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

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello                

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

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

的参数是一个对象时，变量

x

和

y

才会通过解构赋值而生成。如果函数

foo

调用时参数不是对象，变量

x

和

y

就不会生成，从而报错。如果参数对象没有

y

属性，

y

的默认值5才会生效。

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

函数的length属性

指定了默认值以后，函数的

length

属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，

length

属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2                

作用域

如果参数默认值是一个变量，则该变量所处的作用域，与其他变量的作用域规则是一样的，即先是当前函数的作用域，然后才是全局作用域。

应用：

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

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

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

foo()
// Error: Missing parameter
                

上面代码的

foo

函数，如果调用的时候没有参数，就会调用默认值

throwIfMissing

函数，从而抛出一个错误。

2.rest参数

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

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

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

  return sum;
}

add(2, 5, 3) // 10                

rest参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。

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

函数的length属性，不包括rest参数。

3.扩展运算符

扩展运算符（spread）是三个点（

...

）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42                

代替数组的apply方法

由于扩展运算符可以展开数组，所以不再需要

apply

方法，将数组转为函数的参数了。

// ES5的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f(...args);                

4.name属性

函数的

name

属性，返回该函数的函数名。这个属性早就被浏览器广泛支持，但是直到ES6，才将其写入了标准。

5.箭头函数 =>

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

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

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

return

语句返回。

箭头函数有几个使用注意点。

（1）函数体内的

this

对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用

new

命令，否则会抛出一个错误。

（3）不可以使用

arguments

对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

（4）不可以使用

yield

命令，因此箭头函数不能用作Generator函数。

6.函数绑定

ES7有一个提案，用函数绑定运算符-双冒号::，取代

call

、

apply

、

bind

调用。

7.尾调用优化

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

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

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

尾递归

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

学习文档：ECMAScript 入门，函数的扩展