【笔记】ES6 箭头函数

130 阅读 0 评论 86 点赞

我是靠谱客的博主开朗身影，这篇文章主要介绍【笔记】ES6 箭头函数，现在分享给大家，希望可以做个参考。

在ES6中允许使用=>来定义函数。

这篇文章主要介绍以下箭头函数的写法和一些需要注意的问题。

复制代码

1
2
3
4
5
6
7
8
9
10
11
// 普通写法
const normal = (a, b) => {
return a + b
}
normal(1, 2) // 3
// 上述写法等同于
function normal2(a, b) {
return a + b
}
normal2(1, 2) // 3

箭头函数还有简写的方式，但是要满足一定的条件。

只有一个参数，可以去掉小括号
函数体中只有一句表达式，可以省略大括号，并以表达式的值作为返回值

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 只有一个参数
const org = (n) => {
const sq = n * n
return sq
}
// 上面的函数可以简写为
const simple = n => {
const sq = n * n
return sq
}
// 函数体中只有一句表达式
const org2 = (a, b) => {
return a * b
}
// 上面的函数可以简写为
const simple2 = (a, b) => a * b
// 但是，当函数体中只有一句表达式，并且该表达式要返回一个对象时，要用()来包裹
const org3 = (name, age) => {
return { name, age }
}
// 上面的函数可以简写为
const simple3 = (name, age) => ({ name, age })

使用箭头函数时，有几点注意事项：

箭头函数没有自己的this对象，箭头函数中的this是静态的，指向的是函数声明时所在作用域下的this的值
不可以当作构造函数，不可以对箭头函数使用new命令
不可以使用arguments对象
不可以使用yield命令，因此箭头函数不能用作Generator函数（之后的文章会讲解这个概念）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 箭头函数中的this
// 准备数据
window.name = '波风水门'
const son = {
name: '漩涡鸣人'
}
// 函数准备
const getName = () => {
console.log(this.name)
}
function getName2() {
console.log(this.name)
}
// 普通调用
getName() // 波风水门
getName2() // 波风水门
// call调用
getName.call(son) // 波风水门
getName2.call(son) // 漩涡鸣人

从上面的例子可以看出，箭头函数中的this指的是函数声明时所在作用域的this的值（即window），而且箭头函数中的this是静态，使用call调用时，并不能改变this的指向。

复制代码

1
2
3
4
5
6
7
// 箭头函数不可以当作构造函数
const Person = (name, age) => {
this.name = name
this.age = age
}
const gdg = new Person('郭德纲', 18) // 这里会报错，Person不是构造器

从上面的例子可以看出，箭头函数是不可以当作构造函数的。

复制代码

1
2
3
4
5
6
// 箭头函数不可以使用arguments对象
const fn = () => {
console.log(arguments) // 报错，arguments没有被定义
}
fn(1, 2, 3)

不适用箭头函数的场景
– 定义对象的方法，且该方法内部包括this
– 需要动态绑定this的时候

复制代码

1
2
3
4
5
6
7
8
9
// 定义对象方法，且该方法内有this，不能用箭头函数
// 以下示例摘自《ECMAScript 6 入门》
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}

复制代码

1
2
3
4
5
6
// 需要动态绑定`this`的时候，不能用箭头函数
const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
console.log(this) // window
})