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也不会改变。
网友评论