[ecmascript-6] ES6 게터 / 세터 (화살표 기능 포함)

Program / 글쓴이

나는 babel6을 사용하고 있고 내 애완 동물 프로젝트를 위해 사용할 수있는 방법에 대해 XMLHttpRequest에 대한 래퍼를 만들고 있습니다.

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

하지만 속성 화살표 기능이 작동하지 않습니다.

이것은 작동합니다 :

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

하지만 사용할 수 없습니다

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

의도적입니까?

답변

ES2015 문법에 따르면 객체 리터럴의 속성 은 다음 네 가지 중 하나만 될 수 있습니다.

PropertyDefinition :

  • IdentifierReference
  • PropertyName : 할당 표현
  • MethodDefinition

선행을 허용하는 유일한 유형 get은 MethodDefinition입니다 .

MethodDefinition :

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

보시다시피, get양식 은 형식이어야하는 매우 제한된 문법을 따릅니다.

get NAME () { BODY }

문법은 형식의 기능을 허용하지 않습니다 get NAME = ....

답변

받아 들여지는 대답은 훌륭합니다. 압축 된 “화살표 함수 구문” 대신 일반 함수 구문 을 사용하려는 경우 가장 좋습니다 .

하지만 화살표 기능을 정말 좋아할 수도 있습니다. 일반 함수 구문으로 대체 할 수없는 다른 이유로 화살표 함수를 사용할 수 있습니다 . 다른 솔루션이 필요할 수 있습니다.

예를 들어, OP가를 사용하는 것을 알았습니다 . 어휘 적this 으로 바인딩this 할 수 있습니다 . 일명 “non-binding of this” ), 화살표 함수는 어휘 바인딩에 좋습니다.

이 Object.defineProperty기술을 통해 getter와 함께 화살표 함수를 계속 사용할 수 있습니다 .

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

관련 항목의 언급 object initialization기술 (일명 get NAME() {...}) 은 VS defineProperty기술 (일명 get : ()=>{}) . 최소한 하나의 중요한 차이가 있습니다. 사용 defineProperty하려면 변수가 이미 있어야합니다.

기존 객체에 게터 정의

즉, (내 예에서) 존재하고 변수에 저장되어 Object.defineProperty있는지 확인해야합니다 your_obj(반면에 object-initialization객체 초기화에서 객체 리터럴을 반환 할 수 있습니다 🙂 {..., get(){ }, ... }. 자세한 Object.defineProperty내용은 여기

Object.defineProperty(...)get NAME(){...}구문 과 비슷한 브라우저 지원이있는 것 같습니다 . 최신 브라우저, IE 9.

답변