ES6 箭头函数 Arrow Function

 

前言
1. ES6 前定义函数
2. ES6 箭头函数语法
3. ES6 箭头函数返回值
4. 箭头函数中的 this 到底是谁 ?

前言

---

ES6 新增了一种新的函数: 箭头函数 Arrow Function

箭头函数相当于匿名函数，简化了函数定义，将原函数的 function 关键字和函数名都删掉，并使用 => 连接参数和函数体

1. ES6 前定义函数

---

1. // function 关键字
2. function add(num1, num2) {
3. return num1 + num2;
4. }
5. // 函数表达式
6. const sub = function (num1, num2) {
7. return num1 - num2;
8. }
9. // 对象字面量中定义函数
10. const obj = {
11. mul: function (num1, num2) {
12. return num1 * num2;
13. },
14. div(num1, num2) {
15. return num1 / num2;
16. }
17. }

2. ES6 箭头函数语法

---

当没有参数时, 可以定义为以下形式

1. const test = () => {
3. }

当只有一个参数时，括号可以省略。但是，如果这个参数是解构赋值，括号不能省略

1. const test = res => {
2. console.log(res);
3. }
4. const test = ({ code, msg }) => {
5. console.log(res);
6. }

当有多个参数时，括号不能省略

1. const test = (num1, num2) => {
2. return num1 + num2;
3. }

当函数体只有一行语句时，可以省略 {}

1. const test = (num1, num2) => num1 + num2;

使用箭头函数的场景: 闭包函数

1. setTimeout(() => {
3. }, 1000)

3. ES6 箭头函数返回值

---

当方法体只有一条语句时可以省略花括号

1. // 普通写法
2. // const math = (num1, num2) => {
3. // return num1 + num2
4. // }
5. // 省略 {}
6. const math = (num1, num2) => num1 + num2

当箭头函数需要返回一个数据时，可以使用下面写法

返回值数据类型是 字符串，数组，布尔值，=> 后面直接跟上数据即可，返回值如果是键值对形式的对象，需要使用 ({})

1. const demo = {
2. // 返回值是 []
3. a1: () => [],
4. // 返回值是 'abc'
5. a2: () => 'abc',
6. // 返回值是 true
7. a3: () => true,
8. // 返回值是键值对的对象时 需要使用 ({})
9. // 因为使用 () => {} , {} 会被当作方法体的定界符
10. a4: () => ({
11. name: 'liang'
12. }),

箭头函数直接返回一个数据的写法，多用于 vue，uniapp 开发中

1. export default {
2. name: "my-search",
3. props: {
4. config: {
5. type: Object,
6. default: () => ({
7. height: 36,
8. }),
9. },
10. },
11. }

4. 箭头函数中的 this 到底是谁 ?

---

箭头函数中的 this 指向问题标准答案: 向外层作用域中一层层查找 this，直到有 this 的定义