带箭头功能的ES6吸气剂/吸气剂


100

我正在使用babel6,对于我的宠物项目,我正在为XMLHttpRequest创建一个包装器,以供使用的方法:

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

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

这有效:

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

但我不能使用

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

这是故意的吗?


您不需要大括号或返回号;你可以说(method, url, something) => this.xhr.open(method. url, something)

get是对象文字或类定义的一部分,不是变量分配。您为什么认为他们应该一样工作?
Bergi 2015年

1
status => this.xhr.status(c#7语法),或者可能get status() => this.xhr.status确实是可读性很好的语法糖,但不是Typescript的Java语言不支持(还?)
Charles HETIER

Answers:


108

根据ES2015语法,对象文字的属性只能是以下四项之一:

属性定义

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

这些类型中唯一允许领先的getMethodDefinition

方法定义

  • PropertyName ( StrictFormalParameters ) { FunctionBody }
  • 生成器方法
  • get PropertyName ( ) { FunctionBody }
  • set PropertyNamePropertySetParameterList ) { FunctionBody }

如您所见,该get表格遵循非常有限的语法,该语法必须具有以下形式

get NAME () { BODY }

语法不允许使用形式的功能get NAME = ...


感谢您的帮助,我接受您的回答。您知道哪里定义了getter / setter不能与分配一起使用吗?只是好奇。
Gabor Dolla

@GaborDolla编辑以引用ECMAScript规范中的对象文字语法。
asperers

35

公认的答案是伟大的。如果您愿意使用普通的函数语法而不是紧凑的“箭头函数语法”,那是最好的。

但是也许您真的很喜欢箭头功能;也许您使用箭头函数的另一个原因是普通函数语法无法替代 ; 您可能需要其他解决方案。

例如,我注意到OP使用this,您可能想按词法绑定this;也称为“此对象的非绑定”),而箭头函数则适合该词汇绑定。

您仍然可以通过该Object.defineProperty技术将箭头功能与吸气剂配合使用。

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

请参见object initialization技术(aka get NAME() {...}defineProperty技术(aka get : ()=>{})的提及。至少存在一个显着差异,使用defineProperty要求变量已经存在:

现有对象上定义吸气剂

也就是说,Object.defineProperty您必须确保your_obj(在我的示例中)存在并将其保存到变量中(而使用a则object-initialization可以在对象初始化中返回对象字面量:){..., get(){ }, ... }具体在这里的更多信息Object.defineProperty

Object.defineProperty(...)似乎对get NAME(){...}语法的浏览器支持可比;IE 9的现代浏览器。


10
聪明,但最终的冗长不只是:get status() { return this.xhr.status; }
devuxer

2
@devuxer我同意它太冗长。但需要明确的是,您this 必须get status() { ... }是定义您的对象。但是由于词汇绑定的不同, this 可能还有其他事情,对吗?
红豌豆

2
同意...尽管在实践中,我还没有遇到过this在get访问器中不需要的情况。(this箭头函数的绑定优势似乎在传递函数时发挥作用,例如事件处理程序和回调。)
devuxer

3
我同意,我经常将胖箭头+词汇绑定()=>{}用于传递给Promise的回调,例如$http(...).then((promise_result)=> this...}))。如果我不使用粗箭头,this将代表全局Window对象;不是很有用。但是我很少(从来没有?)()=>{}就像您所说的那样用作“获取访问器”的函数……至少thisget()它将代表get()定义的对象上(该对象已经比Window; 有用;因此无需使用一个胖箭头功能!)
红豌豆
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.