JavaScript Object Oriented Programming (prototype)

How Do I use

Object Oriented Techniques in JavaScript

Introduction

JavaScript doesn’t have the class keyword to support OOP like JAVA, C# and C++ but it doesn’t mean it is not object oriented. JavaScript is a prototype base language and support object oriented technique in prototype syntax.

Basically JavaScript functions perform the dual functionality of being the procedure and class. Even though it’s not as straight forward and simple like today modern languages but it does have its own advantages specially in today world of AJAX where client side is coming more complicated and needs to be OOP concept now a days. Let’s face it folks, web sites are not more simple sites they are now full software’s.

So let’s start learning JavaScript OOP.

Step 1

Create a function with the desired class name

function Employee() { }

this will create employee class.Now it would have no use as it has no properties and methods.

Step 2

Create employee properties

function Employee(firstName, lastName, cellNumber, empAddress) {

this.fName = firstName;

this.lName=lastName;

this.cellNo = cellNumber;

this.address = empAddress;

}Now this is more like it, We have 4 members and we can use them now.

Step 3

Creating a new employee

Var emp=new Employee(“Mamoon”,”ur Rasheed”,12345,”Confidential”);

Now if we will do

Alert(Emp.fName );

It will show the employee first name.

Step 4

Adding a property

Even though there is no default way to create a property, we can take advantage of JavaScript function calling without and with parameters to create a property for our self.

Let’s add an property.

function Employee(firstName, lastName, cellNumber, empAddress) {

this.fName = firstName;

this.lName=lastName;

this._empNo;

this.cellNo = cellNumber;

this.address = empAddress;

}

As you would have already guessed, this._empNo is a property. But it is not complete yet. First let me introduce you to “prototype”. Basically when we use prototype with any function name (class) we add functions to it or we can use it to drive it from other functions(classes). It will prototype(copy) the behaviour(functions) associated with the function(class).

Here is what we need to add a property

Employee.prototype.empNo=function(employeeNumber) {

if (employeeNumber == undefined)

return this._empNo;

else

this._empNo = employeeNumber;

}

This is simple, in this above code we are attaching a function to Employee class. This function will act as a property. First of all we need to check if passing parameter is undefined.If undefined, then it will act as a getter otherwise as a setter. This can be done in a different way e.g

Employee.prototype.empNo = function(employeeNumber) {

if (arguments.length==0)

return this._empNo;

else

this._empNo = employeeNumber;

}

In this example a check is made if any argument is passed to function. If no argument is passed then return the value if not then assign the value to the property.

Step 5

Functions:

Same way as properties, function can be attached to the class.

Employee.prototype.DisplayEmployee = function() {

alert("Name : " + this.lName + ", " + this.fName +"\nEmployee Number : "+this.empNo()+ "\nCell Number : " + this.cellNo + "\nAddress : " + this.address);

}

Step 6

Inheritence:

This is a two step process

1- Inheriting functions

2- Inheriting members

Lets start with inheriting members

Step 6 (a)

Lets create a class that will inherit the employee class.

function Manager() {

this.salary;

}

This is a small class that just have salary in it.

Now we need all the employee properties in this class. We have to create a helper function that will take the arguments and will initilize the base class and inherited class.

Manager.prototype.InitializeBase = function(baseType,salary, fName, lName, cellNo, address) {

this.salary = salary;

if (arguments.length > 0)

baseType.apply(this, [fName, lName, cellNo, address]);

else

baseType.call(this);

}

This function does two things. If there are more than one argument than we will know that this function is called with parameters so we can just apply it to base type.

In this matter base type is employee and will be passed to this function when we will call this function.

And if there are no arguments, then we will just call the base type and copy the empty members.

Now we have successfully inherited the members, its time for functions

Step 6 (b)

Manager.prototype = new Employee();

That’s it, it will copy all function to the inherited class. No need of doing any work. It will take care of this.

Results:

Lets put our code into evaluation to see the results

function createEmployeeObject() {

var emp = new Employee("Ahmed", "Mushtaq", "+92321xxxxxxx", "International");

emp.empNo(10);

alert(emp.empNo());

emp.DisplayEmployee();

var mng = new Manager();

mng.InitializeBase(Employee, 1000,"Mamoon","Rasheed","+923215059405","Confidential");

alert(mng.fName);

mng.DisplayEmployee();

}

Now as you have seen, I have created an employee instance and then set its property of empNo to 10/ Next thing is, I am displaying the employee.

Now time for inherited member. New manager is created and by using its InitializeBase function, base class is initilized. Notice the parameters of InitializeBase function. First parameter is the Employee to use it as the baseType in function and call for apply or call method to initilize the base.

Now at the end you can see we can use DisplayEmployee function of employee class.

God Bless OOP.