认识Proxy

1.应用场景

• vue 数据劫持
• immer 实现immutable数据
• qiankun实现js环境的隔离

2. 实例

• defineProperty
  数组的设置

const p = new Proxy([], {
  defineProperty(target, prop, descriptor) {
    console.info("defineProperty", target, prop, descriptor);
    return Reflect.defineProperty(target, prop, descriptor);
  },
});

p.push(100); // 会触发defineProperty，会使p更新
p[1] = "ooo"; // 会触发defineProperty，会使p更新
console.info(p);

以上两种方式都会触发defineProperty

Detecting changes in a Javascript array using the Proxy object

对象的设置

const obj = { age: 10 };

const p = new Proxy(obj, {
  defineProperty: function (target, p, attributes) {
    console.info("defineProperty");
    return Reflect.defineProperty(target, p, attributes);
  },
});

p.title = "xxzxx"; // 会触发defineProperty,会使p更新
Object.defineProperty(p, "lll", { value: "oooo" }); // 会触发defineProperty，不会使p更新
console.info("ret:", p);

• set
  深度设置

const obj = { age: 10, person: { age: 99 } };

const p = new Proxy(obj, {
  set: function (target, p, value, receiver) {
    console.info("set", target, p, value);
    return Reflect.set(target, p, value, receiver);
  },
});

p.person.title = 199;
// p.title = 199;

console.info(p);

输出：
{ age: 10, person: { age: 99, title: 199 } }
p被改变了，但是set函数没被调用，深度属性并不能被劫持