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

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

发布于:2024-04-08 作者:admin 阅读:71

关键词:箭头函数,作用域

问题

在全局作用域下,箭头函数作为对象方法时,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】

参考链接

二维码

扫一扫关注我们

版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容,请告知我们,本站将立刻删除涉嫌侵权内容。

相关文章