Object Oriented JavaScript

396 VIEWS

Once you understand the basics of JavaScript, the next step would be trying your hand at object-oriented JavaScript. Object-oriented programming is a popular style of programming that helps you build reusable building blocks, write cleaner code, and eliminate redundant code. This article explores how JavaScript makes use of the object-oriented programming theory, and demonstrates how classes and object instances are created.

Creating Constructor Function

JavaScript uses special functions known as “constructor functions” to define objects, their properties and methods. An example of an object is a car. A car has properties such as name, model, and colour. The methods can be drive, turn left, turn right, and stop. From the example below, a constructor function is used to define an object called “Human.” This object has a name, gender and age property, as well as a getAge() method.

//creating an object using a constructor function
function Human (name, gender, age) {
//properties
        	this.name = name;
        	this.gender = gender;
        	this.age = age;
        	this.getAge = function(){
                    	alert(“I am “+this.age+” years old”);
        	}
}

It’s important to note that a constructor function name usually starts with a capital letter, as in “Human”.
The ‘this’ keyword used in the function above basically says that whenever an object instance is created, the object’s name, gender and age property will be equal to the name value passed to the constructor call.
getAge() is a method that can be called on any instance of the object. When called, it will alert the message within the alert and replace this.age with the actual age.

Creating an Object Instance
To create any instance of a class, you call the constructor function with the new keyword to create an object. For example, in the code below, two instances of the ‘human’ class is constructed.

//creating objects
var person1 = new Human('Sam', 'Female', 18);
var person2 = new Human('Fred', 'Male', 20);

Note that when we created the constructor function earlier, we gave it three parameters: name, gender and age. Therefore, when calling the constructor function, you need to pass the three arguments as well.

Once an object instance has been created, accessing the object’s properties can be done using the dot notation. For example, if you wanted to alert the person’s name, gender or age, you could do so, following the example below.

alert ('My name is '+ person1.name + '! And I am '+person1.age + ' years old');

Accessing the object’s methods can also be done using dot notation.

person1.getAge();
person2.getAge();

Adding Properties to Objects

Once an object has been created, you can still add more properties to it. To do so, follow the example below.

var person3 = new Human('Sam', 'Male', 12);
// adding additional attributes to object, person3
person3.nationality = 'Ghanaian';
person3.email = '[email protected]';
 

To access the new properties you just created, follow the same steps by using the dot notation.

alert ('My nationality is '+ person3.nationality);
alert ('My email is '+ person3.email);

Adding Methods to Objects

Similarly, methods can be added to objects even after they have been created. The example below creates a getName method, which simply returns the object name.

//creating an object
var person4 = new Human('Samy', 'Male', 50);
// adding method to object, person4
person4.getName = function(){
        	return this.name;
};
alert ('My name is '+ person4.getName());

The alert statement will produce the following output:
‘My name is Samy’.

Inheritance

JavaScript supports single class inheritance. All JavaScript objects inherit properties and methods from a prototype. A class can be used to inherit by using ChildClassName.protoype = new ParentClass();. The JavaScript prototype property allows you to add new properties and objects to object constructors. The example below demonstrates the inheritance between two classes:

function Person(firstName, lastName) {
        	this.FirstName = firstName || "";
    this.LastName = lastName || "";
};
 
Person.prototype.getName = function () {
	return this.FirstName + " " + this.LastName;
}

In the example above, the ‘Person’ class has been defined with firstName and lastName properties. The getName() method has also been added to its prototype object.
In the example below, an ‘Employee’ class would be defined to inherit the attributes and methods from the ‘Person’ class.

function Employee(firstName, lastName, id, socialSecurity){	
        	Person.call(this, firstName, lastName);
        	this.Id = id || "";	
        	this.SocialSecurity = socialSecurity || 123456;
}
 
Employee.prototype = new Person();

From the example above, the Employee.prototype has been set to a new person object. The new keyword creates an object of the ‘Person’ class and assigns Person.prototype to the new object’s prototype object.

The example below creates an object of ‘Employee’ that uses the properties and methods of the ‘Person’ class. In this example, we use the getName() method that was defined for the ‘Person’ class.

//Code below creates an object of type Employee
var emp = new Employee ('Peter' , 'James' , 203, 123456);
//print the first name and last name to the console
console.log(emp.getName());

Polymorphism

Polymorphism provides a medium to perform a single action in different forms. For example, the same method can be called on different JavaScript class objects. However, they may perform different actions. Using the ‘extend’ keyword, the subclass (Child) inherits the methods and attributes from the superclass (Parent).

class Parent{ 
        	display(){ 
                    	console.log("Hello World. I am the parent"); 
        	}
 
        	myLastName(){
                    	console.log("Plange")
        	} 
}
 
class Child extends Parent{
        	display(){ 
        	        	console.log("Hello World. I am the child"); 
        	}
} 
 
var myvar = new Child(); 
myvar.display();
myvar.myLastName();

The output of the code would be:
“Hello World. I am the child”
“Plange”

Final Thoughts

Hopefully you now understand how object-oriented programming in JavaScript can be used to build reusable building blocks and write cleaner code. I’ve taken you through some of the key object-oriented programming concepts, and now it’s your turn to go use those patterns in your JavaScript applications. All the best.


Frederick Plange is a computer science major at Ashesi University, one of the top universities in Ghana aiming to develop ethical and entrepreneurial leaders to transform the nation. Frederick is a focused and goal driven individual that is passionate about technology and computers


Discussion

Click on a tab to select how you'd like to leave your comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Menu