ES6_箭头函数

优化函数的写法
如何去定义函数

方式一：
function  sum (x, y) {
   return x+y
}
const res = sum(2, 3)
console.log(res)    // 5
方式二：
const sum2 = function (x, y) {
   return x+y
}
const res = sum2(3, 4)
console.log(res)    // 7

在ES6中如何写出优雅的函数呢

const sum3 = (x, y) +> {
   return x+y
}
const res = sum3(4, 5)
console.log(res)    // 9

在箭头函数箭头的左边，指的是函数的参数，在右边指的是方法体
箭头函数的简写：
1.当方法体中只有一行代码，大括号可以省略，return也不需要 const sum4 = (x, y) => x + y
2.

// 没有参数
const fn = () => {
   // 业务逻辑
} 
// 一个参数,那么可以省略参数括号
const fn = (x) => {
   // 业务逻辑
} 
======分割线
const fn = x => {
   // 业务逻辑
} 

箭头函数任何场景都可以使用吗
场景一：

当把箭头函数当做事件的回调函数的时候，这时的this,并不是指向当前绑定的对象，指向的是window. 所以事件回调的时候使用箭头函数，需要注意this的指向问题
场景二：
定义对象，对象里面会有属性和方法

没有问题
如果改成箭头函数呢

就打印不出来。

使用箭头函数去定义对象里面的方法，也需要知道this指向问题，这里的this也是指向window,为什么是空值，因为name属性是比较特殊的属性，window下面有name属性，所以当打印this.name的时候，打印是的空字符串而不是undefined

在ES6里面有针对对象里面的方法简写的形式：
这个形式是将冒号和function都去掉

场景三：

函数arguments能够取到形参的值，用function的时候可以取到arguments的值
箭头函数：

结果：

在箭头函数，arguments是不能够使用的
场景四：
不能使用箭头函数做为构造函数

// 类
function Course (name, price) {
     this.name = name
     this.price = price
}
// 箭头函数写法
const Course = (name, price) => {
     this.name = name
     this.price = price
}

const c1 = new Course('es', 500)
conosle.log(c1)

使用function函数

使用箭头函数

报错Course不是一个构造函数
场景五：在ES5 构造类下面还有很多方法，类的方法定义在原型下面

// 类
function Course (name, price) {
     this.name = name
     this.price = price
}
Course.prototype.study = function () {
   console.log(`我要学习${this.name},价格是：${this.price}`)
}
c1.study()

结果：

如果改成箭头函数的写法呢：

Course.prototype.study =  () => {
   console.log(`我要学习${this.name},价格是：${this.price}`)
}
c1.study()

结果：

这里的this还是指向window，window下面的name是空值，没有price属性，所以是undefined
使用箭头函数，不能定义原型下面的方法
以上场景使用箭头函数要注意