Proxy和defineProperty实现数据观察（观察者模式）【黑马web前端】

const person = {
  name: 'haorooms',
  age: 20
};
Object.keys(person).forEach(function(key) {
  Object.defineProperty(person, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('get');
    },
    set: function(newVal) {
      // 当属性值发生变化时我们可以进行额外操作
      console.log(`欢迎大家来到${newVal}`);
    },
  });
});
person.name = '前端';

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}
const person = observable({
  name: 'haorooms',
  age: 5
});

function print() {
  console.log(`${person.name}, ${person.age}年了`)
}
observe(print);
person.name = 'cxk已经';