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

一.箭头函数的实质

1.this.为外层的函数作用域来决定(箭头函数的作用域是父级的作用域，而不是父级)

2.=>不能作为构造函数来使用

3.没有arguments对象，用rest(拓展运算符)

4.yield 命令不能生效，在generator函数中

function foo(){
    log(this)
    return (a) =>{
        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}
person.drink();Window{...}

二.使用场景

(1).事件绑定

...
    bindEvent(){
        this.button.addEventListener('click',(e) => this.clickBtn(e),false)
    }
    ...

(2).嵌套

this是固化的，严格来说是没有this这个东西的

function foo(){
    return () =>{
        return ()=>{
            return ()=>{
                console.log('id',this.id)
            }
        }
    }
}
var f = foo.call({id: 1});
var f1 = f.call({id:2})()(); id1
var f2 = f().call({id:3})(); id1
var f3 = f()().call({id:4}); id1

(3).arguments坑

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

(4).闭包Closure

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

(5).链式调用

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;
        }
    })
})

(6).总结

1.函数单一并简单，得出唯一的return的计算值，且函数内部没有this的引用

2.没有递归，事件绑定，解除绑定，用箭头函数

3.类数组转化为数组时

4.不适合=> 表达式的情况，函数申明，执行语句较多的，还需要用到递归，需要引用函数名，事件绑定，解除绑定。