I find myself practicing the get and set properties Javascript.

My output (below) is not showing the new breed for gato1 nor the new color for gato2 when I change it.

But if I call the property gato1.getRaza or gato2.getColor, it returns the value already changed.

class Animal{
    constructor (clase,especie,color){
        this.clase = clase;
        this.especie = especie;
        this.color = color;
        this.info = `El ${this.especie}, es un animal ${this.clase} de color ${this.color}`;
    }
    verInfo(){
        document.write(`<label >${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;
        this.info  = `, además es de raza ${this.raza}`;
    }
    set setRaza(newRaza){
        this.raza = newRaza;
    }
    get getRaza(){
        return this.raza;
    }
    maullar(){
        document.write(`<label >El ${this.especie} 
        hace "Miau"</label><br><br><br>`);
    }
}

const gato1 = new Gato(`terrestre`,`Gato`,`blanco`,`andro`); 
// created a gato1 object of the Cat class, inherited from the Animal class

const gato2 = new Animal(`terrestre`,`Gato`,`gris`);
// create a gato2 object of the Animal class

gato1.verInfo(); 
// I see current information from gato1

gato1.maullar(); 
//I run the maullar() method to show that only the gato1 of the Cat class can effectively meow

gato1.setRaza = `angora`; 
// here I apply the property set to change the property race of the gato1

gato1.verInfo(); 
/*I call again the method verInfo() to observe that the breed for which the 
gato1 object was previously entered has been changed*/

gato2.verInfo();
// I call gato2 to see their properties

gato2.setColor = `negro`;
// changed its color

gato2.verInfo();
// I show again its properties where it is supposed to have changed its color

Output:

• El Gato, es un animal terrestre de color blanco, además es de raza andro
• El Gato hace "Miau"
• El Gato, es un animal terrestre de color blanco, además es de raza andro <-- here
• El Gato, es un animal terrestre de color gris
• El Gato, es un animal terrestre de color gris <--- here

CodePudding user response：

Your info property should be a getter since it's the one that depends on other data.

This is a better approach than what was suggested by Fastnlight since it doesn't require updating info from multiple places and doesn't add duplication.

However, as an aside, your getters and setters include get and set in their names. That makes for funny code like b = a.getProp and a.setProp = 1, instead of b = a.prop and a.prop = 1 which is the intention of getters and setters. Notice how much cleaner the above looks. Also, getters and setters that do nothing are useless and not required in JS since you can always change it to a getter later without updating its interface.

class Animal{
    constructor (clase, especie, color){
        this.clase = clase;
        this.especie = especie;
        this.color = color;
    }
   
    get info() {
       return `El ${this.especie}, es un animal ${this.clase} de color ${this.color}`
    }
}

class Gato extends Animal{
    constructor(clase, especie, color, raza){
        super(clase, especie, color);
        this.raza = raza;
    }
    get info() {
        return super.info   `, además es de raza ${this.raza}`;
    }

}

const gato = new Gato(`terrestre`,`Gato`,`blanco`,`andro`); 
const animal = new Animal(`terrestre`,`Animal`,`gris`);

console.log({gato: gato.info, animal: animal.info}); 

gato.raza = `angora`; 
animal.color = `negro`;

console.log({gato: gato.info, animal: animal.info}); 

CodePudding user response：

You are not updating the info property when you change the color or raza properties. You can do it like this:

set setColor(color){
    this.color = color;
    this.info = `El ${this.especie}, es un animal ${this.clase} de color ${this.color}`;
}

set setRaza(newRaza){
    this.raza = newRaza;
    this.info = `El ${this.especie}, es un animal ${this.clase} de color ${this.color}, además es de raza ${this.raza}`;
}