06-ES6:箭头函数
# 前言
ES6 在函数扩展方面,新增了很多特性。例如:
箭头函数
参数默认值
参数结构赋值
剩余参数
扩展运算符
this 绑定
尾调用
今天这篇文章,我们讲一下箭头函数。
# 箭头函数
# 定义箭头函数的语法
语法:
(参数1, 参数2 ...) => { 函数体 }
解释:
如果有且仅有 1 个形参,则
()
可以省略如果函数体内有且仅有 1 条语句,则
{}
可以省略,但前提是,这条语句必须是 return 语句。
需要强调的是,箭头函数是没有函数名的,既然如此,那要怎么调用箭头函数呢?你可以将箭头函数赋值给一个变量,通过变量名调用函数;也可以直接使用箭头函数。我们来看看下面的例子。
# 举例
写法 1、定义和调用函数:(传统写法)
function fn1(a, b) {
console.log('haha');
return a + b;
}
console.log(fn1(1, 2)); //输出结果:3
2
3
4
5
6
写法 2、定义和调用函数:(ES6 中的写法)
const fn2 = (a, b) => {
console.log('haha');
return a + b;
};
console.log(fn2(1, 2)); //输出结果:3
2
3
4
5
6
上面的两种写法,效果是一样的。
从上面的箭头函数中,我们可以很清晰地看到变量名、参数名、函数体。
另外,箭头函数的写法还可以精简一下,继续往下看。
【重要】在箭头函数中,如果方法体内只有一句话,且这句话是 return 语句,那就可以把 {}
省略。写法如下:
const fn2 = (a, b) => a + b;
console.log(fn2(1, 2)); //输出结果:3
2
3
在箭头函数中,如果形参只有一个参数,则可以把()
省略。写法如下:
const fn2 = (a) => {
console.log('haha');
return a + 1;
};
console.log(fn2(1)); //输出结果:2
2
3
4
5
6
# 箭头函数的 this 的指向
箭头函数只是为了让函数写起来更简洁优雅吗?当然不只是这个原因,还有一个很大的作用是与 this 的指向有关。
ES6 之前的普通函数中:this 指向的是函数被调用的对象(也就是说,谁调用了函数,this 就指向谁)。
而 ES6 的箭头函数中:箭头函数本身不绑定 this,this 指向的是箭头函数定义位置的 this(也就是说,箭头函数在哪个位置定义的,this 就跟这个位置的 this 指向相同)。
代码举例:
const obj = { name: '千古壹号' };
function fn1() {
console.log(this); // 第一个 this
return () => {
console.log(this); // 第二个 this
};
}
const fn2 = fn1.call(obj);
fn2();
2
3
4
5
6
7
8
9
10
11
打印结果:
obj
obj
2
代码解释:(一定要好好理解下面这句话)
上面的代码中,箭头函数是在 fn1()函数里面定义的,所以第二个 this 跟 第一个 this 指向的是同一个位置。又因为,在执行 fn1.call(obj)
之后,第一个 this 就指向了 obj,所以第二个 this 也是指向 了 obj。
# 面试题:箭头函数的 this 指向
代码举例:
var name = '许嵩';
var obj = {
name: '千古壹号',
sayHello: () => {
console.log(this.name);
},
};
obj.sayHello();
2
3
4
5
6
7
8
9
上方代码的打印结果是什么?你可能很难想到。
正确答案的打印结果是许嵩
。因为 obj
这个对象并不产生作用域, sayHello()
这个箭头函数实际仍然是定义在 window 当中的,所以 这里的 this 指向是 window。
# 参数默认值
传统写法:
function fn(param) {
let p = param || 'hello';
console.log(p);
}
2
3
4
上方代码中,函数体内的写法是:如果 param 不存在,就用 hello
字符串做兜底。这样写比较啰嗦。
ES6 写法:(参数默认值的写法,很简洁)
function fn(param = 'hello') {
console.log(param);
}
2
3
在 ES6 中定义方法时,我们可以给方法里的参数加一个默认值(缺省值):
方法被调用时,如果没有给参数赋值,那就是用默认值;
方法被调用时,如果给参数赋值了新的值,那就用新的值。
如下:
var fn2 = (a, b = 5) => {
console.log('haha');
return a + b;
};
console.log(fn2(1)); //第二个参数使用默认值 5。输出结果:6
console.log(fn2(1, 8)); //输出结果:9
2
3
4
5
6
7
提醒 1:默认值的后面,不能再有没有默认值的变量。比如(a,b,c)
这三个参数,如果我给 b 设置了默认值,那么就一定要给 c 设置默认值。
提醒 2:
我们来看下面这段代码:
let x = 'smyh';
function fn(x, y = x) {
console.log(x, y);
}
fn('vae');
2
3
4
5
注意第二行代码,我们给 y 赋值为x
,这里的x
是括号里的第一个参数,并不是第一行代码里定义的x
。打印结果:vae vae
。
如果我把第一个参数改一下,改成:
let x = 'smyh';
function fn(z, y = x) {
console.log(z, y);
}
fn('vae');
2
3
4
5
此时打印结果是:vae smyh
。