函数参数的默认值

基本用法

在 ES6 之前，不能直接为函数的参数指定默认值，我们一般只能用变通的方法：

1
2
3
4
5
6
7
8
function log(x, y) {
    y = y || 'World';
    return x + '' " + y;
}

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

但是有个缺点，如果 y 赋值了，但是对应的布尔值为false的时候，默认值不起作用。所以我们要多加一个判断。

1
2
3
if (typeof y === undefined) {
  y = 'World'
}

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

1
2
3
4
5
6
7
function log(x, y = 'World') {
    return x + '' " + y;
}

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

如果该值不严格等于undefined，默认值是不会生效的。还有一个容易忽略的地方，参数默认值不是传值的，而是每次都重新计算默认值的表达式的值。也就是说，函数的默认值是惰性求值的。

1
2
3
4
5
6
7
8
9
let x = 99
function foo(p = x + 1) {
  console.log(p)
}

foo() // 100

x = 100
foo() // 101

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

参数默认值可以与解构赋值的默认值结合起来使用

1
2
3
4
5
6
7
8
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 函数，只是使用了对象的解构赋值默认值，没有使用函数的默认值，只有当 foo 函数的参数是一个对象的时候，变量 x 和 y 才会通过解构赋值生效，如果 foo 函数没有提供参数，变量 x 和 y 就不会生成，故而报错。通过提供函数的默认值，可以避免此错误。

1
2
3
4
5
6
7
8
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

我们来比较下面两种写法：

1
2
3
4
5
6
7
function m1({ x = 0, y = 0 } = {}) {
  return [x, y]
}

function m2({ x, y } = { x: 0, y: 0 }) {
  return [x, y]
}

上述代码中，都设置了默认值，区别是：
m1：函数参数的默认值是空对象，但是设置了对象解构赋值的默认值。
m2：函数参数的默认值是一个具有具体属性的对象，而没有设置对象解构赋值的默认值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 函数没有参数的情况
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]

函数的 length 属性

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

1
2
3
function fn1(x = 1, y = 2) {}
fn1(1, 2)
console.log(fn1.length) // 0
1
2
3
function fn2(x, y) {}
fn2(1, 2)
console.log(fn2.length) // 2

参数的默认值位置

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

1
2
3
4
function fn(x=10, y=20) {}
fn（1，2） // 1 2
fn(1) // 1 20
fn(,1) //报错

作用域

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

1
2
3
4
5
6
7
var x = 1

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

f(2) // 2

上面代码中，函数 f 调用时，参数y = x单独形成一个作用域，这个作用域里默认值 x 指向函数第一个参数x，而不是全局变量x，所以最后输出 2.

1
2
3
4
5
6
7
8
let x = 1

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

f() // 1

此时函数变量 y 的默认值 x 无定义，所以指向函数外的全局变量x。故最后输出 1。

下面这么写会报错。

1
2
3
4
5
6
7
var x = 1

function foo(x = x) {
  // ...
}

foo() // ReferenceError: x is not defined

上面函数的参数是x = x，单独形成一个作用域。其实执行的是let x = x ，由于暂时性死区问题，这行代码会报错x未定义 。

我们看一个更复杂的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var x = 1
function foo(
  x,
  y = function () {
    x = 2
  }
) {
  var x = 3
  y()
  console.log(x)
}

foo() // 3
x // 1

函数 foo 中参数 y 的默认值是一个函数，函数 里的x = 2，其实这个 x 是指向第一个参数的，foo 函数里面又声明一个 x，该变量与foo函数第一个参数x在不同的作用域中，所以不是同一个变量，y()执行后，foo 函数内部变量 x 和全局变量 x 没有变。

如果把var去掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var x = 1
function foo(
  x,
  y = function () {
    x = 2
  }
) {
  x = 3
  y()
  console.log(x)
}

foo() // 2
x // 1

x = 3变成一个赋值语句，操作的是函数的第一个参数，该赋值语句执行后，又执行了y() ，也是对函数的第一个参数的操作，所以 foo 函数内的 log 输出 2。

函数的 name 属性

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

1
2
function foo() {}
foo.name // 'foo'

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

1
2
3
4
5
let f = function () {}
// ES5
f.name // ''
// ES6
f.name // 'f'

一些特殊情况：

  • Function 构造函数返回的函数实例，name 属性值为 anonymous
1
new Function().name // 'anonymous'
  • bind 方法返回的函数，name 属性值赋加上 bound 前缀
1
2
function foo() {}
foo.bind({}).name // 'bound foo'
1
;(function () {}.bind({}).name) // 'bound'

rest 参数

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

1
2
3
4
5
6
7
8
9
10
11
function add(...values) {
  let sum = 0

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

  return sum
}

add(2, 5, 3) // 10

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

1
2
3
4
5
6
7
//arguments变量写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort()
}

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

箭头函数

ES6 允许使用箭头定义函数,他的一个用处是简化回调函数

1
2
3
4
5
6
7
// 正常函数写法
var result = values.sort(function (a, b) {
  return a - b
})

// 使用箭头函数
var result = values.sort((a, b) => a - b)

箭头函数和 rest 参数的结合:

1
2
3
4
5
6
7
const numbers = (...numbers) => numbers

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

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

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

箭头函数使用注意点

  • 函数体内的this 对象，就是定义时所在的对象，而不是使用时所在的对象。
  • 不可以当作构造函数，也就是说不可以用new命令。
  • 不可以用arguments命令，该对象在函数体内不存在，但是可以用rest参数。
  • 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其重要，this对象的指向可以改变的，但在箭头函数中，this是固定的。

1
2
3
4
5
6
7
8
9
10
function foo() {
  setTimeout(() => {
    console.log('id:', this.id)
  }, 100)
}

var id = 21

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

在 foo 函数中有一个 setTimeout，里面的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时。如果是普通函数，this对象此时指向全局对象 window，这时就输出 21。
此例中，箭头函数导致this对象总是指向函数定义生效时所在的对象 （此例是{id: 42}），所以输出 42。

箭头函数可以让 setTimeout 里面的this对象，绑定在定义时所在的作用域 ，而不是使用时的作用域 。我们看看另一个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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: 3
// s2: 0

上述代码中，Timer 函数里定义了两个定时器，分别使用了箭头函数和普通函数。前者的this对象绑定在定义时所在的作用域（Timer 函数），后者的this对象绑定在使用时所在的作用域（全局对象 window）。所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2 一次都没更新。

箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。下面是一个例子，DOM 事件的回调函数封装在一个对象里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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对象。否则this.doSomething会报错，因为没有用箭头函数的话，this对象指向 document 对象。

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

箭头函数用 ES5 实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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 是外层 foo 函数内的this对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id)
      }
    }
  }
}

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

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

上述代码中，只有一个this，就是 foo 函数的this，所以 t1，t2，t3 输出同样的结果。

尾调用优化

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

1
2
3
function f(x) {
  return g(x)
}

以上代码，函数 f 的最后一步是调用函数 g，这就叫做尾调用。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。

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

1
2
3
4
5
6
7
function addOne(a) {
  var one = 1
  function inner(b) {
    return b + one
  }
  return inner(a)
}

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

尾递归

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

1
2
3
4
5
6
function factorial(n) {
  if (n === 1) return 1
  return n * factorial(n - 1)
}

factorial(5) // 120

上面代码是一个阶乘函数，计算 n 的阶乘，最多需要保存 n 个调用记录，复杂度 O(n) 。

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

1
2
3
4
5
6
function factorial(n, total) {
  if (n === 1) return total
  return factorial(n - 1, n * total)
}

factorial(5, 1) // 120

递归函数的改写

尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。比如上面的例子，阶乘函数 factorial 需要用到一个中间变量 total，那就把这个中间变量改写成函数的参数。这样做的缺点就是不太直观，第一眼很难看出来，为什么计算 5 的阶乘，需要传入两个参数 5 和 1？

两个方法解决。

方法 1：再提供一个正常形式的函数。

1
2
3
4
5
6
7
function tailFactorial(n, total) {
  if (n === 1) return total
  return tailFactorial(n - 1, n * total)
}
function factorial(n) {
  return tailFactorial(n, 1)
}

以上代码还可以用柯里化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)

factorial(5) // 120

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

1
2
3
4
5
6
function factorial(n, total = 1) {
  if (n === 1) return total
  return factorial(n - 1, n * total)
}

factorial(5) // 120

总结一下，递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令，所有的循环都用递归实现，这就是为什么尾递归对这些语言极其重要。对于其他支持尾调用优化的语言（比如 Lua，ES6），只需要知道循环可以用递归代替，而一旦使用递归，就最好使用尾递归。

严格模式

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

这是因为在正常模式下，函数内部有两个变量，可以跟踪函数的调用栈。

  • func.arguments：返回调用时函数的参数。
  • func.caller：返回调用当前函数的那个函数。

尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。

尾递归优化的实现

尾递归优化只在严格模式下生效，那么正常模式下，或者那些不支持该功能的环境中，有没有办法也使用尾递归优化呢？回答是可以的，就是自己实现尾递归优化。

它的原理非常简单。尾递归之所以需要优化，原因是调用栈太多，造成溢出，那么只要减少调用栈，就不会溢出。怎么做可以减少调用栈呢？就是采用循环换掉递归。

1
2
3
4
5
6
7
8
9
10
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(…)

上面代码中，sum 是一个递归函数，参数 x 是需要累加的值，参数 y 控制递归次数。一旦指定 sum 递归 100000 次，就会报错，提示超出调用栈的最大次数。

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

1
2
3
4
5
6
function trampoline(f) {
  while (f && f instanceof Function) {
    f = f();
  }
  return f;
}

上面就是蹦床函数的一个实现，它接受一个函数 f 作为参数。只要 f 执行后返回一个函数，就继续执行。注意，这里是返回一个函数，然后执行该函数，而不是函数里面调用函数，这样就避免了递归执行，从而就消除了调用栈过大的问题。

然后，要做的就是将原来的递归函数，改写为每一步返回另一个函数。

1
2
3
4
5
6
7
function sum(x, y) {
  if (y > 0) {
    return sum.bind(null, x + 1, y - 1)
  } else {
    return x
  }
}

上面代码中，sum 函数的每次执行，都会返回自身的另一个版本。

参考资料：

《ES6 标准入门》（第 3 版） 阮一峰著