javascript – 箭头功能和此

参见英文答案 > Methods in ES6 objects: using arrow functions                                    4个
我正在尝试ES6,并希望在我的函数中包含一个属性,就像这样

var person = {
  name: "jason",

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

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

但是,当我运行此代码控制台时,只记录我的名字是.我究竟做错了什么？

解决方法:

简短回答：这指向最近的边界 – 在提供的代码中,这是在封闭范围内找到的.

更长的答案：箭头函数在创建它们时绑定它们do not have this, arguments or other special names bound at all – 当创建对象时,在封闭范围中找到该名称,而不是人物对象.通过移动声明,您可以更清楚地看到这一点：

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;

在这两种情况下,这(对于shout函数)指向与定义person相同的范围,而不是函数在添加到person对象时附加到的新范围.

你不能让箭头函数以这种方式工作,但正如@kamituel在his answer中指出的那样,你可以利用ES6中较短的方法声明模式来节省类似的空间：

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

标签：arrow-functions,javascript,ecmascript-6,this
来源： https://codeday.me/bug/20190911/1803653.html