ES6 箭头函数2

基本用法

//一般函数写法: function () {...}
//es6箭头函数写法:() => {...}

简写规范

1、如果有且只有一个参数,()也可以不写;

2、如果有且仅有一个语句,并且是return,{}也可以不写

function add(num) {
    return num + 5;
}

function show(num,fn) {
    alert(fn(num));
}

show(5,add);

//可简写为:
show(5,n=>n+5);

//对数组的元素进行升序排序
//es5写法:
arr.sort(function(a,b) {
    return a - b;
})

//es6写法
arr.sort((a,b) => a - b);

ES6中的箭头函数的作用不仅仅是为简写,最大用处还是在修正this

        let obj = {
            a:12,
            fn:function() {
                console.log(this.a);
            }
        }

        obj.fn();

        let date = new Date();
        date.fn = obj.fn;
        date.fn();

//按照es6中,箭头函数修正this的思路进行改造
        let obj = {
            a:12,
            fn:()=> {
                console.log(this.a);
            }
        }

        obj.fn();

        let date = new Date();
        date.fn = obj.fn;
        date.fn();

//原因:1、由于箭头函数是作为对象字面量的属性定义的,对象字面量在全局代码中定义,因此,箭头函数内部的this值与全局函数的this值相同
//2、如果箭头函数被非箭头函数包含,则this绑定指向的是最近一层非箭头函数的this;否则,this的值会被设置为全局对象

        let obj2 = {
            fn:()=>{
                console.log(this);
            }
        }
        obj2.fn(); //window


        let obj = {
            fn:function() {
                 return ()=> {console.log(this);}
            }
        }
        obj.fn()();//==>{fn: ƒ}

//回归es5,this对象是在运行时,基于函数时的执行环境绑定的,在全局函数中,this指向window,当函数被当做某个对象的方法调用时,this等于那个对象。

//es6中,箭头函数this固定为当前的环境,箭头函数的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。

       class Json{
            constructor () {
                this.a = 12;
                this.fn = () => {
                    console.log(this.a);
                }
            }
        }

        var obj = new Json();
    obj.fn();   //12

        var date = new Date();
        date.fn = obj.fn;
        date.fn();   // 12