7.Proxy对象初探-监听器实现

let obj = {
  page: 5
}
let pro = new Proxy(obj, {
  // target:目标访问的对象属性
  // propKey:访问属性的键名
  // value:访问属性的键值
  // receiver:属性的原始值
  // 重写set方法后，如果不在方法内通过target[key]修改源对象属性值，则源对象和proxy对象的属性值都不会变化，也就是永远等于初始值
  // 所以只要拦截处理后，通过target修改源对象即可，proxy对象内会随之改变
  set: (target,propKey,value,receiver)=>{
    console.log(target);
    console.log(propKey);
    console.log(value);
    console.log(receiver);
    target[propKey] = value //也可以做别的处理，比如 value + 10
  },
  // 如果重写get方法后，如果没有return任何值，访问对象属性值显示undefined
  // get中return的值就是用户最终访问该属性的值，即使不是真正的值
  get: (target,propKey,reveiver)=>{
    return 1 //return 1 代表用户访问这个obj对象的属性时，永远只能获得 1
  }
})
pro.page = pro.page + 2
console.log(pro.page);

通过重写set方法实现一个监听器

Vue的响应式也是这样实现的

let pageNum = 1; // 当前页码，默认页码1
const pagination = document.getElementById('pagination') // 表示页数/当前页的DOM元素
// 用一个代理对象包装页码，用于监听值的变化
let page = new Proxy({ pageNum }, {
  set: (target, key, value) => {
    // 如果值发生变化，则修改页面上的数据
    pagination.innerText = `共 ${maxPage} 页，当前 ${value} 页`
    target[key] = value //记得一定要修改源对象的属性值，才会影响proxy对象
  }
})