ES6之Proxy的使用详解

// 写法:target是目标对象，handler是处理器对象
const proxy = new Proxy(target, handler);

// 定义待验证的对象
const user = {
  name: '',
  age: 0
};

// 创建代理对象
const userProxy = new Proxy(user, {
  set(target, property, value) {
    // 进行数据合法性验证
    if (property === 'name') {
      if (typeof value !== 'string' || value === '') {
        throw new Error('姓名必须是非空字符串');
      }
    } else if (property === 'age') {
      if (typeof value !== 'number' || value < 0 || !Number.isInteger(value)) {
        throw new Error('年龄必须是非负整数');
      }
    }

    // 合法性验证通过，设置属性值
    target[property] = value;
    return true;
  }
});

// 使用代理对象进行属性访问和赋值
userProxy.name = 'John';
console.log(userProxy.name); // 输出: "John"

userProxy.age = 25;
console.log(userProxy.age); // 输出: 25

// 非法赋值会触发异常
try {
  userProxy.name = '';
} catch (error) {
  console.log(error.message); // 输出: "姓名必须是非空字符串"
}

try {
  userProxy.age = '30';
} catch (error) {
  console.log(error.message); // 输出: "年龄必须是非负整数"
}

// 定义待记录日志的对象
const person = {
  name: 'John',
  age: 30
};

// 创建代理对象
const personProxy = new Proxy(person, {
  get(target, property) {
    // 记录属性访问日志
    console.log(`访问属性: ${property}`);
    
    // 返回属性值
    return target[property];
  },
  set(target, property, value) {
    // 记录属性赋值日志
    console.log(`设置属性: ${property}，值: ${value}`);

    // 设置属性值
    target[property] = value;
    return true;
  },
  deleteProperty(target, property) {
    // 记录属性删除日志
    console.log(`删除属性: ${property}`);

    // 删除属性
    delete target[property];
    return true;
  }
});

// 使用代理对象进行属性访问、赋值和删除
console.log(personProxy.name); // 输出：访问属性: name -> "John"

personProxy.age = 35; // 输出：设置属性: age，值: 35
console.log(personProxy.age); // 输出：访问属性: age -> 35

delete personProxy.age; // 输出：删除属性: age
console.log(personProxy.age); // 输出：访问属性: age -> undefined

// 创建数据对象
const data = {
  name: 'John',
  age: 30
};

// 创建观察者对象，用于监听数据变化
const observer = {
  notify(target, property) {
    console.log(`属性 ${property} 发生变化，新值为: ${target[property]}`);
  }
};

// 创建代理对象
const dataProxy = new Proxy(data, {
  set(target, property, value) {
    // 设置属性值
    target[property] = value;

    // 通知观察者属性变化
    observer.notify(target, property);

    return true;
  }
});

// 修改代理对象的属性值
dataProxy.name = 'Alice'; // 输出：属性 name 发生变化，新值为: Alice
dataProxy.age = 35; // 输出：属性 age 发生变化，新值为: 35