如何在不重新绑定 this 的情况下返回一个带有粗箭头函数的对象？ [复制]

Posted 2023-02-22

【中文标题】如何在不重新绑定 this 的情况下返回一个带有粗箭头函数的对象？ [复制]

【英文标题】：How do you return an object with a fat arrow function without rebinding this? [duplicate]

【发布时间】：2016-11-25 22:52:48

【问题描述】：

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

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

但我想把它加粗：

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

除非我得到一个错误，因为在一个粗箭头之后的 意味着一个返回未定义的代码块（除非你明确地return 某些东西）。至少我一开始是这么想的。但我认为this 现在被绑定到那个胖箭头函数，现在this.props 是undefined。

所以我试试这个：

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

但我得到同样的错误，this.props 未定义。

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

【问题讨论】：

箭头函数保留上下文，但是当你使用new 时，它会重置this，因此你会得到错误。如果你想让它工作，你可以回到 ES5 hack var self = this

这叫“箭头函数”，不是“胖箭头函数”

【参考方案1】：

用括号括起来，像这样

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

没有括号，对象字面量看起来也像一个 javascript 块，其中包含一个名为 text 的标签。由于它是模棱两可的，因此会抛出 SyntaxError。但是当你用 () 包围它时，JavaScript 知道它是一个 Object 字面量。

---

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

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

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

会打印

 a: 1 
 a: 1 

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