关灯
开启左侧

油腻大叔带你看破this迷雾(三)

[复制链接]
油腻大叔 发表于 2018-7-25 16:17:54 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
本帖最后由 油腻大叔 于 2018-7-25 16:17 编辑

今天带大家了解箭头函数中this的相关指向
在箭头函数出现之前,每个新定义的函数都有它自己的this指向,箭头函数不会创建自己的this指向,它只会从自己的作用域链的上一层继承this。
  1. var show=()=>{
  2.    console.log(this);
  3. }

  4. show(); //第1题

  5. var arr=[1,2,3];
  6. arr.show=show;

  7. arr.show(); //第2题

  8. document.onclick=show; //第3题

  9. setTimeout(show,1000);//第4题

  10. show.call(111); //第5题

  11. new show();  //第6题
复制代码

第1~4题都是答案都是window,也就是说这里看this的指向跟非箭头函数里面是不一样了,没有那么多情况,只看函数调用时他所在的作用域的this值
1~4题中,调用时所在的作用域是全局,所以在全局都是window

第5题:箭头函数内部没有this,所以call,apply,bind都没有用,还是和1~4中一样,看当前作用域的this,还是window

第6题:箭头函数不能用作构造器,和 new一起用会抛出错误。

下面这道题来证明一下之前的结论:
  1. <div id="box">国信安</div>
  2. <script>
  3.    document.getElementById('box').onclick=function () {
  4.       var show=()=>{
  5.          alert(this);
  6.       }
  7.       show();
  8.     }
  9. </script>
复制代码
之前咱们做过这道题,只不过这里面换成了箭头函数,因为咱们说了show函数里面没有this,这里面就看show()所在的作用域里面this的指向
在这里是<div id="box">国信安</div>


所以大家在玩箭头函数this的时候只需要知道箭头函数不会创建自己的this指向,它只会从自己的作用域链的上一层继承this。

ok,如果觉得学到了,就给大叔点赞,关注吧,如果需要详细讨论可以添加qq群:622730703。



 

精彩评论1

正序浏览
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员
  • 活跃会员

    经常参与各类话题的讨论,发帖内容较有主见

0关注

24粉丝

21帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )