proxy实现数据劫持

本文使用proxy 来实现数据劫持

proxy用法：let p = new Proxy(target, handler);

因此我们先来写handler,handler是一个对象：

let handler = {
    get: (target, prop) =>{
        return prop in target ? target[prop] : '笨蛋！没有这个属性！'
    },
    set: (target, prop, value) => {
         if (prop === 'age') { // 次数可以进行一些判断拦截操作
          if (!Number.isInteger(value)) {
            throw new TypeError('The age is not an integer');
          }
          if (value > 200) {
            throw new RangeError('The age seems invalid');
          }
        }
        console.log(`监听到啦！！！${target[prop]} --> ${value}`)
        // 设置新值
        target[prop] = value
    }
}

接下来我们来生成实例：

let instance = new Proxy({}, handle)

现在可以验证这个实例：

console.log(instance.age = 8)
console.log(instance.age = 9)
console.log(instance.a)
// 监听到啦！！！undefined --> 8
// 监听到啦！！！8 --> 9
// 笨蛋！没有这个属性！