为什么引入箭头函数
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觉得好用就借用了过来
