ES6新增特性——函数的扩展

芒果茶叶
1,663 阅读9分钟

一、函数参数的默认值

1、基本用法

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

// ES6 之前
function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

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

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

除了简洁，ES6 的写法还有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

注意：

  • 参数变量是默认声明的，所以不能用let或const再次声明。
  • 使用参数默认值时，函数不能有同名参数。
  • 参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。

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

当函数的参数是一个对象，且没提供具体变量时，变量只有通过解构赋值才会生成。如果函数调用时没提供参数，变量就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined 5
foo() // TypeError: Cannot read property 'x' of undefined

// 函数参数默认值与解构赋值默认值结合使用
function foo({x, y = 5} = {}) {
  console.log(x, y);
}
foo() // undefined 5

两者结合后，当函数foo没有参数时，函数参数的默认值{}就会生效，然后才是解构赋值的默认值生效，变量才会取到默认值。

3、参数默认值的位置

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

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

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

4、应用

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

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

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

foo()
// Error: Missing parameter

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

function foo(optional = undefined) { ··· }

二、属性

1、length属性

函数的length属性，返回该函数的参数个数。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0

注意： 指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数（指定默认值参数位置需要是尾参数）。也就是说，指定了默认值后，length属性将失真。

2、name属性

函数的name属性，返回该函数的函数名。

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

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

注意： ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。


三、rest 参数

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

function add(a, ...values) {
  let sum = 0;
  
  for (var val of values) {
    sum += val;
  }
  
  return sum;
}

let a = "a"

add(a, 2, 5, 3)   // 10

下面是一个 rest 参数代替arguments变量的例子。

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

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

上面代码的两种写法，比较后可以发现，rest 参数的写法更自然也更简洁。arguments对象是类似数组的对象。所以为了使用数组的方法，必须使用Array.from先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。

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


四、严格模式

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

ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

两种方法可以规避这种限制。第一种是设定全局性的严格模式，这是合法的。

'use strict';

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

第二种是把函数包在一个无参数的立即执行函数里面。

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

五、箭头函数

1、基本用法

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

var f = v => v;

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

（1）如果箭头函数不需要参数，就使用一个圆括号代表参数部分。只有一个参数时，可以省略圆括号。

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

var sum = n => n * 2;
// 等同于
var sum = function(n) {
  return n * 2;
};

（2）如果箭头函数只有一行语句，可以不用写return和大括号。

var sum = (num1, num2) => num1 + num2;

（3）如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

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

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

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

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

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

（5）箭头函数可以与 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]]

2、箭头函数与普通函数的区别

  1. 箭头函数更简洁；

  2. 箭头函数没有自己的 this ，没有 prototype，也没有自己的 arguments、super、new.target；

  3. 箭头函数可以继承上层作用域中的 this，但是继承来的 this 指向永远不能改变，call()、apply()、bind() 方法都不能改变箭头函数的 this 指向；

  4. 箭头函数不能作为构造函数使用；

  5. 箭头函数不能用作 Generator 函数，不能使用 yeild 关键字。

3、不适用箭头函数的场合

（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就会动态指向被点击的按钮对象。

（3）其他场合

如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。


六、尾调用优化

1、什么是尾调用？

尾调用（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;
}

// 情况三：调用函数 g 之后，还有 return 操作。
function f(x){
  g(x);
}
// 等同于
function f(x){
  g(x);
  return undefined;
}

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

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

上面代码中，函数m和n都属于尾调用，因为它们都是函数f的最后一步操作。

2、尾调用优化

“尾调用优化”（Tail call optimization），即只保留内层函数的调用帧。

我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（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)的调用帧。

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

3、尾递归

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

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

4、严格模式

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


七、其他新增内容

函数除了以上新增特性外，还有函数参数的尾逗号，Function.prototype.toString()，catch 命令的参数省略，具体可点击查看。

avatar
文章
阅读
粉丝