从页面获取信息传入JavaScript对象构造器后显示[object Object]问题咨询

当你直接把person构造函数生成的实例对象赋值给DOM的innerHTML属性时，JavaScript会自动尝试将对象转换为字符串类型。默认情况下普通对象调用toString()方法会返回固定格式的[object Object]字符串，这就是页面输出异常的核心原因。

你可以选择以下任意一种方案实现需求：

• 方案1：手动拼接属性生成自定义展示字符串
  直接读取对象的各个属性，拼接成你想要的展示格式再赋值，示例修改代码：

// 替换原来的 document.getElementById('result').innerHTML = demo; 即可
document.getElementById('result').innerHTML = `姓名：${demo.name}，家族姓氏：${demo.family}，年龄：${demo.age}`;

• 方案2：使用JSON序列化输出完整对象内容
  如果需要快速查看对象的所有属性值，可以直接用JSON.stringify()将对象转为JSON格式字符串：

document.getElementById('result').innerHTML = JSON.stringify(demo, null, 2);

第二个和第三个参数是用来格式化JSON缩进的，输出的内容可读性更高。

• 方案3：重写person构造函数的toString方法
  在定义person构造函数时就自定义转字符串的逻辑，后续直接赋值对象也能正常输出你要的内容：

function person(name, family, age) {
  this.name = name;
  this.family = family;
  this.age = age;
  // 新增自定义toString逻辑
  this.toString = () => `姓名：${this.name}，家族姓氏：${this.family}，年龄：${this.age}`;
}

修改后你原来的document.getElementById('result').innerHTML = demo;代码不需要改动就能正常运行。

内容的提问来源于stack exchange，提问作者M.alizadeh