详解JavaScript中Proxy与Object.defineProperty的区别

const obj = {};
Object.defineProperty(obj, 'name', {
  get() {
    console.log('访问name属性');
    return 'John';
  },
  set(value) {
    console.log('设置name属性');
    obj._name = value;
  }
});
// 访问name属性，触发get拦截
console.log(obj.name); // 输出: "访问name属性" 和 "John"
// 设置name属性，触发set拦截
obj.name = 'Alice'; // 输出: "设置name属性"
// 对整个对象进行赋值，不会触发set拦截
obj = { age: 25 }; // 抛出TypeError: Assignment to constant variable.

const obj = { name: 'John', age: 25 };
Object.defineProperty(obj, 'name', {
  get() {
    console.log('访问name属性');
    return 'Alice';
  }
});
for (const key in obj) {
  console.log(key); // 输出: "name" 和 "age"
}
console.log(obj.name); // 输出: "访问name属性" 和 "Alice"

const user = {
  name: 'John',
  age: 25,
};
const protectedUser = new Proxy(user, {
  set(target, property, value) {
    if (property === 'age') {
      throw new Error('age属性不可被修改');
    }
    return Reflect.set(target, property, value);
  },
  deleteProperty(target, property) {
    if (property === 'name') {
      throw new Error('name属性不可被删除');
    }
    return Reflect.deleteProperty(target, property);
  },
});
console.log(protectedUser.name); // 输出: "John"
protectedUser.name = 'Alice'; // 不会抛出错误，属性赋值成功
console.log(protectedUser.name); // 输出: "Alice"
protectedUser.age = 30; // 抛出错误，无法修改age属性
delete protectedUser.name; // 抛出错误，无法删除name属性