一尘不染

JavaScrip Arrow Functions and This

javascript

我正在尝试ES6,并希望像这样在我的函数中包含一个属性

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

但是,当我运行此代码控制台时,仅显示log my name is。我究竟做错了什么?


阅读 332

收藏
2020-04-25

共1个答案

一尘不染

简短的答案:this指向最接近的边界this-所提供的代码this位于封闭范围内。

更长的答案:箭头功能 this 创建它们时将其绑定 没有thisarguments或结合其它特殊名字都正在创建对象时的名称this是在封闭的范围内,没有找到person对象。您可以通过移动声明来更清楚地看到这一点:

var person = {
  name: "Jason"
};
person.shout = () => console.log("Hi, my name is", this);

并且在翻译成ES5中箭头语法的模糊近似时更加清晰:

var person = {
  name: "Jason"
};
var shout = function() {
  console.log("Hi, my name is", this.name);
}.bind(this);
person.shout = shout;

在这两种情况下,this(对于shout函数)都指向与其中person定义的作用域相同的函数,而不是将函数添加到person对象时附加的新作用域。

不能
使箭头函数那样工作,但是,正如@kamituel在他的答案中指出的那样,您可以利用ES6中较短的方法声明模式来节省相似的空间:

var person = {
  name: "Jason",
  // ES6 "method" declaration - leave off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};
2020-04-25