ES6 箭头函数

普通函数：

• 命名函数形式

    function fn1(a) {
      console.log(a);
    }

• 字面量形式

    var fn2 = function (a) {
      console.log(a);
    };

箭头函数

    var fn3 = (a, b) => {
      console.log(a, b);
    };
    fn3(10, 11);

一个参数可以省略括号

    var fn4 = (a) => {
      console.log(a);
    };

没有参数的时候 不能省略括号

    var fn5 = () => {
      console.log(123);
    };

返回值

    function aa() {
      // 正常函数
      return 123;
    }

命名函数转箭头函数

    let aa1 = () => 123;箭头函数
    // 箭头函数中,如果只有一条 return 语句,则可以省略 大括号
    // 如果 这个箭头函数 还有且只有一个形参
    // 则小括号也可以省略
    // let aa1 = a => a + 1;

    function b(){
        return function (a){
            return a+1
        }
    }
    let b=()=>a=>a+1;
    let b1=b()(1);
    console.log(b1); // 2

命名函数与箭头函数中this的指向问题

    btn.onclick=function(){
        console.log(this);// 标签
    }

    btn1.onclick=()=>{
        console.log(this);// window
    }

一般绑定事件函数的时候 不要使用 箭头函数

    btn.onclick=function(){
        setInterval(function(){
            console.log(this);// window
        },3000);
    }

    btn1.onclick=function(){
        setInterval(()=>{
            console.log(this);// 标签
        },3000);
    }

当内部函数使用箭头函数时,不会改变外部函数的 this指向

    btn.onclick=function(){
        btn1.onclick=function(){
            console.log(this);// btn1
        }
        btn1.onclick=()=>{
            console.log(this);// btn
        }
    }

总结

• 普通函数 谁调用我 我的this指向谁
• 箭头函数 我被定义时 定义的环境中this指向谁 我的this就指向谁

对象中的箭头函数

给对象定义方法时,不要使用箭头函数

    let obj={
        say:function(){
            console.log(this);// obj
        },
        eat:()=>{
            console.log(this);// window
        }
    }
    obj.say();
    obj.eat();

    function Dog(){
        this.say=function(){
            console.log(this);// obj
        }
        this.eat=()=>{
            console.log(this);// obj
        }
    }
    let d1=new Dog();
    d1.say();
    d1.eat();