javascript 특강 - Proxy 객체

🌈 자바스크립트에서 Proxy 객체

사용법

아래와 같이 정의

const proxy = new Proxy(target, handler)

target 감싸질 객체. Proxy의 대상이 되는 객체
handler target의 여러 트랩을 정의

📌 예제 코드

const target= {};
const proxy = new Proxy(target, {}) //핸들러가 없는 proxy 객체 정의

proxy.test = 5; // 1. proxy에 새로운 프로퍼티 'test' 추가
console.log(proxy.test) // 2. proxy의 test 프로퍼티를 읽을 수 있다. 당연히 5가 출력
console.log(target.test) // 3. 원래 객체인 target의 test 프로퍼티에도 5가 저장된다

1️⃣ Proxy: [[Get]]

이번에는 proxy에 핸들러를 추가해서 가장 기본적인 동작인 get부터 사용해보자
get은 객체의 값을 읽을 때 호출된다

// get 사용방법
const target= {};
const proxy = new Proxy(target, {
	get(target, prop, receiver){
      console.log(target,prop, receiver)
    }
})

proxy.test = 5;
console.log(proxy.test) //출력: { test: 5 } test { test: 5 }

get메서드는 기본적으로 다음 세가지 인자를 받는다

target new Proxy의 첫번째 인자로 주었던 target 객체
prop 조회한 property
receiver getter가 호출될 때 this. 기본적으로는 객체 자신을 호출하지만 상속받은 객체일 경우에는 상속한 객체가 this가 된다. 예제코드에서는 사용하지 않을거니 신경안써도됨

파라미터로 받은 인자들로 새로운 동작을 정의하면 된다
이번에는 새로운 동작을 정의해보자

// get 사용 예제
const target= {};
const proxy = new Proxy(target, {
	get(target, prop){
      return `${prop}을 조회했더니 ${target[prop]}가 나왔당~!`
    }
})

proxy.test = 5;
console.log(proxy.test) // test을 조회했더니 5가 나왔당~!