자바스크립트 ES6 프록시(Proxy)

2017-09-09

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

const myInfo = {
  name: 'baik'
};

const proxy = new Proxy(myInfo, {});
// Proxy(object, handler);

console.log(toString.call(proxy)); // object


console.log(proxy.name); // baik
proxy.name = 'junho';
console.log(proxy.name); // junho
console.log(myInfo.name); // junho


console.log(proxy === myInfo); // false
console.log(proxy.name === myInfo.name); // true
const myInfo = {
  name: 'baik',
  change: 0
};

const proxy1 = new Proxy(myInfo, {});

const proxy2 = new Proxy(myInfo, {
  get: function(target, property, receiver){
    console.log("get");
    return target[property];
  },
  set: function(target, property, value){
    console.log("set");
    target['change']++;
    target[property] = value;
  }
  // target => myInfo
  // receiver => proxy2
});


console.log(proxy1.name); // "baik"
console.log(proxy2.name); // "get" "baik"
console.log(proxy2.change); // "get" 0
proxy2.name = 'junho'; // "set"
console.log(proxy2.name); // "get" "junho"
console.log(proxy2.change); // "get" 1
console.log(myInfo.name); // "junho"

//porxy의 getter setter를 통해서 값을 가로채서 값을 변화시킨다거나,
//변경사항 로그를 남기는 등의 용도록 활용할 수 있다.

권장되는 패턴

const proxy = new Proxy(myInfo, {
  get: function(target, property, receiver){
    //...
    return Reflect.get(target, property);
    // Reflect 활용
  },

reference