web-dev-qa-db-ja.com

矢印機能付きES6ゲッター/セッター

私はbabel6を使用しています。私のペットプロジェクトでは、使用できるメソッドのためにXMLHttpRequestのラッパーを作成しています。

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

しかし、プロパティの矢印関数は機能しません

これは動作します：

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

しかし、私は使用できません

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

これは意図的なものですか？

ecmascript-6babeljs
69
Gabor Dolla

ES2015文法によると、 オブジェクトリテラルのプロパティ は、次の4つのいずれかのみです。

PropertyDefinition：

  • IdentifierReference
  • PropertyName:AssignmentExpression
  • MethodDefinition

これらのタイプのうち、先頭のgetを許可する唯一のタイプは MethodDefinition です。

MethodDefinition：

  • PropertyName(StrictFormalParameters){FunctionBody}
  • GeneratorMethod
  • getPropertyName(){FunctionBody}
  • setPropertyName（PropertySetParameterList){FunctionBody}

ご覧のとおり、getフォームは非常に限られた文法に従っています。

get NAME () { BODY }

文法では、get NAME = ...という形式の機能は許可されません。

78
apsillers

受け入れられた答えは素晴らしいです。 compact "arrow function syntax"。の代わりにnormal関数構文を使用したい場合に最適です。

しかし、矢印関数が本当に好きかもしれません。別の理由で矢印関数を使用するかもしれません通常の関数構文では置き換えられません別の解決策が必要になる場合があります。

たとえば、OPがthisを使用していることに気づいた場合、 bind this lexically;別名 "non-binding of this" ）を使用できます。

_Object.defineProperty_テクニックを使用して、ゲッターで矢印関数を引き続き使用できます。

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

_object initialization_ technique（aka get NAME() {...}） vs defineProperty technique（aka get : ()=>{}） 。少なくとも1つの重要な違いがあります。definePropertyを使用するには、変数が既に存在する必要があります。

既存のオブジェクトでゲッターを定義する

すなわち、_Object.defineProperty_を使用すると、（私の例では）_your_obj_が存在し、変数に保存されていることを確認する必要があります（一方、_object-initialization_を使用すると、オブジェクト初期化でオブジェクトリテラルを返すことができます：{..., get(){ }, ... }）。 _Object.defineProperty_具体的にはこちら の詳細

Object.defineProperty(...)には、get NAME(){...}構文に匹敵するブラウザーサポートがあるようです。最新のブラウザ、IE 9。

24
The Red Pea