箭头函数 笔记

为什么引入箭头函数

this 太难用了

let constroller = {
  el:"body",
  name:"xingkongs",
  init:function(){
   $(this.el).on("click",function(){
        this.getName()
    }.bind(this))
  },
  init2:function(){
    $("main").on("click",this.sayHi)
  },
  getName:function(){
    console.log(this.name)
  },
   sayHi:function(){
    console.log("hi")
  }
}
constroller.init() //xingkongs
constroller.init2()  // hi   xingkongs

this是call()的第一个参数
既然是参数 它是什么就得看(function)函数如何调用的,
谁调用了函数 this就是谁, 没人调用 那就默认是 window

var Obj = {
    function xxx(){
      console.log(this)
    }
}
Obj.xxx.()  //Obj

以前的函数永远保留了一个潜在的参数this，这个参数你只能用call来指定

function foo(/*this,*/p1,p2){
    //let this = arguments[-1]
    let p1 = arguments[0]
    let p2 = arguments[1]
}
foo(1,2)  //函数调用的小白写法
//this === window p1 === 1  p2===2
foo.call({name:xingkongs},1,2)  //函数调用的高级写法
//this === {name:xingkongs} p1 === 1 p2 === 2

既然this这么难用 箭头函数就去掉了this参数(函数中默认隐式添加的)
箭头函数没有任何隐藏的参数
如果你用this 那你就需要像参数一样传进去

let controller = {
  el:"#app",
  name:"xingkongs",
  init:(self)=>{
    self.getName()
  },
  getName:()=>{
    console.log(this.name)
  }
}
controller.init(controller)

箭头函数调用时没有this这个隐藏参数
那我能还能用call传入this的值吗？ 不能!! 外面 this是什么里面 this就是什么

console.log(this)  // window
let foo3 = (p1,p2)=>{
    console.log(this)
}
foo3.call({name:"xingkongs"}) //window

箭头函数 语法

标准

let f = (p1,p2) => {
  console.log("...")
  return p1+p2
}

一个参数 可以简写成

let f1 = p1 => { console.log("...") return p1*2}

一个参数 只返回return 可以简写成

let f2 = p2 => p2*2

为什么会用=> 这个语法？

coffeeScript 中出现了 fat arrow x=>{x*2} ，ES觉得好用就借用了过来