ES6 箭头函数讲解 你正确使用了吗？
箭头函数是es6的一种函数的简写方法。在ES6中允许使用“箭头”（=>）定义函数，之前没有接触过箭头函数的人可能会惊讶于其代码的简洁。
一、先来几个简单的箭头函数
var f = v = > v;
//等同于
var f = function(v){
return v;
}
var sum = (num1,num2) => num1+num2 ;
//等同于
var sum = function(num1,num2){
return num1+num2
}
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);//简洁了许多从例子我们可以看出，函数省略了function，花括号‘{}’用‘=>’代替了，这种写法更简洁了。
除了简洁之外，箭头函数还有另外一个优点，就是函数体内的this的指向始终是指向定义它所在的对象，而不会指向调用它的对象，我们知道es5中的函数是谁执行它，它就指向谁。
二、箭头函数的用法
1、如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
const hello = () => 'hello'; const sum = (num1, num2) => num1 + num2;
2、如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
const sum = (x, y) => {
let z= 0;
if(x && y){
z= x + y;
}
return z;
}3、如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
const getInfo = id => ({ id: id, name: "hello" });三、箭头函数注意事项
A、箭头函数的this指向
对于普通函数来说，内部的this指向函数运行时所在的对象。箭头函数没有自己的this对象，内部的this就是定义时上层作用域中的this。箭头函数this为父作用域的this，不是调用时的this,箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。
将ES6转成ES5，发现其实只是所谓的箭头函数的this只是从外面”借“来的。
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}在setInterval中，其实是没有this.s2的，所以它的值不会变化。
function test() {
this.s1 = 0;
this.s2 = 0; // 箭头函数
setInterval(() => this.s1++, 1000); // 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
s1 // 1
s2 // 0普通函数修改之后可以修改s2
//普通函数
setInterval(function () {
let _this = this;
_this.s2++;
}, 1000);在这里也能看到箭头函数的this的指向，可以发现箭头函数非常适合来做回调。
B、箭头函数不能作为构造函数，不能使用new.
//构造函数如下：
function Person(p){
this.name = p.name;
}
//如果用箭头函数作为构造函数，则如下
var Person = (p) => {
this.name = p.name;
}由于this必须是对象实例，而箭头函数是没有实例的，不能作为构造函数，这个好理解。因为箭头函数根本没有自己的this，拿甚构造？所以箭头函数也就不能用作构造函数。也不能使用new关键词。
C、箭头函数没有arguments，caller，callee。
像this一样，arguments指向外层函数的对应变量，像类似的兄弟还有super、new.target
function hello() {
setTimeout(() => {
console.log('args:', arguments);
}, 1000);
}
hello(1,2,3,4)
// args: [1, 2, 3, 4]也因为这个this的问题，箭头函数也不能用call()、apply()、bind()这些方法去改变this的指向，因此箭头函数的this是”静态“的。
D、箭头函数通过call和apply调用，不会改变this指向，只会传入参数
let obj2 = {
a: 10,
b: function(n) {
let f = (n) => n + this.a;
return f(n);
},
c: function(n) {
let f = (n) => n + this.a;
let m = {
a: 20
};
return f.call(m,n);
}
};
console.log(obj2.b(1)); // 11
console.log(obj2.c(1)); // 11E、 箭头函数没有原型属性
var a = ()=>{
return 1;
}
function b(){
return 2;
}
console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ƒ}F、箭头函数返回对象时，要加一个小括号
var func = () => ({ foo: 1 }); //正确
var func = () => { foo: 1 }; //错误 