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

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

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

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

问题

在全局作用域下，箭头函数作为对象方法时，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日正式服与经典服维护公告

相关文章

本站资讯|联系我们|RSS订阅|网站地图

百度关键词：神途,神途手游,神途发布网

二维码

Copyright © 2022 www.5wst.com All right reserved. 赣ICP备2022000132号-15