JavaScript中get/set属性异常：修改后信息未同步更新

问题根源 #

核心问题在于：info是实例构造时生成的静态字符串，只会计算一次，后续修改color或raza不会自动同步更新这个字符串。

• 构造函数执行时，this.info会把当时的color、raza值拼进字符串并固定下来；
• 而getColor/getRaza是直接返回当前的this.color/this.raza属性值，所以能拿到最新修改后的结果。

解决方案一：将info改为getter属性（推荐） #

把info从实例属性改成getter方法，每次访问this.info时都会动态计算最新的属性值，无需手动维护更新：

class Animal{
    constructor (clase,especie,color){
        this.clase = clase;
        this.especie = especie;
        this.color = color;
    }
    // 用getter动态生成info
    get info(){
        return `El ${this.especie}, es un animal ${this.clase} de color ${this.color}`;
    }
    verInfo(){
        document.write(`<label class="animals">${this.info}</label><br><br><br>`);
    }
    set setColor(color){
        this.color = color;
    }
    get getColor(){
        return this.color;
    }
}

class Gato extends Animal{
    constructor(clase,especie,color,raza){
        super(clase,especie,color);
        this.raza = raza;
    }
    // 重写Gato的info getter，追加品种信息
    get info(){
        return `${super.info}, además es de raza ${this.raza}`;
    }
    set setRaza(newRaza){
        this.raza = newRaza;
    }
    get getRaza(){
        return this.raza;
    }
    maullar(){
        document.write(`<label class="animals__cat">El ${this.especie} 
        hace "Miau"</label><br><br><br>`);
    }
}

解决方案二：在verInfo方法中直接动态拼接字符串 #

去掉info属性，每次调用verInfo时直接用当前属性值生成内容，简单直接：

class Animal{
    constructor (clase,especie,color){
        this.clase = clase;
        this.especie = especie;
        this.color = color;
    }
    verInfo(){
        // 直接在方法里拼接最新属性值
        const info = `El ${this.especie}, es un animal ${this.clase} de color ${this.color}`;
        document.write(`<label class="animals">${info}</label><br><br><br>`);
    }
    set setColor(color){
        this.color = color;
    }
    get getColor(){
        return this.color;
    }
}

class Gato extends Animal{
    constructor(clase,especie,color,raza){
        super(clase,especie,color);
        this.raza = raza;
    }
    verInfo(){
        // Gato类重写verInfo，追加品种信息
        const info = `El ${this.especie}, es un animal ${this.clase} de color ${this.color}, además es de raza ${this.raza}`;
        document.write(`<label class="animals">${info}</label><br><br><br>`);
    }
    set setRaza(newRaza){
        this.raza = newRaza;
    }
    get getRaza(){
        return this.raza;
    }
    maullar(){
        document.write(`<label class="animals__cat">El ${this.especie} 
        hace "Miau"</label><br><br><br>`);
    }
}

解决方案三：在setter中手动更新info字符串 #

每次修改color或raza时，调用方法同步更新info，适合需要缓存info内容的场景：

class Animal{
    constructor (clase,especie,color){
        this.clase = clase;
        this.especie = especie;
        this.color = color;
        this.updateInfo(); // 初始化时生成info
    }
    // 统一更新info的方法
    updateInfo(){
        this.info = `El ${this.especie}, es un animal ${this.clase} de color ${this.color}`;
    }
    verInfo(){
        document.write(`<label class="animals">${this.info}</label><br><br><br>`);
    }
    set setColor(color){
        this.color = color;
        this.updateInfo(); // 修改后同步更新info
    }
    get getColor(){
        return this.color;
    }
}

class Gato extends Animal{
    constructor(clase,especie,color,raza){
        super(clase,especie,color);
        this.raza = raza;
        this.updateInfo();
    }
    updateInfo(){
        this.info = `${super.info}, además es de raza ${this.raza}`;
    }
    set setRaza(newRaza){
        this.raza = newRaza;
        this.updateInfo(); // 修改后同步更新info
    }
    get getRaza(){
        return this.raza;
    }
    maullar(){
        document.write(`<label class="animals__cat">El ${this.especie} 
        hace "Miau"</label><br><br><br>`);
    }
}

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