ES6箭头函数用法

前言：本部分主要介绍箭头函数概念，语法，使用场景和注意事项

一、预备知识

首先，需要了解什么是字面量（literal 美/ˈlɪtərəl/）。

中文维基百科： 字面量是指源程序中表示固定值的符号（token）

百度百科：在计算机科学中，字面量是用于表达源代码中一个固定值的表示法（notation）

个人的定义：字面量表示在源代码中的某种数据类型的固定值。

例如，

字符串（数据类型的）字面量"hello world"或者'hello world';
数字字面量 1、2、3;
数组字面量 [1, 2, 3];
对象字面量 {name: 'Alice', age: 18};

函数也有字面量 function(){} （匿名函数）

二、箭头函数

箭头函数是函数字面量的形式之一。

语法结构：

()=>{}
() 用于声明参数列表，{}表示函数体

1. 箭头函数的简化

（1）单个参数省略小括号

const print = (msg) => {console.log(msg)};
// 简化
const print = msg => {console.log(msg)};

无参数或者多参数不可以省略圆括号

(2) 函数体中只包含一条表达式语句，省略花括号和return

const add = (x, y) => {return x + y;}
// 化简
const add = (x, y) => x + y;

默认会返回表达式的值，如果该单行语句是函数调用语句且没有返回值，则返回undefiend。有返回值则将其返回

（3）返回对象

const add = (x, y)=>{value: x + y};
const res = add(1, 1);
console.log(res);

运行结果：

{value: x + y} 是对象表达式，按道理说，单行表达式语句是可以直接返回的。但是在=>后面出现，花括号会被解析为函数体的组成部分，而不认为是对象表达式。value: x + y; 会被认为是函数体重的lable语句。（label语句，break后会跳转到label语句继续执行）。

这很容易解决，只需要让{value: x + y}解析为对象表达式即可。可以使用能改变运算符优先级的(),它其中的任何值都被认为是表达式。

自执行函数也是这样做的，(function(){})(); 直接写匿名函数会被认为是函数声明，因为没有函数名而报错，使用() 包含，就会被认为是表达式。

// 修改代码 
const add = (x, y)=> ({value: x + y});
const res = add(1, 1);
console.log(res);

当然，你不简写也是完全可以的

// 修改代码 
const add = (x, y)=> {return {value: x + y}; }

{value: x + y} 出现在返回语句中，同样会被认为是对象表达式。

三、箭头函数中的this指向问题

全局作用域中的this，在浏览器环境下，会执行全局对象this;

一般函数中的this指向调用对象；

而箭头函数中没有this（局部变量），它的this执行全局对象。

四、不适用箭头函数的场景

(1) 构造函数
构造函数中需要this，而箭头函数中没有，它的this指向全局对象，使用它作为构造函数，属性会被添加到全局对象
(2) 给事件绑定回调函数
(3) 需要使用arguments，箭头函数中没有arguments（局部变量）

五、为什要设计箭头函数

不希望创建类的对象，因为类只要静态方法，没有实例域。
满足该条件的类和方法可以使用箭头函数