元数据劫持

一、Object.defineProperty

// IE8及以上支持
let obj = {
  _age: 10,
  age: 10,
  name: "jim",
};
// get和set中this指向被传入对象obj
// obj中需要有一个私有属性_age进行取值和设值
// 不然如果使用age来取值和设值，会进入死循环，内存溢出
Object.defineProperty(obj, "age", {
  get() {
    console.log("进入get");
    return this._age;
  },
  set(v) {
    if (v > 18) {
      console.log("设置无效");
    } else {
      this._age = v;
    }
  },
});

二、proxy

// IE9及以上支持，等于不支持IE
// new Proxy(target,handler),两个参数为目标对象和操作集对象
let obj = {
  age: 10,
  name: "jim",
};
const proxy = new Proxy(obj, {
  get(target, key) {
    if (key === "name") {
      console.log("这个名字是可以获取的");
    }
    // 使用原对象的值返回
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    if (key === "age") {
      if (value < 20) {
        // 满足条件的话需要return，且设置原对象的属性
        return Reflect.set(target, key, value);
      } else {
        // 不满足条件，要么抛错，要么return true
        // return true
        throw "设置错误";
      }
    }
  },
});
// 获取和设值都用的是代理
// console.log(proxy.name);
// proxy.age = 155;