Wie alle Werte einer JS-Klasse in HTML zurückgegeben werden

Question

Ich nehme eine Javascript-Klasse in der Schule und wir haben gerade OOPs gestartet. Ich bin zu kämpfen, zu verstehen, wie alle die Eigenschaften eines Objekts zu einem HTML-Absatz zurückzukehren, Abteilung etc.

Hier ist der Code in Frage:

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

Das funktioniert Vornamens Ausgabe, aber ich brauche um ALLE Werte auszugeben.

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

ich kämpfe, um zu verstehen, wie all die Eigenschaften eines Objekts zu einem HTML-Absatz zurückzukehren, Abteilung etc.

So setzen Sie alle Objekte Objekte, die den html, in ähnlicher Art und Weise sind Sie Dadurch wird sie auf Ihre this.describeMyself Funktion enthält, oder Sie können eine neue Funktion zB this.allProperties

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

Dies würde in Ihrem #id Tag druckt erstellen:

Mein Name ist John Smith und ich bin ein 53 Jahre alter Mann.

Sie können den Text so ändern, dass er zurückgibt, was Sie wollen, aber die Idee ist, eine Funktion zu erstellen, die document.getElementById("test").innerHTML zurückgibt, und Sie können dann die Eigenschaften hinzufügen, die Sie zurückgeben möchten.

Answer 2

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

Answer 3

Schreiben Sie einfach eine Methode für jeden. Du machst es richtig. Ich nehme an, dass Sie so etwas drucken möchten:

Mein Vorname ist this.firstName. Mein Nachname ist this.lastName. Mein Alter ist this.age.

In diesem Fall wird eine Methode für jeden die Aufgabe erledigen.

Oder alternativ können Sie zuerst ein Array aller Eigenschaften mit Object.keys() Methode erhalten.

Dann Schleife durch das Array.

Angenommen, Ihre Satzbau das gleiche jedes Mal sein wird:

"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]])) 
} 

Ich hoffe, das hilft.

Danke

Answer 4

Die Eigenschaften auf Ihre Person wird auf ein Objekt nur die Schlüssel sein, wenn Sie also eine Funktion schreiben wollen, die immer ausgegeben alle Eigenschaften, die Sie Object.keys verwenden können() Ihre iterieren Objekteigenschaften:

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

Dies ist vorausgesetzt, Sie möchten nur Ihre Eigenschaftswerte nur ohne Satzstruktur ausgeben.

Answer 5

Der Code scheint gut zu funktionieren. Sie können den Operator + einfach weiter verwenden, um die Zeichenfolge, die im div ausgegeben wird, zusammenzufassen.

Hier ist ein Beispiel

A codepen demo

Ich hoffe, das

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....."; } }