Question

嘿，我在JS中有一个构造函数对象，并希望看到所有该对象，为什么弹出[object Object]就像这里一样？ MyCodeFiddle。

Answer 1

直接提供给html for display [object object]的对象将显示为默认行为

如果你真的想在html中显示有两种方法

1）迭代对象属性

for(var i in pers ) {
   document.getElementById("data").innerHTML =  document.getElementById("data").innerHTML + pers[i] + ',';
}

http://jsfiddle.net/upwLvhs5/2/

2）将对象字符串化为JSON

 document.getElementById("data").innerHTML = JSON.stringify(pers)

http://jsfiddle.net/upwLvhs5/3/

Answer 2

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

最后，在一次调用中，您可以使用逗号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原型中创建一个新方法，以正确获取所需信息：

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);
使用JSON.stringify()：
在html中输出为字符串
document.getElementById('data').innerHTML = JSON.stringify(pers, null, 4);

对象显示对象的对象问题

2 个答案: