箭头函数与this

es3时函数会默认把'.'前面的对象默认当作this传入函数，也可以用call、apply和bind等方法改变。
由于this太难用才产生=>弱化this产生的问题。
但是this 指向不像py那样明显的写出来，导致指向不清产生各种问题。
但是coffeescript中使用=>方便的解决this问题（coffee还有个->没抄）。
于是有了没有this的箭头函数，确保内外this相同。
还使代码简化。

//对代码的一些简化
let xxx = (p1) => {
console.log(1)
return 2
}
xxx(2)
------------------------------------------------
//只有一个参数时，参数可以不写（）
//只有一行函数体时可以同时省略return与{}
//如果写了return必须加{}否则报错
let xxx = p1 => p1*p1
xxx(2)

函数的this

var controller ={
    el:'#app',
    init:function(){
        $(this.el).on('click',this.onClick)//此时this为   controller     
    },
    onClick:function(){
      this.getUse();    //但在这里调用时却是#app这个元素
    },
    getUse:function(){
      console.log(this)
    }
}

下面是E6之前为解决问问题的一种方法

var controller ={
    el:'#app',
    init:function(){
      var self= this  //使用self来保留外面的this
      $(this.el).on('click',function(){
        self.xxx()  
      })
    },
    xxx:function(){
       this.getUse()  
    },
    function:getUse(){  
      console.log(this)
    }
}

ES6箭头函数出现后

var controller ={
    el:'#app',
    init:function(){
      $(this.el).on('click',() => { //箭头函数本身没有this使用的是外面的this
        this.xxx()  //这里就是controller.xxx()
      })
    },
    xxx:function(){
       this.getUse()  
    },
    getUse(){  //ES6新语法，可以省略":function"
      console.log(this)
    }
}

使用call给箭头函数指定this，this也不会改变。