ES6标准入门(五):函数的扩展

函数参数的默认值

基本用法

在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(12// 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
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
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
//{% label @arguments %}变量写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}

// {% label @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
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版) 阮一峰著

------ 本文结束  感谢阅读 ------