Home > jQuery > JavaScript – Object Oriented Programming

JavaScript – Object Oriented Programming

The use of JavaScript is increasing heavily. It’s the right time to learn about writing good, clean and efficient JavaScript code rather than simply writing in an unorganized fashion. In this post I am trying to bring up some of the concepts we should be aware while using JavaScript.

JavaScript is a prototype based language. Its a style of object-oriented programming in which classes are not present.

In JavaScript defining a class is equal to creating a function. For example

function Employee() {
}

To create instances of this we use

var e = new Employee();

Creating an object will executes the statements inside the function, thus it acts as a constructor. For example

function Employee() {
    alert("I am an employee");
}
var e1 = new Employee();

This will bring up the alert window
JS1

Properties & Methods

JavaScript object properties are varibales declared inside the class. We can refer properties inside the class using the this keyword (similar to C#).

Example

function Employee(name) {
     this.name = name;
}
var e1 = new Employee("Amal Hashim");
alert("I am an employee with name = " + e1.name);

JS2

Methods are defined as functions, and they are invoked similar to how properties are used

Example

function Employee(name) {
	this.name = name;
}
Employee.prototype.getName = function() {
	alert(this.name);
};
var e1 = new Employee("Amal Hashim");
e1.getName();

JS3

Inheritance & Encapsulation

JavaScript supports only single class inheritance. Inheritance enables the creation of parent child relationships.

Example

//Define Parent Class
function Employee(name) { 
	this.name = name;
}
Employee.prototype.whoAmI = function() {
	alert("Employee Object");
}
Employee.prototype.getName = function() {
	return this.name;
}

//Define Child Class
function Manager() {
	//Invoke parent constructor
	Employee.call(this);
}
//Inheritance - Manager inherits Employee
Manager.prototype = new Employee();
Manager.prototype.constructor = Manager;
//Over ride whoAmI
Manager.prototype.whoAmI = function() {
	alert("Manager Object");
}

var manager = new Manager();
manager.whoAmI();
manager.name = "Amal Hashim";
alert(manager.getName());
//checking
alert(manager instanceof Manager);
alert(manager instanceof Employee);

JS4
JS6
JS4
JS4

In the above example, Manager object doesn’t need to define getName method. Its encapsulated in the parent Employee class.

Advertisements
Categories: jQuery Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: