3.函数的扩展
3-1.函数参数的默认值
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
function fun(x, y = 'world'){
console.log(x,y);
}
fun('hello'); // hello world
fun('hello','China'); // hello China
fun('hello',''); // hello
注意:
参数变量是默认声明的,所以不能用let
或const
再次声明。使用参数默认值时,函数不能有同名参数。
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
3-2.解构赋值和默认值结合使用
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
的参数是一个对象时,变量x
和y
才会通过解构赋值生成。如果函数foo
调用时没提供参数,变量x
和y
就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。
3-3.rest 参数
ES6 引入 rest 参数(形式为
...变量名
),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function fun(...x){
console.log(x); // [1,2,3,4]
}
fun(1,2,3,4);
注意:
rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
// 报错
function f(a, ...b, c) {
// ...
}
function foo(x,...y){
console.log(x);// 0
console.log(y);// [1,2,3,4]
}
foo(0,1,2,3,4);
3-4.严格模式
ES6 只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。
// 报错
function fun1(a, b = a) {
'use strict';
}
// 报错
const fun2 = function ({a, b}) {
'use strict';
};
// 报错
const fun3 = (...a) => {
'use strict';
};
const obj = {
// 报错
fun4({a, b}) {
'use strict';
}
};
3-5.name 属性
函数的
name
属性,返回该函数的函数名。
function fun(){};
console.log(fun.name); // fun
let fun2 = function(){}
console.log(fun2.name); // fun2
const fun3 = function fun4(){};
console.log(fun3.name); // fun4
Function
构造函数返回的函数实例,name
属性的值为anonymous
。
(new Function).name // "anonymous"
bind
返回的函数,name
属性值会加上bound
前缀。
function foo() {};
foo.bind({}).name // "bound foo"
3-6.箭头函数
ES6 允许使用“箭头”(
=>
)定义函数。
// 普通写法
function fun(a){
return a;
}
// 箭头函数写法
let fun = a => a;
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来。
// 普通写法
function fun(a, b){
let sum = a + b;
return sum;
}
//箭头函数写法
let fun = (a, b) => {
let sum = a + b;
return sum;
}
箭头函数注意点
- 函数体内的
this
对象,就是定义时所在的对象,而不是使用时所在的对象。 - 不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误。 - 不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。 - 不可以使用
yield
命令,因此箭头函数不能用作 Generator 函数。
- 上面四点中,第一点尤其值得注意。
this
对象的指向是可变的,但是在箭头函数中,它是固定的。
let fun = () => {
console.log(this); // window
}
fun();
let obj = {
name: '张三',
age: 18,
fun2: () => {
console.log(this); //window
}
}
obj.fun2()
let obj2 = {
name: '张三',
age: 18,
fun3() {
(() => {
console.log(this); // obj2 对象
})()
}
}
obj2.fun3()
总结
:箭头函数在自己的作用域内没有自己的this
,如果要使用this
,就会指向定义时所在的作用域的 this 值。