javascript - ES6(5) Proxy

object가 변경, 추가, 삭제 됐을 때 부수적인 일을 실행한다.

const myObj = {
  name: "dongha"
  
}

const proxy = new Proxy(myObj, {})
console.log(proxy.name) // dongha

myObj를 수정할 것이다.

const myObj = {
  name: "dongha"
  
}

const proxy = new Proxy(myObj, {
  get : function(){

  },
  set : function(){
    console.log("chnage value")
  }
})
console.log(proxy.name) // undefined
proxy.name = "dongha" // change value

어떤 변화를 주면 set 함수가 자동으로 호출된다.

const myObj = {
    name: "dongha"

}

const proxy = new Proxy(myObj, {
    get: function(target, property, receiver) {
        console.log("get value")
        return target[property]
    },
    set: function(target, property, value) {
        console.log("set value")
        target[property] = value
    }
})
console.log(proxy.name) // get value dongha

get 함수는 리턴을 하는데 get 함수 파라메터로 target, property, receiver를 준다. receiver는 proxy 객체 자체를 얘기한다. target은 myObj 변수에 할당된 객체다.

name을 호출하면 get 함수가 자동 리턴된다.

사용자가 얼마나 변경했는지 확인하는 로그(?)를 표시하려면

const myObj = {
    name: "dongha",
    changedValue = 0;
}
  set : function(target, property, value){
    console.log("set value")
    target["changedValue"]++;
    target[property] = value;
  }

myObj에 디폴트 변수를 주고 set에 set이 실행될 때마다 1씩 오르게 해주면 된다.

전역 변수(myObj)를 삭제하고 proxy 안에 프로퍼티를 설정하면 은닉도 된다.

출처 : https://www.inflearn.com/course/es6-%EA%B0%95%EC%A2%8C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/lecture/7022?speed=1.5&tab=note