Javascript Proxy 와 Reflect 간단 정리하기

최근 Proxy 와 Reflect 을 알게되어 간단히 정리해보고자 한다.

Javascript 에서 Proxy 는 객체를 Wrapping 하고 객체의 동작을 가로채 수정하거나, 추가 행동을 할 수 있게 해준다.

간단 예제

  1. Obj 객체를 생성 합니다.
  2. Proxy 로 생성한 Obj 를 Wrapping 합니다.
  3. proxy_object 의 proxy_value 를 호출합니다.
  4. 이때 Proxy 객체를 생성할때, 선언한 handler 에 get 함수가 있었기 때문에, 해당 proxy_object 의 프로퍼티를 호출 할때, handler 의 get 함수를 먼저 호출합니다.
  5. 만약 Proxy handler 의 반환자로 Reflect 를 반환했다면, origin_object 객체를 탐색합니다.

Proxy 에서 가로챌수 있는 항목들

Property

  • get
  • set
  • has
  • deleteProperty

Method

  • apply
  • construct

Object

  • getPrototypeOf
  • setPrototypeOf
  • isExtensible
  • preventExtensions
  • getOwnPropertyDescriptor
  • defineProperty
  • ownKeys

Javascript 에서의 Object 는 어떻게 동작할까

Javascript 에서 Object 는 프로퍼티로 구성되어 있으며, key 와 value 형태로 구성되어 있다.

각 프로퍼티는 object.key 혹은 object[“key”] 형태로 접근할 수 있다.

Object 의 프로퍼티에 접근 하게되면 [[Get]] 연산을 진행한다

[[Get]] 연산은 주어진 이름의 프로퍼티를 찾아보고 있으면, 그 값을 반환한다

만약 해당 객체의 프로퍼티가 없다면, [[Get]] 연산은 [[Prototype]] 링크를 따라 일치하는 프로퍼티 명이 나올 때까지 연쇄 과정을 반복하게 된다.

Object.prototype 까지 찾아가도 없다면, undefined 를 반환한다.

Javascript Proxy 와 Reflect

Javascript Proxy 는 Handler 에서 지정한 연산자중에 Target Object 에서 발생한 행동을 가로채서 추가행동을 이어갈 수 있다.

Target Object 에서 [[Get]] 연산이 발생하면, Proxy Handler 에 정의한 get 함수가 먼저 호출하게 된다.

때문에, get 함수에 정의한 내용에 따라 Target Object 의 [[Get]] 연산과 별개로 동작이 가능하다.

만약 Target Object 의 [[Get]] 연산을 이어나가고 싶다면, Reflect.get 으로 처리가 가능하다

만약 Handler 에 get 을 따로 정의하지 않았다면, Target Object 의 [[Get]] 연산을 처리한다.

Proxy API 는 object 뿐만 아니라 function 의 행동 또한 가로챌 수 있다.

function 을 Proxy 할때는 apply(target, thisArg, args) 를 사용할 수 있다.

Reflect 는 Proxy 와 동일한 Method 를 가지고 있으며, Proxy 내에서 Reflect 를 반환하면 사이드 이펙트 없이 사용이 가능하다.

또한 반드시 Proxy 내부에서만 사용할 필요없이 따로 사용이 가능하다.

Proxy.revocable

Proxy.revocable 는 Target Object 를 참조하던 Proxy 객체를 해제할 수 있는 revoke 를 추가적으로 제공한다.

Proxy 객체의 Target Object 는 원본이 null 이 되더라도 반영되지 않는다.

때문에, revoke 를 이용하면 명시적으로 제거가 가능하다.

Proxy Polyfill

Proxy API 는 ES6 SPEC 이기 때문에, 최신 브라우저에서는 Proxy API 가 잘 지원하지만, ES5 이하를 지원하는 브라우저는 사용이 어렵다.

때문에 Babel transfer 만으로는 지원이 어렵다.

하지만 Google 팀에서 proxy-fill 만든 도구가 있으며, IE 9 까지 지원한다

모든 기능을 지원하지는 않으며 get, set, apply, construct 를 지원한다

Javascript is great We may not be great

Love podcasts or audiobooks? Learn on the go with our new app.