Proxy

let hero = {
  name: "赵云",
  age: 25
}

let handler = {
  get:(hero,name)=>{
    const heroName = `英雄名是${hero.name}`
    return heroName
  },
  set:(hero,name,value)=>{
    console.log(`${hero.name}change to${value}`)
    hero[name] = value
    return true
  }
}

let heroProxy = new Proxy(hero, handler);

console.log(heroProxy.name);
heroProxy.name = "黄忠";
console.log(heroProxy.name);

let hero = {
  name:'赵云',
  hp: 100,
  sp: 100,
  equipment:['马','长枪']
}

let handler = {
  set(target, property, value) {
    console.log(`hero's ${property} change to ${value}`);
    target[property] = value;
    return true;
  }
}

// let heroProxy = new Proxy(hero, handler);
// heroProxy.hp = 200;
// // --> hero's hp change to 200
// console.log(hero.hp);
// // --> 200

let heroProxy = new Proxy(hero.equipment, handler);
heroProxy.push('佩剑');
console.log(hero.equipment);
// --> ["马", "长枪", "佩剑"]

let hero = {
  name: '赵云',
  hp: 100,
  sp: 100,
  equipment: ['马', '长枪']
}

let handler = {
  get(target, name, receiver) {
    if (name === "name") {
      console.log("success");
    } else {
      console.log("failure");
    }
    return Reflect.get(target, name, receiver);
  }
}

let heroProxy = new Proxy(hero, handler);
console.log(heroProxy.name);
// --> success
// --> 赵云

观察者模式

let hero = {
  name: '赵云',
  hp: 100,
  sp: 100,
  equipment: ['马', '长枪']
}

const handler = {
  set(target, key, value, receiver) {
   //  console.log('目标对象', target)
   //  console.log('属性名称', key)
   //  console.log('值', value)
   //  console.log('上下文', receiver)
    // 内部调用对应的 Reflect 方法 返回值：boolean
    const result = Reflect.set(target, key, value, receiver);

    // 回调：执行观察者队列
    observableArray.forEach(item => item());
    return result;
  }
}

// 初始化Proxy对象，设置拦截操作
const createProxy = (obj) => new Proxy(obj, handler);
// 被观察者代理（英雄代理）
const heroProxy = createProxy(hero);


// 初始化观察者队列
const observableArray = new Set();

// 将监听函数加入队列
observableArray.add(() => {
  console.log('观察者监听函数',heroProxy.name);
});

heroProxy.name = "黄忠";

参考文章

• 深入实践 ES6 Proxy & Reflect