# Proxy和Reflect

const target = {
  name: 'zs',
  count: 0
};

let proxy = new Proxy(target, {
  get(target, property) {
    console.log(`get ${property}`);
    return Reflect.get(target, property);
  },
  set(target, property, value) {
    console.log('正在修改', property);
    // // 表示成功
    Reflect.set(target, property, value);
    return true
  }
});

console.log(proxy.name);
proxy.name = 'ls';
console.log(proxy.name);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用Proxy包装后

const product = { price: 10, quantity: 2 };

function reactive(target) {
  const handler = {
    get(target, key, receiver) {
      console.log("正在读取的数据", key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log("正在修改的数据:", key, ",值为:", value);
      return Reflect.set(target, key, value, receiver);
    }
  };
  return new Proxy(target, handler);
}
let proxiedProduct = reactive(product); // 将对象转换为响应式对象
proxiedProduct.price = 20;
console.log(proxiedProduct["price"]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Reflect.getPrototypeOf用于获取一个对象的原型(prototype)