Firefox及Firefox Developer中类实例属性显示undefined问题求助

在Firefox和Firefox Developer Edition中，调用自定义Mokepon类实例的属性时，所有属性值都显示undefined——不管是通过console.log输出，还是在字符串模板里渲染页面元素，结果都是如此。尝试切换到Firefox Developer Edition也没能解决问题，页面渲染出的元素（如图片、文本）都没有正确加载对应内容。

相关代码 #

页面渲染代码 #

mokepones.forEach((mokepon) => {
  MokeponChoice = `
    <input type="radio" name="mascota" id=${mokepon.nombre} />
    <label class="tarjetas-mokepon" for=${mokepon.nombre}>
      <p>${mokepon.nombre}</p>
      <img src=${mokepon.foto} alt="${mokepon.nombre}">
    </label>
  `
  contenedorTarjetas.innerHTML += MokeponChoice
  console.log(mokepon.nombre)
})

类定义及实例化代码 #

class Mokepon {
    constructor(nombre, foto, vida) {
        this.nombre
        this.foto
        this.vida
        this.ataques = []
    }
}

let hipodoge = new Mokepon('Hipodoge', './assetsMP/mokepons_mokepon_hipodoge_attack.webp', 5)
let capipepo = new Mokepon('Capipepo', './assetsMP/mokepons_mokepon_capipepo_attack.webp', 4)
let ratigueya = new Mokepon('Ratigueya', './assetsMP/mokepons_mokepon_ratigueya_attack.webp', 3)

hipodoge.ataques.push(
    { nombre: '💧', id: 'boton-agua' },
    { nombre: '💧', id: 'boton-agua' },
    { nombre: '💧', id: 'boton-agua' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🔥', id: 'boton-fuego' },
)

capipepo.ataques.push(
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '🌱', id: 'boton-tierra' },
    { nombre: '💧', id: 'boton-agua' },
    { nombre: '🔥', id: 'boton-fuego' },
)

ratigueya.ataques.push(
    { nombre: '🔥', id: 'boton-fuego' },
    { nombre: '🔥', id: 'boton-fuego' },
    { nombre: '🔥', id: 'boton-fuego' },
    { nombre: '💧', id: 'boton-agua' },
    { nombre: '🌱', id: 'boton-tierra' },
)

mokepones.push(hipodoge, capipepo, ratigueya)

解决方法 #

这不是浏览器或插件的问题，是代码本身的错误：Mokepon类的构造函数没有把传入的参数赋值给实例属性。

修正构造函数，将参数赋值给this对应的属性：

class Mokepon {
    constructor(nombre, foto, vida) {
        this.nombre = nombre // 补充参数赋值
        this.foto = foto     // 补充参数赋值
        this.vida = vida     // 补充参数赋值
        this.ataques = []
    }
}

修改后，实例的属性就能正常读取，console.log和页面模板渲染都会显示正确的值。

在Firefox Developer Edition中查看实例元素 #

不需要额外插件，直接在控制台打印实例（比如输入console.log(hipodoge)），然后在开发者工具的控制台结果中展开实例对象，就能查看所有属性和对应的值。

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