Object Oriented Programming using JavaScript

JavaScript as the world’s most misunderstood language some programmers think that javascript language have lacks the common object-oriented programming concepts.But in this post i will show you how to write a class based javascript comes packed with a rich system of object-oriented programming that many programmers don’t know about.

object oriented programming using javascript


Prototype Based OOP : Conceptually, in class-based OOP, we first create a class to serve as a “blueprint” for objects, and then create objects based on this blueprint.For a real-world analogy, if you were to build a chair, you would first create a blueprint on paper and then manufacture chairs based on this blueprint. The blueprint here is the class, and chairs are the objects. If you wanted to build a rocking chair, you would take the blueprint, make some modifications, and manufacture rocking chairs using the new blueprint.

Lets create a new example of oops based prototype:


var student = Object.create(null);

Object.create(null) creates a new empty object.Now we add some properties and functions to our new object.


student.name = 'Peter';
student.gender = 'Male';
student.description = function() {
 return 'Gender: ' + this.gender + '; Name: ' + this.name;
};

Now student object can be used like:


console.log(student.description());
//Gender: Male; Name: Peter

We can create other, more specific student by using our sample object as a prototype.Think of this as cloning the object just like we took a chair and created a clone in the real world.


var stObj = Object.create(student);

We just created a stObj as a clone of the student. We can add properties and functions to this:


stObj.purr = function() {
 return 'Okay!';
};

We can use our stObj as a prototype and create a few more students:


var stObj1 = Object.create(stObj);
stObj1.name = 'Hello';

var stIbj2 = Object.create(stObj);
stIbj2.name = 'World';

console.log(stIbj2.description());

Class : How to write class based prototype in javascript let's see.


function Person() {
    //function Properties
    this.name = "Mac";
    this.age = "25";
    // start functions
    this.sayHi = function() {
        return this.name + " Says Hi";
    }
}
//Creating person instance
var p = new Person();
alert(p.sayHi());

Constructor : Constructor is a concept that comes under Classes.The constructor is used to assign values to the properties of the Class while creating an object using the new operator.


function Person(name, age) {
    //Now assigning values through constructor
    this.name = name;
    this.age = age;
    //functions
    this.sayHi = function() {
        return this.name + " Says Hi";
    }
}

//Creating person instance
var p = new Person("mac", 25);
alert(p.sayHi());
//Creating Second person instance
var p = new Person("john", 23);
alert(p.sayHi());

Inheritance : Inheritance is a process of getting the properties and function of one class to other class. For example, let’s consider "Student" Class, here the Student also has the properties of name and age which have been used in Person class. 


function studentClass() {}
studentClass.prototype = new Person();
studentClass.prototype = Object.create(Person);
var stobj = new studentClass();
alert(stobj.sayHi());

I hope you like the post please comment and sha

No comments:

Post a Comment

Download the eBook of react js for beginners

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications...

Popular