patternjavascriptMinor
Person Info Manager
Viewed 0 times
managerpersoninfo
Problem
In the process of teaching myself JavaScript. Starting to branch off into OOP designs and did not want to continue until I knew I was doing it correctly.
Is this a common or accepted way of formatting an object in JavaScript, along with its constructor and methods? I have seen many different ways of doing this (at least it seems like it). Any other irregularities that could be brought to my attention would also be nice.
Is this a common or accepted way of formatting an object in JavaScript, along with its constructor and methods? I have seen many different ways of doing this (at least it seems like it). Any other irregularities that could be brought to my attention would also be nice.
function Person(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
Person.prototype = {
fullName:function(){
return this.firstName + " " + this.lastName;
},
changeFirstName:function(name){
this.firstName = name;
},
changeLastName:function(name){
this.lastName = name;
},
changeAge:function(age){
this.age = age;
},
displayInfo:function(){
document.write("Fullname: " + this.fullName() + "");
document.write("Age: " + this.age + "");
}
}
// Was just testing the functions.
var person = new Person("first", "last", 20);
document.write(person.fullName() + "");
person.changeFirstName("FIRST");
document.write(person.fullName() + "");
person.displayInfo();Solution
This is the original way to write near-classical OOP in JavaScript and everything appears to be correct. However, there is one quirk you should know of when doing it this way.
By default, a function's prototype property is an object that has a property called
An alternative way, instead of assigning a new object to the function's prototype object is to just add properties to it.
Now for this piece of code:
Use
By default, a function's prototype property is an object that has a property called
constructor. By default, this points back to the function. However, if you define the prototype as Constructor.prototype = {}, you are overriding the object with a new object, essentially throwing away the old object containing constructor. While in most cases you will not use this property, it often comes handy.An alternative way, instead of assigning a new object to the function's prototype object is to just add properties to it.
Person.prototype.fullName = function(){...}
Person.prototype.changeFirstName = function(){...}Now for this piece of code:
displayInfo:function(){
document.write("Fullname: " + person.fullName() + "");
document.write("Age: " + this.age + "");
}Use
document.write is highly discouraged unless you know what you are doing. When you call document.write, it implicitly calls document.open which clears the page, erasing everything on it, before writing. Use DOM operations like innerHTML on an element or console functions to avoid wiping off the page when writing your outputs.Code Snippets
Person.prototype.fullName = function(){...}
Person.prototype.changeFirstName = function(){...}displayInfo:function(){
document.write("Fullname: " + person.fullName() + "<br />");
document.write("Age: " + this.age + "<br />");
}Context
StackExchange Code Review Q#136418, answer score: 7
Revisions (0)
No revisions yet.