js模拟proxy

124 阅读1分钟

模拟实现proxy

  • hasOwnProperty 只判断当前对象的属性,不包括原型
  • defineProperty 为当前对象的某一个属性设置 数据属性或者访问属性
function deepClone(target) {
  if (typeof target !== 'object' || target == null) {
    return target;
  }
  const res = target instanceof Array ? [] : {};
  for (let key in target) {
    if (target.hasOwnProperty(key)) {
      if (typeof target[key] == 'object' && target[key] !== null) {
        res[key] = deepClone(target[key]);
      } else {
        res[key] = target[key];
      }
    }
  }
  return res;
}

function MyProxy(target, handler) {
  const _target = deepClone(target);
  Object.keys(_target).forEach((item) => {
    Object.defineProperty(_target, item, {
      get() {
        return handler.get && handler.get(target, item);
      },
      set(newval) {
        return handler.set && handler.set(target, item, newval);
      },
    });
  });
  return _target;
}

测试

const target = {
  name: 'wjg',
  age: 18,
};

const proxy = new MyProxy(target, {
  get(target, prop) {
    console.log('Get Value: ' + target[prop]);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('Set prop: ' + prop + ' to value:' + value);
    target[prop] = value;
  },
});