es6:箭头函数

2 篇文章 0 订阅

先看一个普通函数:

function add(a,b){
return a+b
}

add(2,2) //输出4

箭头函数写法:
add=(a,b)=>a+b
add(2,2) //输出4

总结一:箭头函数写法更简洁,省去了每次写function和renturn的关键词

每个普通函数体内都有个this,而这个this指向的总是函数调用者,而箭头函数内部是没有this的,它里面如果用的this,其实是继承的上层对象的this!这个特点有什么用呢?可看实例!
var obtn=doucument.getElementById(“btn”)
obtn .οnclick=function(){
setTimeout(function(){
console.log(this)
},10)
}
这个会输出:window //因为我们在setTimeout方法的调用者其实是window,所以自然this会指向函数被调用者window
其实我们想延迟输出:obtn对象 //一般的做法是:
obtn .οnclick=function(){
var _this=this
setTimeout(function(){
console.log(_this)
},10)
} //这样就会输出 obtn对象

现在我们有了箭头函数可以这样写:
obtn .οnclick=function(){

 setTimeout(()=>{
      console.log(this)
 }),10)

} //这样就会输出 obtn对象,因为箭头函数体内没有this,他里面的this是继承上层函数体内的this,而上层函数this指向的就是obtn对象

总结二:每个普通函数体内都有个this,而这个this指向的总是函数调用者,而箭头函数内部是没有this的,它里面如果用的this,其实是继承的上层对象的this!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值