Object.defineProperty和Proxy实现拦截的区别

syt_10132025-12-16 19:06

1.Object.definedProperty的实现拦截必须得声明一个额外的变量，例如下面这样

javascript 复制代码

const obj = {};
let _data = "这是一些数据";
Object.defineProperty(obj, "data", {
  get() {
    console.log("读取data的操作被拦截了");
    return _data;
  },
});
console.log(obj.data);

但是如果你这么写，就会报错，栈溢出,因为递归调用了

2.使用proxy,可以定义空对象，里面不写属性值，他不会报栈溢出的原因也是因为没有递归调用，根本原因是因为拦截器返回的不是它本身，而是obj的属性值

javascript 复制代码

const obj = {
};
const p = new Proxy(obj, {
  get(obj, prop) {
    console.log(`${prop}的读取操作被拦截了`);
    return obj[prop];
  },
});
console.log(p.data);
console.log(p.name);

3.如果你这么写，同样会报栈溢出

5.如果想要实现和proxy类似功能，可以这样写

javascript 复制代码

const obj = {
    name:'syt',
    age:4
};
const handler = {
  get(target, prop) {
    console.log(`${prop}的读取操作被拦截了`);
    return target[prop];  // target是另一个对象
  },
  set(target, prop, value) {
    console.log(`${prop}的设置操作被拦截了`);
    target[prop] = value;  // target是另一个对象
    return true;
  }
};

// 手动实现类似Proxy的功能
function createProxy(target, handler) {
  const proxy = {};
  Object.keys(target).forEach(key => {
    Object.defineProperty(proxy, key, {
      get() {
        return handler.get(target, key);  // 这里不会递归
      },
      set(value) {
        handler.set(target, key, value);
      }
    });
  });
  return proxy;
}

const p = createProxy(obj,handler);
console.log(p.name)
p.age=18

6.但是，这种写法，也是必须的在obj中写上所有的key,才可以拦截到，如果你不写的话就拦截不到

7.如果使用proxy的话，就可以不用定义key,写一个空的对象就可以

当然这两个只是拿get和set来做对比，简单记录下