- React工程师修炼指南
- 开课吧组编 高少云 莫涛 韩明洋 余维海编著
- 924字
- 2025-02-27 03:27:47
1.5 函数
1.5.1 函数形参的默认值
很多情况下,需要在使用函数的时候给定默认参数,在ES5标准中一般会这样来做:

通过上面的代码可以解决多数情况下的需求,但是如果遇到“age”参数是0的情况,会发现“age”的值会变成默认值20,不符合预期,所以可以通过typeof来对代码做改进:

上述写法可以解决参数默认值的问题,但是写法上比较烦琐。针对这种情况,ES6标准中提供参数默认值来简化上述过程,代码如下:

上述代码中,如果有参数传入,形参的值是传入的参数,如果没有参数传入,形参的值会是默认参数。在使用过程中有时候会出现第一个参数需要默认参数,第二个及后面的参数需要传入的情况。第一个参数可以传入undefined。代码如下:

1.5.2 函数形参不定参数
在很多情况下,使用函数传参的时候,形参的数量是不固定的,这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取,此时会把所有参数放在arguments里。代码如下:

上述写法在ES6中提供rest剩余参数来处理不定参问题,可以通过“...”来表示:

在使用剩余参数的时候需要注意,每个函数只能声明一个剩余参数,且剩余参数必须在参数的末尾。那么在使用剩余参数的时候会对arguments隐藏参数产生影响吗?代码如下:

通过上述执行结果可以看出剩余参数对arguments是没有影响的。
1.5.3 箭头函数
在ES5标准中定义返还函数可以通过下列方式来实现:

在ES6标准中将上述写法通过箭头语法变得更加简单,代码如下:

箭头语法最大的特点是有箭头“=>”符号,当然箭头语法有很多变式写法。代码如下:


同样也可以手动返还数据,例如:

利用箭头语法里隐式返还的时候需要注意对象的情况,需要注意如下错误情况:

上面代码初步感觉是返还了一个对象,但是这里的大括号和函数里的大括号在含义上有冲突,系统会认为大括号是函数里的括号,而不是对象里的括号,导致报错。所以需要改成如下写法:

箭头函数中还有个位置需要特别注意,就是箭头函数里没有this绑定,如下代码,this指向对象本身:

上面代码可以打印出id为2,this指向了obj,所以this.id可以取到obj.id。如果改成箭头语法会发现,函数中this指向改变了,代码如下:


这里会发现this.id获取不到值,原因是箭头函数没有this绑定,箭头函数中的this会指向最近的上层this,所以这里this的指向是Window,所以最终取不到this.id。同样在使用箭头语法的时候需要注意没有隐藏参数arguments的绑定,代码如下:
