ES6——箭头函数（对比ES5学习法）

箭头函数：
作用：箭头函数，只能作为函数使用，不能new，没有原型，目的指向性方更强，可读性更好，简化代码，提高开发效率；
①写法：

//demo1：
// function sum (a, b){       //ES5写法；
//     return a + b;
// }
const sum = (a, b) => {       //箭头函数写法，使用时，形参变量不能重复；
    return a + b;             //当然箭头函数也可以写在[ ]或{ }中；只不过调用方法不同；
};
console.log(sum(10, 20));     //结果为30；

const sum1 = (a, b) => a + b; //可简写：不写{}相当于上面的return，有时需配合{}；
console.log(sum1(10, 20));      //结果为30；
const sum2 = (a, b) => [a, b];  //可直接返回[];
console.log(sum2(10, 20));      //结果为[10, 20]；
const sum3 = (a, b) => ({a :a, b: b});
//返回对象时不能直接{}，系统会人为return undefined，报错,直接让返回结果变成表达式即可；
console.log(sum3(10, 20));      //结果为{a: 10, b: 20}；
//demo2：
// function Sum (x){           
//一个高阶函数Sum（函数中满足参数是函数或者返回值是函数任意一个条件就是高阶函数）
//     return function Sum1(y){
//         return function Sum2(z){
//             return x + y + z;
//         }
//     }
// }
const Sum = x => y => z => x + y + z;  //箭头函数写法，简化代码；
console.log( Sum(1)(2)(3) );           //与上面结果相同；

②箭头函数中的arguments和this问题：

箭头函数中的arguments:

//demo1：
function auter(){
    const num = (a, b) => {
        //内部的arguments和this由定义时外围的最接近一层的箭头函数的arguments和this决定其值;
        //如果外部没有非箭头函数，在箭头函数中使用arguments时会报错；
        console.log(arguments, a, b); //结果为[8, 9] 1, 2;
    }
    num(1, 2);
}
auter(8,9);
//demo2:
function Curry(){
    return () => {
        //如果想在返回的函数中使用外层的实际参数，可返回箭头函数，直接在箭头函数中时使用arguments即可；
        console.log(arguments);      //结果为['a', 'b'];
    }
}
Curry('a', 'b')(1, 2);

箭头函数中的 this:

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法

apply调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments)；即A对象调用B对象的方法。func.apply(thisArg, [argsArray])
call调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2)；即A对象调用B对象的方法。func.call(thisArg, arg1, arg2, …)

先看一段ES5非箭头函数的一个例子：

var A = { 
  a: 1,
  b: 2,
  c: function(a){
    console.log(this)
    var first = this.a
    var fn = function(f) {
      console.log(this)
      return f + this.b
  }
  return fn.call({a: 'hh'}, a)
  }
}
A.c('hi');
// {a: 1, b: 2, c: ƒ}
// {a: "hh"}
//"hiundefined"

看看用箭头函数写的结果：

var A = { 
  a: 1,
  b: 2,
  c: function(a){
    console.log(this)
    var first = this.a
    var fn = f => {
      console.log(this)
      return f + this.b
  }
  return fn.call({a: 'hh'}, a)
  }
};
A.c('hi')
// {a: 1, b: 2, c: ƒ}
// {a: 1, b: 2, c: ƒ}
//"hi2"

这又是为什么呢？
让我们从几个demo中探索箭头函数中的this：

//demo1：
const aa = () => {
    //如果外部没有非箭头函数，在箭头函数中使用this时会指向window，与arguments不同，不会报错；
    console.log(this)
}
aa();
//demo2:
var a  = 'outObject';
const innerObject = {
    a: 'innerObject',
    fn () {
        const b = () => { //箭头函数被定义时，外围有非箭头函数fn，所以this就是fn的this；
            console.log(this.a);  //所以结果为innerObject；
        }
        return b;
    }
}
const outerB = innerObject.fn();
outerB();
//总结：箭头函数使用时，只需关注在被定义时刻的arguments和this即可，之后无论在哪里被调用都不会被改变；
const demo = {
    ms: 'abc',
    fn(){
        setTimeout( () => {   //定时器中写入箭头函数，保存了创建时的this，便以后使用；
            console.log(this.ms);
        }, 500)
    }
}
demo.fn();                //结果为abc，不会undefined；

小结：
ES6箭头函数，不仅省去了很多参数和this指向的问题，还可以简化代码。
当然正因为this提前定义，导致无法使用js进行一些在ES5里面看起来非常正常的操作（比如使用箭头函数，在监听点击事件的回调函数中，无法获取到当前点击的元素）
开发中要灵活运用箭头函数，可达到事半功倍的效果哦