如何在不重新绑定此对象的情况下返回带有粗箭头功能的对象？

Question

我有一个简单的函数（在React组件中）：

getInitialState: function() {
  return {
    text: this.props.text
  }
}

但我想用箭来形容它：

getInitialState: () => {
    text: this.props.text
}

除非出现错误，因为{粗箭头后的a表示返回未定义的代码块（除非您明确地进行return了操作）。至少那是我最初的想法。但是我认为this现在已经绑定到那个胖箭头功能this.props上了undefined。

所以我尝试这样：

getInitialState: () => new Object({
    text: this.props.text
})

但是我得到同样的错误，this.props是不确定的。

所以我想我有两个很好奇的问题。首先，从简单的语句胖箭头函数返回对象的惯用方式是什么？其次，如何返回引用this周围环境的对象的对象？

Answer 1

用括号括起来，像这样

getInitialState: () => ({
    text: this.props.text
})

没有括号，对象字面量看起来也像一个带有标签的 JavaScript 块text。由于它不明确，所以抛出 SyntaxError 。但是当你用 包围它时()，JavaScript 知道它是一个对象字面量。

我认为这现在被绑定到那个箭头函数

箭头函数没有this. 当this在箭头函数中遇到 时，它将转到上一级以查看this那里是否可用并使用它。你可以确认，像这样

(function Test1() {
  console.log(this);
  (() => console.log(this))();
}).bind({a: 1})();

会打印

{ a: 1 }
{ a: 1 }

在您的情况下，this将引用this声明它的函数的对象，而不是对象本身。