ES6 Proxy API

Sungsic Hyun
10 min readDec 2, 2015

--

지원 브라우저 (https://kangax.github.io/compat-table/es6/)
- FireFox : 38 이상 부터 적용.
- IE EDGE
- Babel 은 지원 되지 않음.

Proxy API는 기본 Object 또는 Function 객체의 내장 함수 동작을 재정의하여, 대리 Proxy 객체 생성을 지원 하는 API.
원본객체의 복사본이 생성되는 방식이 아니라 원본 객체의 함수만 hooking 하여 Filtering 하는 동작 방식.

Proxy 에서 주로 사용하는 3가지 정의

  • Target : Proxy의 원본이 되는 Object or Function
  • Traps : Taget 의 원본객체의 재정의 대상 함수. 재정의를 통해 원하는 다른 동작을 주입할수 있음.
  • Handler : Target에 재정의 하고 싶은 함수 Handler

Traps

  • Object 에 정의된 내장 함수.
  • Filter 방식으로 동작하기때문에 원본 객체의 원래 동작은 그데로 유지 해주기 위해 함수 실행조건이나 반환 해야할 값에 대한 Rule이 존재.
  • Rule을 지키지 않을 경우 TypeError 가 발생 한다.

Object Proxy 지원

get(target, property, receiver) 함수

Object 의 property 를 가져오는 get 함수 trap.
Reflect.get() 호출과 동일.

Property 가 함수인 경우에도 적용.

# receiver 의 변수는 get을 실행하는 원본 객체의 Reference.
# Proxy의 중첩 실행시 원래 호출 하는 원본객체의 Reference 를 제공.
#실행 실패시 Prototype Chain 을 따라 연결된 다른 proxy 실행.
#다른 Trap 함수의 receiver 변수도 동일하게 동작.

Rule

Target객체 Property가 none-writeable, none-configure 상태가 아닌경우 Target Property 와 같은 반환 값을 가져야 한다.

Target 객체 Property가 none-configure 상태이고 Target의 property 가 undefined 인경우 반드시 undefined 를 반환해야한다.

set(target, property, value, receiver) 함수

Object 의 property 를 설정하는 set 함수 trap.
기존 Property 를 변경하거나, 새로운 Property를 추가한다.
Reflect.set() 호출과 동일.

Property 가 함수인 경우에도 적용.

# set 의 경우 Property 설정이 정상적으로 된경우 true 반환. 실패했을시 false 로 반환.

Rule

Target 객체 Property가 none-writeable, none-configure 상태인 경우 Property를 변경할수 없고, false 값을 반환 한다.

Target 객체 Property가 none-configure 상태이고 Target의 property Set 이 undefined인 경우 항상 false 를 반환한다.

has(target, property) 함수

Object 의 property 가 존재하는 지 여부를 확인하는 trap.
Reflect.has() 호출과 동일.

# Property 가 있을 경우 true 반환. 없는경우 false 반환.

Rule

Target 객체의 Property가 존재하고 none-configure 상태인 경우 false 값을 반환 할 수 없다.

Target 객체가 not Extensible 객체이고 Target에 property 가 존재하는 경우 false 를 반환할 수 없다.

isExtensible(target) 함수

Object 가 확장가능 한 상태인지 확인하는 trap.
Object.isExtensible() 을 사용.
Reflect.isExtensible() 호출과 동일.

# 확장 가능한 경우 true 반환. 아닌 경우 false 반환.

Rule

Target 객체가 확장 가능한 경우 false를 반환 할 수 없다.

Target 객체가 확장 불가능한 경우 true를 반환 할 수 없다.

getPrototypeOf(target) 함수

Object 의 내부 Prototype 속성을 가져 올 때 사용.
Object.getPrototypeOf() 또는 __proto__ 접근시 사용.
Reflect.getPrototypeOf() 호출과 동일.

#반환값은 Object 또는 null 만 반환.
# Target 객체의 Prototype이 null 인경우 Prototype Chain 상속 부분까지 확인.

Rule

반환 값은 Object 또는 Null 만 가능.

Target 객체가 비확장 상태인 경우 현재 Prototype 대상으로만 값을 반환.

setPrototypeOf(target, prototype) 함수

Object 의 내부 Prototype 속성을 설정 할 때 사용.
Object.setPrototypeOf() 또는 __proto__ 접근시 사용.
Reflect.setPrototypeOf() 호출과 동일.

#Prototype 설정이 정상적으로 된경우 true 반환. 실패했을시 false 로 반환.

Rule

Target 객체가 비확장 상태인 경우 반드시 false 반환.

preventExtensions(target) 함수

Object 의 새로운 Properties 의 추가를 방지 하는 trap.
Object를 none-extensible 상태로 변환.
Object.preventExtensions() 사용.
Reflect.preventExtensions() 호출과 동일.

#preventExtention 설정이 정상적으로 된경우 true 반환.
#실패했을시 false 로 반환.

Rule

Target 객체가 비확장 상태인 경우 true반환.

getOwnPropertyDescriptor(target, prototype) 함수

Object 의 Property 의 Description 을 반환 하는 trap.
Object.getOwnPropertyDescriptor() 사용
Reflect.getOwnPropertyDescriptor() 호출과 동일.

#반환값은 description 객체 또는 undefinded 반환.

Rule

반환 값은 Object 또는 undefined.

Target 객체의 Description Property가 존재하는 경우 undefined 를 반환 할 수 없다.

Target 객체가 비확장 상태이고, Description Property가 존재하면 undefined 를 반환 할 수 없다.

Target 객체가 비확장 상태이지만, Description Property가 존재하지 않으면 undefined 를 반환 할 수 있다.

Target 객체에 Description Property 가 설정된 경우, configurable 속성을 false 로 만들 수 없다.

defineProperty(target, prototype) 함수

Object 의 Property 의 Description 을 설정 하는 trap.
Object.defineProperty() 사용
Reflect.defineProperty() 호출과 동일.

# 설정이 정상적으로 된경우 true 반환.
# 실패했을시 false 로 반환.

Rule

Target 객체가 비 확장 상태이고, property가 없는 경우 반드시 false를 반환 해야 한다.

deleteProperty(target, prototype) 함수

Object 의 Property 를 삭제 하는 trap.
delete 연산자를 사용.
Reflect.deleteProperty() 호출과 동일.

# 삭제가 정상적으로 된 경우 true 반환.
# 실패했을시 false 로 반환.

Rule

Target 객체의 Property 가 none-confiurable 인경우 반드시 false 를 반환 해야 한다.

enumerate(target) 함수

Object 의 Property 의 key 기준으로 순환하는 iterator 생성 trap.
Reflect.enumerate() 호출과 동일.

# iterator 객체 반환.

Rule

반드시 Object 객체를 반환 해야함.

ownKeys(target) 함수

Object 의 Property 의 key 반환.
Object.getOwnPropertyNames(), Object.getOwnPropertySymbols(),
Reflect.ownKeys() 호출과 동일.

# Reflect.ownkeys 경우 Symbol 타입과 String 타입의 Key를 모두 반환.
# Object.getOwnPropertyNames() 의 경우 String 만 반환.
#Reflect.ownkeys / Object.getOwnPropertyNames / Object.getOwnPropertySymbols 경우 enumerable / none-enumerable Key 모두를 반환.
# Object.keys 의 경우 enumerable 인 Key 만 반환.

Rule

String 이나 Symbol 로 구성된 배열로 반환 해야한다.

Target 객체의 모든 none-configurable Property 의 Key 값가지 포함해야 한다.

Target 객체가 비확장 상태인 경우에도 모든 Key 값을 반환 해야 한다.

Function Proxy 지원

apply(target, this, args) 함수

함수의 call, apply 와 동일한 함수 실행 trap.
Reflect.apply() 동작과 동일.

construct(target, args) 함수

new 연산자로 인스턴스 생성시 호출되는 trap.
Reflect.construct() 동작과 동일.

Proxy.revocable

비활성화 Option 이 가능한 Proxy 객체 생성 하는 static 함수.
함수 실행시 Object로 반환 하는데, 다음 2개의 Property를 가진다.

  • proxy : revocable Proxy 객체.
  • revoke : proxy 객체의 비활성화.

revoke 된 Proxy의 경우 Proxy 에서 설정한 trap 을 실행시 TypeError 를 발생 시킨다.

Revocable Proxy는 비동기 / 병렬 실행시 원치않는 경우에 어느때나 Proxy를 비활성화 시킬수 있다.

Proxy의 활용

  • 원격객체, 저장 객체등의 시각화
  • Constructor 의 Proxy 등을 통해 Object의 Lazy 생성.
  • logging, profileing
  • I18n 등의 국제화 기능 적용시 유효.
  • 접근 제어의 추상화.

실용예제

Object Logger

Twoway Bind

--

--