ES6 getter/setter 带箭头功能

Question

我正在使用 babel6，对于我喜欢的项目，我正在为 XMLHttpRequest 创建一个包装器，用于我可以使用的方法：

open = (method, url, something) => {
  return this.xhr.open(method, url, something);
}

但是属性箭头功能不起作用

这个有效：

get status() { return this.xhr.status; }

但是我不能用

get status = () => this.xhr.status;

这是故意的吗？

Answer 1

根据 ES2015 语法，a property on an object literal 只能是以下三种情况之一：

PropertyDefinition:

IdentifierReference

PropertyName : AssignmentExpression

MethodDefinition

这些类型中唯一允许前导 get 的类型是 MethodDefinition:

MethodDefinition :

PropertyName ( StrictFormalParameters ) { FunctionBody }

GeneratorMethod

get PropertyName ( ) { FunctionBody }

set PropertyName ( PropertySetParameterList ) { FunctionBody }

如您所见，get 形式遵循非常有限的语法，必须是

形式

get NAME () { BODY }

语法不允许 get NAME = ....

形式的函数

Answer 2

接受的答案很棒。如果您愿意使用 normal 函数语法而不是 compact "arrow function syntax".

则最好

但也许你真的很喜欢箭头函数；也许您出于其他原因使用箭头函数普通函数语法无法替代；您可能需要不同的解决方案。

例如，我注意到 OP 使用 this，您可能想要 bind this lexically; aka "non-binding of this")，箭头函数对词法绑定很有用。

您仍然可以通过 Object.defineProperty 技术使用带有 getter 的箭头函数。

{
  ...
  Object.defineProperty(your_obj, 'status', { 
     get : () => this.xhr.status 
  });
  ...
}

参见 object initialization technique (aka get NAME() {...}) vs the defineProperty technique (aka get : ()=>{}) 的提及。至少有一个显着差异，使用 defineProperty 要求变量已经存在：

Defining a getter on existing objects

即使用 Object.defineProperty 你必须确保 your_obj （在我的例子中）存在并保存到一个变量中（而使用 object-initialization 你可以 return 你的对象中的对象文字初始化：{..., get(){ }, ... })。有关 Object.defineProperty specifically, here

的更多信息

Object.defineProperty(...) 似乎具有与 get NAME(){...} 语法相当的浏览器支持；现代浏览器，IE 9.

ES6 getter/setter 带箭头功能

ES6 getter/setter with arrow function

ecmascript-6

babeljs