首页 - 神途手游 > 【JavaScript】箭头函数作为对象方法时this的指向问题

【JavaScript】箭头函数作为对象方法时this的指向问题

发布于：2024-04-08 作者：admin 阅读：46

关键词：箭头函数，作用域

问题

在全局作用域下，箭头函数作为对象方法时，this会指向：

  var name = "Bob";
  obj = {
    name: "John",
    sayHello: () => {
      console.log( this.name); 
    },
  };
  obj.sayHello(); // Bob，而不是John

前提

要解决这个问题，要先知晓两个前提。

箭头函数的this指向箭头函数本身所在的作用域的this

  var fruits= ["watermelon", "mango"];
  obj = {
    likes: {
      fruits: ["apple", "banana"],
      getLikes() {
        console.log(this); // this在这里指likes
        let getFruits = () => {
          // 箭头函数在getLikes函数体内，
          // 因此this在这里也是likes
          console.log(this.fruits);
        };
        getFruits();
      },
    },
  };
  obj.likes.getLikes(); // ["apple", "banana"]

函数作用域链在声明函数时就已经确定了，如下所示：

 var a = 10;
 function foo() {
   console.log(a);
 }
 function bar() {
   var a = 20;
   foo();
 }
 bar(); // 10， 而不是20

解释

上面的前提一就可以解释文章开头的问题了(见代码注释)。因此箭头函数一般不作为方法使用。

  var name = "Bob";
  obj = {
    name: "John",
    sayHello: () => {
      // 箭头函数声明时在全局作用域，
      // 因此this代表window(严格模式下为undefined)【见前提1】
      console.log(this.name); 
    },
  };
  obj.sayHello(); // Bob，而不是John
  
  // 在obj外调用sayHello
  function foo() {
    obj.sayHello();
  }
  foo(); // 也是Bob，而不是John【前提2】

参考链接

扫一扫关注我们

上一篇：神途手游发布网游戏中VIP功能等级提升分析

下一篇：1月6日正式服与经典服维护公告

苍月神途开服表

苍月神途开服表,苍月神途开服表,17173.com中国游戏门户站...

2024-09-20
2023最新h5网页游戏推荐热门h5网页游戏排行前十名

有哪些最新h5网页游戏?很多小伙伴都非常喜欢玩手游，下面小编就为大家带来了不同类型的热门h5网页游戏，有策略类、角色扮演类、卡牌类、模拟器类等等，感兴趣的小伙伴...

2024-09-20
神途开服表，传奇热血再续

神途开服表，传奇热血再续,神话2开服表,17173.com中国游戏门户站...

2024-09-20
黄明端：大润发和飞牛网已明确线上线下发展模式

日前，大润发（专题阅读）董事长兼飞牛网CEO黄明端对大润发在电商冲击下进行转型的历程做了一个年终复盘：实体店要用差异化塑造竞争力目前，电商对实体店很明显的冲击是...

2024-09-20
极品飞车13 中文版

极品飞车13下载，《极品飞车13：变速》将拥有65辆跑车以及18条赛道...

2024-09-20
《精灵宝可梦LetsGo皮卡丘伊布》卡比兽配招推荐

《精灵宝可梦LetsGo皮卡丘伊布》中的卡比兽是一只非常可爱的宝可梦，而且卡比兽的实力也是不弱，技能搭配好的话，战斗力简直爆表，那么卡比兽应该怎么配招呢？...

2024-09-20