带有箭头功能的 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 只能是以下四种之一：

属性定义：

• 标识符参考
• PropertyName : AssignmentExpression
• 方法定义

这些类型中唯一允许使用前导get 的是MethodDefinition：

方法定义：

• PropertyName ( StrictFormalParameters ) { FunctionBody }
• GeneratorMethod
• get PropertyName ( ) { FunctionBody }
• set PropertyName (PropertySetParameterList ) { FunctionBody }

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

get NAME () { BODY }

语法不允许get NAME = ... 形式的函数。

Answer 2

接受的答案很棒。如果您愿意使用普通函数语法而不是紧凑的“箭头函数语法”，那是最好的。

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

例如，我注意到 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() {...}) 与 defineProperty technique (aka get : ()=>{}) 的提及。至少有一个显着差异，使用defineProperty需要变量已经存在：

在现有对象上定义一个getter

即对于Object.defineProperty，您必须确保your_obj（在我的示例中）存在并保存到一个变量中（而对于object-initialization，您可以在对象初始化中返回一个对象文字：{..., get(){ }, ... }）。更多信息Object.defineProperty specifically, here

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