【JS】如何设置一个只读属性

1. Object.defineProperty

通过属性描述符将属性设置为不可修改

const obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false, // 不允许修改该属性
  configurable: true, // 允许删除或修改属性描述符
});

console.log(obj.name); // 输出: John

obj.name = 'Alice'; // 不能修改
console.log(obj.name); // 输出: John

2. Object.freeze

冻结对象

const obj = {
  name: 'John'
};

Object.freeze(obj);

obj.name = 'Alice'; // 不会生效
console.log(obj.name); // 输出: John

3. 只设置get访问器

不设置 set 或不进行任何操作

const obj = {};
Object.defineProperty(obj, 'name', {
  get() {
    return 'John';
  },
  set() {
    // 什么也不做，或者抛出异常
    console.log('Cannot modify name');
  }
});

console.log(obj.name); // 输出: John
obj.name = 'Alice'; // 输出: Cannot modify name
console.log(obj.name); // 输出: John

Proxy

劫持某属性，不进行修改

const handler = {
  set(target, prop, value) {
    if (prop === 'name') {
      console.log('Cannot modify name');
      return false; // 阻止修改
    }
    target[prop] = value;
    return true;
  }
};

const obj = new Proxy({ name: 'John' }, handler);

console.log(obj.name); // 输出: John
obj.name = 'Alice'; // 输出: Cannot modify name
console.log(obj.name); // 输出: John

总结

Object.defineProperty： 适用于单个属性的只读设置。
Object.freeze： 会冻结整个对象，包括其所有的属性和方法。
get 访问器使得属性变得只读，同时可以进行更复杂的控制，例如通过抛出错误或打印信息来响应修改操作。
Proxy 提供了灵活的控制，可以根据需要对属性设置条件，比如只对某些属性设置只读，而不影响其他属性。