请选择 进入手机版 | 继续访问电脑版
查看: 118|回复: 1

[经验分享] 【经验分享】彻底理解JavaScript中箭头函数中的this指向问题

[复制链接]

3

主题

18

帖子

41

积分

新手上路

Rank: 1

积分
41
发表于 2018-11-29 18:45:16 | 显示全部楼层 |阅读模式
[JavaScript] 纯文本查看 复制代码
<script type="text/javascript">
  let fun = function () {
       console.log('fun()');
   };
   fun();
   //没有形参,并且函数体只有一条语句
   let fun1 = () => console.log('fun1()');
    fun1();
   console.log(fun1());
    //一个形参,并且函数体只有一条语句
    let fun2 = x => x;
    console.log(fun2(5));
    //形参是一个以上
    let fun3 = (x, y) => x + y;
    console.log(fun3(25, 39));//64

    //函数体有多条语句
    let fun4 = (x, y) => {
        console.log(x, y);
        return x + y;
    };
    console.log(fun4(34, 48));//82

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

   let btn = document.getElementById('btn');
   //没有箭头函数
   btn.onclick = function () {
       console.log(this);//btn
   };
   //箭头函数
   let btn2 = document.getElementById('btn2');

    let obj = {
        name : 'kobe',
        age : 39,
        getName : () => {
            btn2.onclick = () => {
                console.log(this);//obj
            };
        }
    };
    obj.getName();


 function Person() {
     this.obj = {
         showThis : () => {
             console.log(this);
         }
     }
 }
    let fun5 = new Person();
    fun5.obj.showThis();

</script>


<!--
* 作用: 定义匿名函数
* 基本语法:
  * 没有参数: () => console.log('xxxx')
  * 一个参数: i => i+2
  * 大于一个参数: (i,j) => i+j
  * 函数体不用大括号: 默认返回结果
  * 函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回
* 使用场景: 多用来定义回调函数

* 箭头函数的特点:
    1、简洁
    2、箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this
   3、扩展理解: 箭头函数的this看外层的是否有函数,
        如果有,外层函数的this就是内部箭头函数的this,
        如果没有,则this是window。
-->







上一篇:【资料共享】React底层服务器渲染原理解析与实践视频教程
下一篇:【开源软件】非常好用的鼠标指针悬停预加载图片/视频/音频的浏览器插件ImageUS
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案; 如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子分类或者标题加上【已解决】。
回复过本主题
的还回复过:

0

主题

15

帖子

32

积分

新手上路

Rank: 1

积分
32
发表于 2018-12-17 19:23:37 | 显示全部楼层
还是有点帮助的!
回复

使用道具 举报

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

本版积分规则

微信扫一扫

我爱科技论坛(www.52tech.tech)旨在打造全网最大的免费资源共享平台。目前论坛包括考研资料、编程学习、黑科技/科学上网、开源软件等资源模块,竭力服务于正在学习道路上的每一个人。我爱科技论坛,爱科技,更爱分享。致力于营造一个资源丰富、内容完善的大型网络学习交流资源共享平台!

QQ|Archiver|手机版|小黑屋|我爱科技论坛 快乐学习交流

(请勿发布违反中华人民共和国法律法规的言论,会员观点不代表我爱科技论坛的官方立场)

Powered by Discuz! X3.4© 2001-2013 Technology Inc.

返回顶部 返回列表