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

Posted

技术标签:

【中文标题】如何在不重新绑定 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.propsundefined

所以我试试这个:

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 对象,而不是对象本身。

【讨论】:

以上是关于如何在不重新绑定 this 的情况下返回一个带有粗箭头函数的对象? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

带有geom_tile的热图如何在不使用构面的情况下根据另一个因素进行划分和重新排序

如何在不破坏内部绑定的情况下从外部初始化自定义项的属性?

以其他用户身份登录后,如何在不退出并重新登录 laravel 7 的情况下返回我的帐户

react-router:如何在不导致导航/重新加载的情况下更新 url?

如何在不重新启动树莓派本身的情况下重新启动 ALSA?

如何在不重新启动活动的情况下更新 recyclerview(来自 sqlite 的数据)