如何创建属性不可变的JavaScript类？防止Animal类误加非法属性

我来帮你解决这两个问题，先从创建带不可变属性的JavaScript类说起，再给你优化Animal类的方案～

在JavaScript中，实现带有不可变（只读/不可修改）属性的类有几种常用方式，你可以根据需求的严格程度选择：

1. 使用Object.defineProperty定义严格不可变属性 #

这种方式能精准控制每个属性的可写、可枚举、可配置性，是最基础的严格不可变实现：

class ImmutablePerson {
  constructor(name, age) {
    Object.defineProperty(this, 'name', {
      value: name,
      writable: false,    // 禁止修改属性值
      enumerable: true,   // 属性可被枚举（比如for...in遍历）
      configurable: false // 禁止删除或重新配置该属性
    });
    Object.defineProperty(this, 'age', {
      value: age,
      writable: false,
      enumerable: true,
      configurable: false
    });
  }
}

const person = new ImmutablePerson('Alice', 30);
person.name = 'Bob'; // 非严格模式下无效果，严格模式会抛出错误
delete person.age;   // 同样无效

2. 用Getter方法实现只读属性（简洁版） #

如果不需要完全禁止内部修改，只是对外暴露只读属性，可以用无Setter的Getter：

class ReadOnlyPerson {
  constructor(name, age) {
    // 下划线是约定的"私有"字段（外部仍可修改，仅作代码提示）
    this._name = name;
    this._age = age;
  }

  get name() {
    return this._name;
  }

  get age() {
    return this._age;
  }
}

const person = new ReadOnlyPerson('Alice', 30);
person.name = 'Bob'; // 无效（严格模式报错）

要是想更严格，可结合Object.defineProperty把_name和_age也设为不可访问。

3. ES私有字段+Getter（最严格的只读实现） #

ES6+的私有字段（#前缀）能完全禁止外部访问内部属性，搭配Getter实现对外只读：

class StrictImmutablePerson {
  #name;
  #age;

  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }

  get name() {
    return this.#name;
  }

  get age() {
    return this.#age;
  }
}

const person = new StrictImmutablePerson('Alice', 30);
person.#name = 'Bob'; // 直接抛出语法错误，外部无法访问私有字段

4. 用Object.freeze冻结整个实例 #

如果想让整个实例的所有属性都不可修改、删除，且无法新增属性，可以在构造函数中冻结实例：

class FrozenPerson {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    Object.freeze(this); // 浅冻结实例，若属性是对象需自行实现深冻结
  }
}

const person = new FrozenPerson('Alice', 30);
person.name = 'Bob';    // 无效
person.gender = 'female'; // 无法新增属性

针对你提到的「重复写myAnimal.xxx = xxx」和「拼写错误新增非法属性」的问题，推荐两种实用方案：

方案一：构造函数接收配置对象+预定义允许属性列表 #

核心思路是预先定义所有允许的20个属性，在构造函数中通过配置对象一次性赋值，同时禁止新增非法属性：

class Animal {
  // 预先定义所有允许的20个属性（根据你的实际需求调整）
  static allowedProperties = [
    'species', 'name', 'age', 'weight', 'color', 
    'height', 'length', 'habitat', 'diet', 'lifespan',
    'predator', 'prey', 'domesticated', 'wingspan', 
    'furType', 'tailLength', 'legCount', 'eyeColor', 
    'voice', 'speed'
  ];

  constructor(config = {}) {
    // 遍历允许的属性，从配置对象中取值（无值则设为null）
    Animal.allowedProperties.forEach(prop => {
      Object.defineProperty(this, prop, {
        value: config[prop] ?? null,
        writable: true, // 可根据需求改为false，设为不可变
        enumerable: true,
        configurable: false
      });
    });

    // 禁止给实例新增非法属性
    Object.preventExtensions(this);
  }
}

// 使用方式：一次性传入配置对象，无需重复写myAnimal.xxx = xxx
const myAnimal = new Animal({
  species: 'Cat',
  name: 'Whiskers',
  age: 5,
  color: 'Orange',
  // ... 其他需要的属性，按需传入即可
});

// 测试非法操作
myAnimal.invalidProp = 'test'; // 严格模式报错，非严格模式无效果
delete myAnimal.name;          // 无效（configurable设为false）

这种方案的优点：

• 无需重复赋值，一次性传入配置对象即可完成属性设置
• 拼写错误的属性（比如把species写成specias）会被自动忽略，不会新增到实例上
• Object.preventExtensions彻底禁止新增非法属性

方案二：使用Proxy实时拦截属性操作（更灵活友好） #

如果需要在后续修改属性时也实时检查合法性（比如拼写错误直接报错提示），可以用Proxy包装实例：

class Animal {
  static allowedProperties = [
    'species', 'name', 'age', 'weight', 'color', 
    'height', 'length', 'habitat', 'diet', 'lifespan',
    'predator', 'prey', 'domesticated', 'wingspan', 
    'furType', 'tailLength', 'legCount', 'eyeColor', 
    'voice', 'speed'
  ];

  constructor(config = {}) {
    // 初始化允许的属性
    Animal.allowedProperties.forEach(prop => {
      this[prop] = config[prop] ?? null;
    });

    // 返回Proxy实例，拦截属性赋值和删除
    return new Proxy(this, {
      set(target, prop, value) {
        if (!Animal.allowedProperties.includes(prop)) {
          throw new Error(`非法属性：${prop}！仅允许以下属性：${Animal.allowedProperties.join(', ')}`);
        }
        target[prop] = value;
        return true;
      },
      deleteProperty(target, prop) {
        if (!Animal.allowedProperties.includes(prop)) {
          throw new Error(`无法删除非法属性：${prop}`);
        }
        delete target[prop];
        return true;
      }
    });
  }
}

const myAnimal = new Animal({ species: 'Dog', name: 'Buddy' });
myAnimal.age = 3; // 合法，成功赋值
myAnimal.invalidProp = 'test'; // 直接抛出错误，明确提示拼写或属性非法

这个方案对用户更友好，拼写错误时会立即得到错误提示，避免默默创建无效属性。

内容的提问来源于stack exchange，提问作者techdog