ES 3
//具名函数（一句话）

function xxx(p1, p2){
  console.log(1)
  return 2
}

ES 6
//具名函数（一句话）

let xxx = (p1, p2)=>{
  console.log(1)
  return 2
}

只有一个参数

let xxx = p1=>{
  console.log(1)
  return 2
}

要是函数只有一句话，可以不用{}，也不用return

let xxx = (p1, p2)=>p+p

---

this是call的第一个参数

---

• this 太难用了
• ES 3 支持this
• ES 6 也支持this，但是箭头函数弱化了this的用法

---

function fn(p1, p2){
  let p1 = arguments[0]
  let p1 = arguments[1]
  console.log(p1)
}

fn('abc')

p1 的值是由 fn（这玩意儿决定的）
p2 的值是由 fn（不是这个， 这玩意儿决定的）
arguments = [不是这个， 这玩意儿决定的]

---

let object = {
  name: 'obj',
  hi: function(p1,p2){
    console.log(this.name)
  }
}

object.hi(1,2)   =                       //小白写法
object.hi.call(object, 1,2)             //高级写法

p1 的值是由 object.hi（这玩意儿决定的）
p2 的值是由 object.hi（不是这个， 这玩意儿决定的）
this 的值是由 这玩意儿决定的.hi()
this 的值是由 object.hi.call(这个, 1,2)

---

var controller = {
  el: '#app',
  init: function(){
    $(this.el).on('click', this.xxx)
  },
 xxx: function(){
    console.log('用户点击 #app 就会调用这个函数')
    this 是什么？
    //A controller
    //B window
    //C #app 元素 √
  }
}

controller.init() =
controller.init.call(controller)

解决方法1：

var controller = {
  el: '#app',
  init: function(){
    var self = this
    $(this.el).on('click', function(this){
      //this是元素
      //以为this是controller ×
      self.xxx()
      //self === controller
    })
  },
  xxx: function(){
    this.getUser()
  },
  getUser:function(){
    
  }
}

controller.init() =
controller.init.call(controller)

image.png

箭头函数外面的this就是里面的this

image.png

箭头函数没有隐藏的this，有多少参数就是多少参数。不用this，就往里面传参