ES6胖箭和Parentheses `(.) => ({.})`

Question

我一直在研究一些Graph /React/Relay示例，并遇到了一些奇怪的语法。

在图QL对象中定义字段时，使用了以下语法：

const xType = new GraphQLObjectType({
  name: 'X',
  description: 'A made up type for example.',
  fields: () => ({
    field: {/*etc.*/}
  })
});

据我所知，这只是定义一个匿名函数并将其分配给xType.fields。该匿名函数返回包含字段定义的对象。

但是，我假设Graph模式机制起作用，必须将其定义为返回对象的函数，而不是简单的对象。但让我困惑的是花括号周围的括号。

这是为了区分对象定义和函数定义吗？这是为了清晰的读者吗？

谷歌搜索发现的唯一类似的语法是airbnb风格的指南，它似乎是一个可读性/清晰性的东西。

只是寻找确认或解释超出我的假设，因为我开始玩图形QL更多一点。

Answer 1

fields: () => ({
  field: {/*etc.*/}
})

是一个隐式返回对象(文字)的函数。在不使用()的情况下，JavaScript解释器将{}解释为函数体的包装器，而不是对象。

在不使用parens：()的情况下，field: ...语句被视为label语句，函数返回undefined。等效的语法是：

fields: () => { // start of the function body
   // now we have to define an object 
   // and explicitly use the return keyword
   return { field: {/*etc.*/} }
}

因此，家长们并不是为了清晰而去的。它用于使用箭头函数的隐式返回特性。

Answer 2

这对于编译器和读者来说都是清晰的。在您的示例中，field:语法似乎是明确的，这是一个对象文本，但是以下面的代码为例：

​

let f = () => {
  field: 'value'
}

console.log(f()) //=> undefined

​

您可能期望这会记录一个field设置为'value'的对象，但它会记录undefined。为什么？

本质上，您所看到的具有单个属性的对象文本，编译器将其看作一个函数体(通过大括号的开始和结束来表示，就像一个典型的函数)和一个标号语句，后者使用语法label:。由于下面的表达式只是一个文字字符串，而且它从未被返回(甚至分配给一个变量)，所以函数f()实际上什么也不做，其结果是undefined。

但是，通过在“对象文字”周围加上括号，可以告诉编译器将相同的字符视为表达式，而不是一堆语句，这样就返回了您想要的对象。(请参见注释部分中的本文介绍Mozilla开发网络 )。

​

let g = () => ({
  field: 'value'
})

console.log(g()) //=> { field: 'value' }

​