ES6箭头函数使用方式

1. 什么是箭头函数?

在ES6中新增了使用箭头函数( => )的方式定义函数，任何可以使用函数表达式的地方，都可以使用箭头函数、

let test = (a,b) => {
	return a + b
}

let test2 = function(a,b){
	return a + b
}
console.log(test(5,10)) // 15
console.log(test2(5,10))  // 15

• 参数

// 只有一个参数可以不用括号
let test1 = x => {return x * 3}

// 没有参数需要括号 
let test2 = () => {return Math.random()}

// 多个参数需要括号
let sum = (a,b) => {return a + b}

• 如果箭头后面只有一行代码，比如一个赋值，或者一个表达式，可以省略 大括号 ，并且会隐式返回这行代码的值

let test = (x) => x * 3
console.log(test(2)) // 6

2. this问题

在标准函数 和 箭头函数中有不同的行为

• 在标准函数中

在标准函数中this引用是函数调用时的所在的上下文对象（在全局上下文时，this指向window）

window.color = "red";
let obj = {
	color: "blue"
}

function sayColor(){
	console.log(this.color)  
}
sayColor(); //在全局中调用this指向window  输出: "red"  

obj.sayColor = sayColor;   //把sayColor函数赋值给obj
obj.sayColor()   // obj调用sayColorthis指向obj 输出: "blue"

• 在箭头函数中

在箭头函数中，this引用的是定义箭头函数的上下文 ;
下列代码的两次调用，this都是引用的 window对象 ，因为这个函数是在window 上下文中所定义

window.color = "red";
let obj = {
	color: "blue"
}


let sayColor = () => console.log(this.color)  

sayColor(); // "red"  

obj.sayColor = sayColor;  
obj.sayColor()  // "blue"

3. 优缺点

语法简洁，在很多地方都可以简化代码，但也不适用的场景，如不能使用 arguments、super 和 new.target, 不能用作构造函数 ，没有prototype 属性