ES6-7【箭头函数的实质、箭头函数的使用场景】

一、箭头函数的实质

1. this由外层的函数作用域来决定(箭头函数的作用域是父级的作用域，不是父级)
2. =>不能作为构造函数来使用（因为没有this）
3. call、apply、bind无效（因为没有this）
4. 没有arguments对象（因为与function不是同一类型函数，用拓展运算符代替）
5. yield 命令不能生效，在generator函数中（因为没有this）

function foo(){
    console.log(this)
    return (a) =>{
        console.log(this.a) // 这里是一个闭包
    }
}
var obj1 = {a:2};
var obj2 = {a:3};
var bar = foo.call(obj1);
bar.call(obj2)//输出的是2

const person = {
    eat(){
        log(this);
    },
    drink:()=>{
        log(this);
    }
}
person.eat(); // {eat:f,drink:f}  调用隐式绑定了this
person.drink(); // Window   箭头函数没有普通函数this的四个特性

二、箭头函数的使用场景

（1）事件绑定

箭头函数省去了bind的操作

(function() {
    function Button() {
        this.Button = document.getElementById('button');
    }
    Button.prototype = {
        init() {
            this.bindEvent();
        },
        bindEvent() {
            // es5写法
            this.Button.addEventListener('click', this.clickBtn.bind(this), false); //默认参数就是事件对象
            // es6写法
            this.Button.addEventListener('click', (e) => this.clickBtn(e), false); // 回调里传事件对象
        },
        clickBtn(e) {
            console.log(e);
            console.log(this);
        }
    }
    new Button().init();
})();

（2）嵌套

箭头函数内部并没有自己的this，只能通过父级作用域来获取this（闭包的this）

function foo(){
    return () =>{
        return ()=>{
            return ()=>{
                console.log('id',this.id)
            }
        }
    }
}
var f = foo.call({id: 1});
var f1 = f.call({id:2})()(); // id 1  箭头函数没有this，所以没法call
var f2 = f().call({id:3})(); // id 1
var f3 = f()().call({id:4}); // id 1

（3）arguments

箭头函数没有arguments，下面的题是一个坑

function foo(){
    setTimeout(()=>{
        console.log(arguments); //1234567
    })
}
foo(1,2,3,4,5,6,7); //这里拿的是父级作用域的arguments 

（4）闭包Closure

一个函数的执行，导致另一个函数的定义，会形成闭包

（5）链式调用

链式调用时避免箭头函数，可读性较差

// es5
function insert(value){ // 插入的数字
    return{
        into:function(array){ // 数组
            return{
                after:function(afterValue){ // 在第几位插入
                    arr.splice(array.indexOf(afterValue)+1,0,value);
                    return array;
                }
            }
        }
    }
}
log(insert(5).into([1,2,3,4,6,7,8]).after(4));//12345678
 
// es6
let insert = (value) =>({
    into:(array) =>({
        after:(afterValue)=>{
            array.splice(array.indexOf(afterValue)+1,0,value)
            return array;
        }
    })
})

三、箭头函数使用场景总结

1. 返回的值唯一

2. 内层函数需要调用外层this

3. 类数组转化为数组时

   // es5
   function sortNum() { //这里slice起到把类数组转成数组的作用
       return Array.prototype.slice.call(arguments).sort(function(a, b) { return a - b });
   }
   // es6
   const sortNum = (...args) => args.sort((a, b) => a - b);
   

4. 链式调用、嵌套的时候避免使用箭头函数，可读性较差