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() + <br />);    document.write(Age:  + this.age + <br />);  }}// Was just testing the functions.var person = new Person(first, last, 20);document.write(person.fullName() + <br />);person.changeFirstName(FIRST);document.write(person.fullName() + <br />);person.displayInfo();
Person Info Manager
javascript;beginner;object oriented
There a few techniques to write a class in JavaScript, and each has its strengths and weaknesses. The prototypical technique you use is fine, but there are a few things you should note:Overwriting the prototype as opposed extending itLike Joseph said, when you assign Person.prototype = {, you are overwriting the original prototype which can result in some lost properties. If you rely on the constructor property of a class, this will not be accessible once you've overwritten the prototype. To keep the constructor property, you could add it to your custom prototype:Person.prototype = {  constructor: Person,  fullName: function () {    return this.firstName +   + this.lastName;  },  //...}For more info on the subject, these two Stack Overflow questions go into more detail: Overwriting Prototype Bad Practice, Using Prototype Best Practice.Public Mutable DataWhen you use this.firstName = firstName, you give a user of a person object full access to that data member; they can directly modify it with person.firstName = newName. This is true for all the data members of your Person class which makes your changeX functions obsolete.If you want the data in the Person class to be private, there's another technique for making classes that utilizes closures:function createPerson(firstName, lastName, age) {  return {    getFirstName: function () {      return firstName;    },    getLastName: function () {      return lastName;    },    getAge: function () {      return age;    },  };}A downside to this technique is that you create separate functions for each instance of the class instead of each instance sharing the functions in the prototype.CohesionThe function displayInfo feels out of place in your function class. As a general practice, it's more clear to have each class/function/module perform one specific task. Your person class appears to do two things: manage the data for a person AND display it's data to an html document. One downside to less cohesive code is that it can create dependencies that probably shouldn't be there. For example, your Person class depends on the document object which wouldn't be available in a node.js setting. You might consider breaking out displayInfo into it's own function:function displayPersonInfo(person) {  document.write(Fullname:  + person.fullName() + <br />);  document.write(Age:  + person.age + <br />);}