javascript - 显示对象的对象对象问题

Question

嘿，我在 JS 中有一个构造函数对象，并且想查看该对象的所有内容，为什么会像这里一样弹出 [object Object] ？ MyCodeFiddle 。

Answer 1

您可以迭代所有对象键，并使用对象 pers 属性值填充新创建的 persArr。

最后，只需一次调用，您就可以获得用逗号正确分隔的所有属性值 persArr.join(', '):

function Person(first, last, age, eyecolor) {
  this.first = first;
  this.last = last;
  this.age = age;
  this.eyecolor = eyecolor;
}

var pers = new Person('John', 'Colin', 47, 'blue'),
    persArr = [];

Object.keys(pers).forEach(function(key) {
  persArr.push(pers[key]);
});

document.getElementById('data').innerHTML = persArr.join(', ');

#data {
  display: flex;
  width: 120px;
  height: 40px;
  border: 1px solid #000;
  background-color: #fff;
  justify-content: center;
  align-items: center;
}

<div id="data"></div>

更好的是，您可以在 Person 原型(prototype)中创建一个新方法来正确获取您想要的信息:

function Person(first, last, age, eyecolor) {
  this.first = first;
  this.last = last;
  this.age = age;
  this.eyecolor = eyecolor;
}

Person.prototype.getInfo = function() {
  return `${this.first} ${this.last}, ${this.age} years old and ${this.eyecolor} eyes.`;
}

var pers = new Person('John', 'Colin', 47, 'blue');
document.getElementById('person').innerHTML = pers.getInfo();

<div id="person"></div>

如果您想打印对象以进行调试:

• 控制台输出:

  console.log(pers);

• 在 html 中使用 JSON.stringify() 作为字符串输出:

  document.getElementById('data').innerHTML = JSON.stringify(pers, null, 4);