[JavaScript] Custom Objects and Classes

JavaScript lets you create an object and add property whenever it is required. But most programmers do not like (or are not accustomed to) this non-deterministic structure. Therefore, some smart developers have found the way to mimic OOP techniques in JavaScript. let’s find out how you can declare the blueprint (so called a class in other languages) of an object.

 

1. Custom Objects

As a web developer, you have used many built-in JavaScript objects. Have you ever been curious about how they are defined? Originally, JavaScript does not have the “class” keyword. (It is introduced in ES2015.) So how can these object be defined?

You can create an object in JavaScript using the “new” keyword.

var name = new FullName("Tom", "J." "Smith", "Mr");

You created a “FullName” object with 4 parameters: First Name, Middle Name, Last Name, and Title.

You can think of this syntax as calling a constructor.

 

2. Constructors

Actually, a function is treated like an object. A constructor is a function and by using it in conjunction with the “new” operator you can create an object.

function FullName(fn, mn, ln, _title) {
}

 

3. Properties

Member variables (attributes) or properties represent the data in a class. You can define properties within a constructor function as you might expect. The key point is that you need to use the “this” keyword to distinguish the properties from normal local variables.

function FullName(fn, mn, ln, _title) {
  this.firstName = fn;
  this.middleName = mn;
  this.lastName = ln;
  this.title = _title;
}

 

4. Methods

A method defines the behavior of a class. In JavaScript, the function can be referenced easily and you can define methods as functions in the constructor. A method is created by assigning a function to a method reference.

function FullName(fn, mn, ln, _title) {
  // ...
  this.getFullName = function () {
    return this.title + ". " + this.firstName + " " + this.middleName + " " + this.lastName;
  };
}

 

5. Example – Using Objects

<body>
  <form id="form1" runat="server">
  <script type="text/javascript">
  function FullName(fn, mn, ln, _title) {
    this.firstName = fn;
    this.middleName = mn;
    this.lastName = ln;
    this.title = _title;
    this.getFullName = function () {
      return this.title + ". " + this.firstName + " " + this.middleName + " " + this.lastName;
    };
  }
  function submitClick() {
    var t = document.getElementById('title').value;
    var fn = document.getElementById('fn').value;
    var mn = document.getElementById('mn').value;
    var ln = document.getElementById('ln').value;

    var name = new FullName(fn, mn, ln, t);
    document.getElementById('resultArea').innerHTML = "Hello, " + name.getFullName();
  }
  </script>
    <div>
    Title: <input type="text" id="title" /> <br />
    First Name: <input type="text" id="fn" /> <br />
    Middle Name: <input type="text" id="mn" /> <br />
    Last Name: <input type="text" id="ln" /> <br />
    <input type="button" id="submit" value="Submit" onclick="submitClick()" />
    <div id="resultArea"></div>
    </div>
  </form>
</body>

 

6. Problems of Methods Created by “this”

You can create a method using  the “this” keyword in a function. The main problem of this approach is that each time you create an object, a new copy of a method is created. If you create 100 objects, you are creating the same method 100 times! What a waste.

Now the question arises. How can we share methods among objects?

 

7. Prototype

Methods can be shared using the hidden “prototype” object that exists in every object as a property. This “prototype” object allow you to set properties and methods that are owned by the class not by the object instance.

You can modify the “FullName” class to work more efficiently.

function FullName(fn, mn, ln, _title) {
  // properties ...
}
FullName.prototype.getFullName = function () {
  return this.title + ". " + this.firstName + " " + this.middleName + " " + this.lastName;
};

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s