Javascript 如何将JS类的所有值返回到HTML

我在学校上javascript课，我们刚刚开始OOPs。我正在努力理解如何将对象的所有属性返回到HTML段落、分区等

下面是有问题的代码：

function Person(firstName, lastName, age, gender) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.gender = gender;
    this.describeMyself = function(){
      return document.getElementById("test").innerHTML = "My name is " + this.firstName;
    }
  }

  var john = new Person("John", "Smith", 53, "male");
  john.describeMyself();

这可以输出名字，但我需要输出所有的值

提前感谢你的帮助

我正在努力理解如何将对象的所有属性返回到HTML段落、分区等

要以类似的方式将所有对象属性返回到html，可以将它们包含在this.descripbeimf函数中，也可以创建一个新函数，例如this.allProperties

这将在您的id标签中打印：

我叫约翰·史密斯，53岁，男性

---

您可以修改文本，使其返回您想要的任何内容，但其思想是创建一个返回document.getElementByIdtest.innerHTML的函数，然后您可以添加要返回的属性。

只需为每个属性编写一个方法。你做得对。我假设您希望打印以下内容：

function Person(firstName, lastName, age, gender) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.gender = gender;
    this.describeMyself = function(){
      return document.getElementById("test").innerHTML = "My name is " + this.firstName + ", I'm a " + this.age + " year old " + this.gender + " StackOverflow leecher";
    }
}

var john = new Person("John", "Smith", 53, "male");
john.describeMyself();

我的名字是这个。 我姓这个。 我的年龄是这个年龄

在这种情况下，每个方法都可以完成这项工作

或者，您可以首先使用Object.keys方法获取所有属性的数组

然后循环遍历该数组

假设你的句子结构每次都是一样的：

"My " + propertyName + " is: " + propertyValue.


function Person(firstName, lastName, age, gender) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.gender = gender;

  }

  var john = new Person("John", "Smith", 53, "male");

var su = Object.keys(John);

for(var i = 0; i < su.length; i++) {
 console.log(console.log("My " + su[i] + " is " + john[su[i]]))
}

我希望这有帮助

---

谢谢

您的个人属性将只是对象上的键，因此如果您想编写一个始终输出所有属性的函数，您可以使用Object.keys来迭代对象的属性：

function Person(firstName, lastName, age, gender) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.gender = gender;
  this.getAllProps = function() {
    return Object.keys(this).reduce(function(p, n){
      if (typeof this[n] === 'function') {
        return p;
      } else {
        return p + this[n] + ', ';
      }
    }.bind(this), '');
  },
  this.describeMyself = function(){
    return document.getElementById("test").innerHTML = this.getAllProps();
  }
}

---

这是假设您只想输出属性值，没有句子结构。

代码似乎工作正常。 您只需继续使用+运算符继续组合将在div中输出的字符串

这里有一个例子

我希望这有帮助

职能人员姓名、姓氏、年龄、性别{ this.firstName=firstName； this.lastName=lastName； 这个。年龄=年龄； 这个。性别=性别； this.descripbeimf=函数{ return document.getElementByIdtest.innerHTML=我的名字是+firstName++lastName+。+I am。。。。。； }

---

}

您可以手动将它们全部输出。是的，但是有没有更简洁、高效的方法？这是你想要的吗？

function Person(firstName, lastName, age, gender) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.gender = gender;
  this.getAllProps = function() {
    return Object.keys(this).reduce(function(p, n){
      if (typeof this[n] === 'function') {
        return p;
      } else {
        return p + this[n] + ', ';
      }
    }.bind(this), '');
  },
  this.describeMyself = function(){
    return document.getElementById("test").innerHTML = this.getAllProps();
  }
}