[ES6] Proxy

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy - JavaScript | MDN

proxy객체는 기본적인 동작(속성 접근, 할당, 순회, 열거 , 함수호출)의 새로운 행동을 정의할 때 사용한다.

 

쉽게 생각해 filter처럼 생각하면된다.

프록시 객체는 두개의 인자를 갖는다.  filter하고싶은 target과 handler가 필요하다.

hanlder는 trap들을 가지고 있는 placeholder객체 이다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy

Proxy() constructor - JavaScript | MDN

많은 trap들을 가지고 있다. 이 중 get과  delete를 사용해보자.

 

get의 경우

인자로 target, prop, receiver를 갖는다.

userObj라는 object가 하나있고 proxy의 타겟에 userObj를 넣어주고 핸들러를 통해 get trap을 사용햇다.

fiterUser.age를 해주면

traget은 해당 object가 나오고, prop은 age이며 receiver는 Proxy이다.

이제 trap의 return 값을 target[prop]해주면

제대로 값을 반환한다. 중간에 인터셉트하는 거라고 생각하면되나? 그냥 userObj.age로 해도 값을 얻을 수 있는데...

 

이거다... 예를 들면 이런 느낌? 중간에 인터셉트가 가능하니까 return되는 값도 바꿔줄 수 잇다. 기존 object를 변경하지 않아도~

 

deleteProperty도 한번 살펴보면

password를 삭제하려고 하면~ 중단시키고 아니라면 value를 DELETED로 override해보자.

그럼 기존 참조 object에도 영향이 갔을까?

그렇다 기존 오브젝트도 변경되었다.

 

음 사용할일이 많을지는 모르겠지만 역시 알아두자~