Question

我正在学校参加一个javascript课程，我们刚刚开始了OOP。我正在努力理解如何将对象的所有属性都返回到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();

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

提前感谢您的帮助。

Answer 1

我很难理解如何将对象的所有属性都返回到HTML段落，分区等。

要将所有对象属性返回到html，与您正在执行的方式类似，将它们包含在song_points.__table__.create(db.session.bind)函数中，或者您可以创建一个新函数，例如this.describeMyself

this.allProperties

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

我的名字是John Smith，我是一名53岁的男性。

您可以修改文本以便它返回您想要的任何内容但想法是创建一个返回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; } // You can keep this function, modify it or modify your describe myself. this.allProperties = function(){ return document.getElementById("test").innerHTML = "My name is " + this.firstName + " " + this.lastName + "and I'm a "+ this.age +" year old " + this.gender; } } var john = new Person("John", "Smith", 53, "male"); john.allProperties();的函数，然后您可以添加要返回的属性。

Answer 2

为每个人写一个方法。你做得对。我假设你想打印像：

我的名字是this.firstName。我的姓是this.lastName。我的年龄是this.age。

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

或者，您可以先使用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]]))
}

我希望这会有所帮助。

谢谢

Answer 3

Person上的属性只是Object上的键，因此如果要编写一个始终输出所有属性的函数，可以使用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();
  }
}

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

Answer 4

代码似乎工作正常。您可以继续使用+运算符继续将将在div中输出的字符串放在一起。

这是一个例子

A codepen demo

我希望这会有所帮助

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 " + firstName + " " + lastName +"." + " I am....."; } }

Answer 5

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();

如何将JS类的所有值都返回给HTML

5 个答案: