1

comunidad. Espero se encuentren bien. Por acá tengo un simulador de costos el cual al terminar la carga de datos, al realizar el procedimiento, da como "undefined" todos los valores de los resultados. El punto es que no sé por qué esto, creo que será cuando se parsean, pero no salgo de la duda. He probado cambiando elementos en los métodos del objeto y me sigue dando undefined. ¿Podrían ayudarme si son tan amables? Gracias de antemano.

// COSTO MATERIA PRIMA
    let costoMaderaXcm = parseFloat(0.15)
    let costoTela120Xcm2 = parseFloat(0.342)
    let costoTela130Xcm2 = parseFloat(0.438)
    // -----------------
    alert("A continuación calcularemos el costo de un marco de madera para serigrafia, cuadrado o rectangular, segun la medida de sus lados ingresados en cm y tensado con una tela en 120 o 130 hilos")
    class CostoProducto {
        constructor (ladoA, ladoB, trama, precio){
            this.ladoA = parseInt(prompt("Ingrese medida en cm del Lado A"))
            this.ladoB = parseInt(prompt("Ingrese medida en cm del Lado B"))
            this.costoMarco = this.costoMarco
            this.trama = prompt("Ingrese trama: ¿120 o 130?")
            this.costoTela = this.costoTela
            this.costoTotal = this.sumaCostos
        }
        calculoMarco(){
            this.costoMarco = parseFloat(((this.ladoA*2)+(this.ladoB*2))*costoMaderaXcm)
            return(this.costoMarco)
            }   
        calculoTela(){
            if(this.trama == 120){
            this.costoTela = parseFloat((this.ladoA*this.ladoB)*costoTela120Xcm2)
            }
            else{
                this.costoTela = parseFloat((this.ladoA*this.ladoB)*costoTela130Xcm2)
            }
            return(this.costoTela)
            }
        CostoTotal (){
            this.sumaCostos = this.costoTela+this.costoMarco
            return(this.sumaCostos)
        }
    }
    const CostoProducto1 = new CostoProducto()
    CostoProducto1.calculoMarco()
    alert("El costo del marco de madera es: "+"$"+this.costoMarco)
    CostoProducto1.calculoTela()
    alert("El costo de la tela en trama " + this.trama + " es de $"+ this.costoTela)
    CostoProducto1.CostoTotal()
    alert("El costo total de un marco de "+this.ladoA+"cm X "+this.ladoB+"cm, en trama "+this.trama+" hilos, es de $"+this.sumaCostos)

4
  • ¿Dónde exactamente ocurren los undefined? ¿Has depurado tus objetos con console.log? ¿Cuáles son los resultados de tus depuraciones?
    – A. Cedano
    Commented el 21 jul. 2021 a las 13:49
  • 1
    Estás usando this fuera de la clase y, en ese caso, se refiere a window; deberías usar la instancia de la clase para acceder a las propiedades: alert(CostoProducto1.costoMarco);
    – Triby
    Commented el 21 jul. 2021 a las 14:11
  • Mis undefined salen en: - Cuando realiza el cálculo de CostoProducto1.calculoMarco() y el mensaje que arroja es "El costo del marco de madera es: $undefined" - Cuando realiza el cálculo de CostoProducto1.calculoTela() y el mensaje que arroja es "El costo de la tela en trama undefined es de $undefined". - Cuando realiza el cálculo de CostoProducto1.CostoTotal() y el mensaje es "El costo total de un marco de undefinedcm X undefinedcm, en trama undefined hilos, es de $undefined" – Triby, gracias por tu respuesta pues eso es lo que ocurre con el odiado por muchos this en JS Commented el 21 jul. 2021 a las 15:24
  • 1
    this es odiado cuando no se comprende su misterioso comportamiento, pero, en este caso, pasaría lo mismo en cualquier otro lenguaje de programación donde esté disponible esa palabra, porque la estás usando donde no existe o no es una referencia del objeto deseado.
    – Triby
    Commented el 21 jul. 2021 a las 15:54

1 respuesta 1

2

1.- Para empezar, hay problemas con los parámetros del constructor del objeto:

  • El último parámetro denominado precio no existe como propiedad del propio objeto, por lo que hay que eliminarlo.
  • Las propiedades del objeto como this.costoMarco, this.costoTela y this.costoTotal, por la lógica del propio emulador de costos, no deberían estar allí pues justamente es lo que se está buscando calcular según los métodos que se tratan de implementar más abajo, dentro del objeto CostoProducto. Por consiguiente, esas líneas deben ser eliminadas.
  • De hecho, otra corrección necesaria, por temas de claridad y legibilidad del código, sería dejar los parámetros del objeto vacíos, es decir, el paréntesis iría sin nada, pues no podrías nombrarlos ya que los mismos serán ingresados por el mismo usuario a través del prompt.

2.- Producto de las buenas prácticas, se debería también tener cuidado con la sintaxis y reemplazar la letra mayúscula del método CostoTotal quedando como costoTotal, respetando el camelCase de rigor.

3.- Siguiendo la lógica del proyecto, se deben declarar variables como calculoMarco, calculoTela y costoTotal para almacenar los valores devueltos por los métodos calculoMarco(), calculoTela y costoTotal, pues sino, no se pueden mostrar en los alerts.

4.- Como último punto y no menos importante, el uso del "this" es crucial y en este caso está mal utilizado tratándo de implementarlo en los alerts, fuera de objeto, ya que en ese contexto el "this" está referenciando es al objeto global "window" del navegador y no al objeto "per se", razón por la cual se puede accesar a sus propiedades y métodos solo mediante la instancia del mismo objeto seguido de un punto. Por ejemplo: CostoProducto1.costoMarco

Así las cosas, el código corregido y totalmente funcional quedaría de esta manera:

let costoMaderaXcm = parseFloat(0.15)
let costoTela120Xcm2 = parseFloat(0.342)
let costoTela130Xcm2 = parseFloat(0.438)
// -----------------
alert("A continuación calcularemos el costo de un marco de madera para serigrafia, cuadrado o rectangular, segun la medida de sus lados ingresados en cm y tensado con una tela en 120 o 130 hilos")

class CostoProducto {
    constructor (){
        this.ladoA = parseInt(prompt("Ingrese medida en cm del Lado A"))
        this.ladoB = parseInt(prompt("Ingrese medida en cm del Lado B"))
        this.trama = prompt("Ingrese trama: ¿120 o 130?")
    }

    calculoMarco(){
        this.costoMarco = parseFloat(((this.ladoA*2)+(this.ladoB*2))*costoMaderaXcm)
        return(this.costoMarco)
    }

    calculoTela(){
        if(this.trama == 120){
          this.costoTela = parseFloat((this.ladoA*this.ladoB)*costoTela120Xcm2)
        }
        else{
          this.costoTela = parseFloat((this.ladoA*this.ladoB)*costoTela130Xcm2)
        }
      return(this.costoTela)
    }

    costoTotal(){
        this.sumaCostos = this.costoTela+this.costoMarco
        return(this.sumaCostos)
    }
}

const CostoProducto1 = new CostoProducto()

CostoProducto1.calculoMarco()
alert("El costo del marco de madera es: $" + CostoProducto1.costoMarco)

CostoProducto1.calculoTela()
alert("El costo de la tela en trama " + CostoProducto1.trama + " es de $" + CostoProducto1.costoTela);

CostoProducto1.costoTotal()
alert("El costo total de un marco de "+CostoProducto1.ladoA+"cm X "+CostoProducto1.ladoB+"cm, en trama "+CostoProducto1.trama+" hilos, es de $"+CostoProducto1.sumaCostos)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.