函数的扩展
函数参数的默认值
基本用法
ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。
function Point(x = 0,y = 0) {
this.x = x;
this.y = y;
}
const p = new Point()
console.log(p)
参数变量是默认声明的,所以不能用let或const再次声明。
使用参数默认值时,函数不能有同名参数
参数默认值不是传值的,而是每次都重新计算吗默认值表达式的值——参数默认值是惰性求值的。
let x = 99
function foo(p = x + 1) {
console.log(p)
}
let a = foo()
let b = foo()
console.log(a,b)//100 100
与解构默认值结合使用
只有当函数foo的参数是一个对象时,变量x和y才会通过解构赋值生成。如果函数foo调用时没提供参数,变量x和y就不会生成,从而报错。
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()//Uncaught TypeError: Cannot destructure property `x` of 'undefined' or 'null'.
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
// 写法一
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
// 函数没有参数的情况
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]
参数默认值的位置
通常情况下,定义了默认值的参数,应该是函数的尾参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的
略的。
// 例一
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属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。
length属性的含义:该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了。同理,后文的rest参数也不会计入length属性。
(function(...args) {}).length // 0
如果设置了默认值的参数不是尾参数,呢么length属性也不再计入后面的参数了。
作用域
一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。
应用
利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
function throwIfMissing() {
throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided;
}
foo()
// Error: Missing parameter
可以将参数默认值设为undefined,表明这个参数是可以省略的。
rest参数
ES6引入rest参数(形式为…变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。
rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function add(...values) {
let sum = 0;
for(var val of values){
sum +=val
}
console.log(values)//【2,5,3】
return sum
}
add(2,5,3)//10
利用rest参数,可以向该函数传入任意数目的参数
例子:rest参数代替arguments变量的例子
// arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
arguments对象不是数组,而是一个类似数组的对象。为了使用数组的方法,必须使用Array.prototype.slice.call先将其转为数组。rest是一个真正的数组,数组特有的方法都可以使用。
例子:利用rest参数改写数组push方法的例子。
function push(array,...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
})
}
var a = []
push(a,1,2,3)
注意:rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
函数的length属性,不包括rest参数。
严格模式
从ES5开始,函数内部可以设定为严格模式。
function doSomething(a, b) {
'use strict';
// code
}
ES2016做了一些修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显示设定为严格模式,否则会报错。
规定的原因:函数内部的严格模式,同时适用于函数体和函数参数,但是,函数执行的时候,先执行函数参数,然后再执行函数体。但只有从函数体之中,才能知道参数是否应该以严格模式执行,但是参数却应该优先于函数体执行。
规避方法:
- 设定全局性的严格模式
- 把函数包在一个无参数的立即执行函数里
const doSomething = (function () {
'use strict';
return function (value = 42){
return value
}
}())
name属性
函数的name属性,返回该函数的函数名。
ES5与ES6的区别:
如果将一个匿名函数赋值给一个变量,ES5的name属性,会返回空字符串,而ES6的name属性会返回实际的函数名。
var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"
如果将一个具名函数赋值给一个变量,则ES5和ES6的name属性都返回这个具名函数原本的名字。
Function构造函数返回的函数实例,name属性的值为anonymous。
bind返回的函数,name属性会加上bound前缀。
箭头函数
基本用法
用“箭头”(=>)定义函数
如果箭头函数不需要参数或需要多个参数,就用一个圆括号代表参数部分。
如果箭头函数的代码部分多于一条语句,就要用大括号将它们括起来,并且使用return语句返回。
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则报错。
使用注意点:
- 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
- 不可以当做构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
- 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用rest函数替代。
- 不可以使用yield命令,因此箭头函数不能用作Generator函数。
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的this指向绑定定义时所在的作用域(Timer函数),s2的this指向运行时所在的作用域(即全局对象)
箭头函数可以让this指向固定化,有利于封装回调函数。
例子:将DOM事件的回调函数封装在一个对象里。
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对象。
箭头函数转成ES5的代码:
//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,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments、super、new.target
箭头函数没有自己的this,所以不能用call()、apply()、bind()。
不适用场合
箭头函数使得this从“动态”变成“静态”。
- 定义对象的方法,且该方法内部包括this
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}
- 需要动态使用this的场合
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
button的监听函数是一个箭头函数,导致里面的this就是全局对象。如果改成普通的函数,this就会动态指向被点击的按钮对象。
尾调用优化
尾调用(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;
}
// 情况三
function f(x){
g(x);
}
尾调用不一定出现在函数尾部,只要是最后一步操作即可。
function f(x) {
if (x > 0) {
return m(x)
}
return n(x);
}
尾调用优化
函数调用会在内存中形成一个“调用记录”,又称“调用帧”(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)的调用帧。
这就是“尾调用优化”(Tail call optimization),即只保留内层函数的调用帧。
注意:只有不再用到外部函数的内部变量,内层函数的调用帧才会取代外层函数的调用帧,否则就无法进行“尾调用优化”。
尾递归
函数调用自身,称为递归。如果尾调用自身,就称为尾递归。
递归非常耗费你内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误(stack overflow)。但对于尾递归来说,由于只存在一个调用帧,所以永远不会发生“栈溢出 ”错误。
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
factorial(5) // 120
上面代码是一个阶乘函数,计算n的阶乘,最多需要保存n个调用记录,复杂度O(n)。
如果改成尾递归,只保留一个调用记录,复杂度O(1)
function factorial(n, total) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5, 1) // 120
递归函数的改写
方法一:在尾递归函数之外,再提供一个正常形式的函数。
function tailFactorial(n, total) {
if(n === 1) return total;
return tailFactorial(n - 1, n * total)
}
function factorial(n) {
return tailFactorial(n,1)
}
let a = factorial(5)
console.log(a)
函数式编程有一个概念——柯里化(currying),意思是将多参数的函数转换成单参数的形式。
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);
let a = factorial(5)
方法二:采用ES6的函数默认值
function factorial(n, total = 1) {
if(n === 1) return total;
return factorial(n-1, n*total)
}
严格模式
ES6的尾调用优化只在严格模式下开启,正常模式是无效的。
正常模式下,函数内部有两个变量,可以跟踪函数的调用栈。
- func.arguments:函数调用时函数的参数。
- func.caller:返回调用当前函数的那个函数
尾调用优化发生时,函数的调用栈会改写,因此上面两个变量就会失真。严格模式禁用这两个变量,所以尾调用模式仅在严格模式下生效。
尾调用优化的实现
利用“循环”替换“递归”可以减少调用栈从而不会溢出,实现优化
例子:
正常的递归函数
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(…)
蹦床函数(trampoline)可以将递归执行转为循环执行
function trampoline(f) {
while(f && f instanceof Function) {
f = f();
}
return f;
}
function sum(x,y) {
// debugger
if(y > 0) {
return sum.bind(null, x+1, y-1)
}else{
return x;
}
}
trampoline(sum(1,10000))//10001
这边的蹦床函数,返回的是一个函数,然后执行该函数,而不是函数里面调用函数,这样就避免了递归执行,从而消除了调用栈过大的问题。
真正尾调用优化
function tco(f) {
var value
var active = false
var accumulated = []
return function accumulator() {
accumulated.push(arguments)
if(!active){
active = true
while(accumulated.length) {
value = f.apply(this, accumulated.shift());
}
active = false
return value
}
}
}
var sum = tco(function(x,y) {
if(y>0){
return sum(x+1, y-1)
}else{
return x
}
})
sum(1,10)
默认情况下,active状态变量不激活,一旦进入尾递归优化的过程,变量就被激活额,每一轮递归sum返回的都是undefined,所以避免递归执行,而accumulated数组存放每一轮sum执行的参数,保证accumulator函数内部的while循环总会执行,这样就巧妙地将‘递归’改成‘循环。后一轮的参数会取代前一轮的参数,保证了调用栈只有一层。’
函数参数的尾逗号
ES2017允许函数的最后一个参数有尾逗号(trailing comma)
function clownsEverywhere(
param1,
param2,
) { /* ... */ }
clownsEverywhere(
'foo',
'bar',
);
Function.prototype.toString()
toString()会返回一模一样的原始代码(之前会省略注释和空格)
catch命令的参数省略
ES2019允许catch语句省略参数
try {
// ...
} catch {
// ...
}