HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Person Info Manager

Submitted by: @import:stackexchange-codereview··
0
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.

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 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.