Object Oriented Programming (OOM)

Programming done using data and methods as bundle of objects is called Object Oriented Programming. Example: Java, C…. Prototype based programming is an object oriented programming where objects are present instead of classes. Objects are used as prototype to define behavior and functionalities.

The following OOP's concepts are applied on objects in Javascript:

Namespace

Grouping identifiers, methods and functions under application specific name is called namespace. In Javascript all the declarations and definitions are stored in global namespace. We need namespaces to avoid data and name collision when using with third party libraries or our code is part of large application.

NOTE: Data defined under a namespace is considered a single huge object.

Example of JavaScript's namespaces

The following syntax first checks whether MyNameSpace is created already in this or another file. If not create the empty namespace, else use the existing namespace to do the function.

<!DOCTYPE html>
<html>

<head>
<script>
    // Creating MYMATH namespace
    var MYMATH = MYMATH || {};
    MYMATH.Number = function(x, y){
        this.x = x;
        this.y = y;      
        this.getSum = function(){                            
          document.write(this.x + this.y);
        };
  }
</script>  
</head>

<body>
<p>Result is:</p>
<script>
    var num = new MYMATH.Number(5, 1);             
    num.getSum();
</script>
</body>

</html>

Class

Since Javascript is prototype based language, class do not exist. Instead functions are created and used as class.

Example of JavaScript's classes

<!DOCTYPE html> <html>

<head> <script> function number(x ,y){ //variables accessed using “this” keyword this.x = x; this.y = y; } </script> </head>

<body> <script> //Instantiate object from class var num = new number(4, 8); </script> </body>

</html>

Object

Object is instance of a class. They can be created using new keyword or using object initializer.

Example

var num = new Number(4, 8);//Object num is created

var num = {x: 4, y:8}; //Object num is created

Constructor

Constructor is a method which gets executed when object is created. In Javascript, we do not define an explicit constructor, as the function which gets executed when object is created, serves as constructor. This function sets the object properties and execute methods to prepare the object for use.

Example of JavaScript's constructors

<!DOCTYPE html> <html>

<head> <script> //Constructor and class: number function number(x ,y){ this.x = x; //Initializes when object is created this.y = y; //Initializes when object is created console.log(“Variables initialized”); } </script> </head>

<body> <script> var num = number(6, 9); </script> </body>

</html>

Property

Variables contained in every instance of object are properties. Properties are defined in class and initialized in constructor, when object is created. Accessing property within class is done using this keyword. Outside the class, the property is accessed using object name, objectName.property.

Example of JavaScript's properties

<!DOCTYPE html>
<html>

<head>
<script>
    var Profession = function(name){
        // Accessing using &ldquo;this&rdquo;
        this.name = name;
        this.display = function(){
            document.write("I am a " + this.name);
        };
    }
</script>	
</head>

<body>
<script>
    var doc = new Profession("doctor");
    //Accessing using &ldquo;.&rdquo;
doc.display();
</script>
</body>

    
</html>

Method

Method is a function attached with object. It defines action on the property. The various ways of defining methods in a class as given below.

Example #1 of JavaScript's methods

<!DOCTYPE html> <html>

<body> <script> function number(x ,y){ //variables accessed using “this” keyword this.x = x; this.y = y; //Calling method this.sum = getSum; } function getSum(){ return this.x + this.y; } //Instantiate object from class var num = new number(4, 8); alert(num.getSum()); </script> </body>

</html>

Methods can be defined as separate function. But all these are stored in global space. Defining many such functions lead to naming conflicts.

Example #2 of JavaScript's methods

<!DOCTYPE html> <html>

<body> <script> function number(x ,y){ this.x = x; this.y = y; //Function within constructor this.sum = function(x, y){ return (this.x + this.y); }; } var num = new number(4, 8); alert(num.getSum()); </script> </body>

</html>

Defining method within constructor leads to creating the sum() function every time an object is created.

Example #3 of JavaScript's methods

<!DOCTYPE html> <html> <body> <script> function number(x ,y){ this.x = x; this.y = y; } number.prototype.getSum = function(){ return this.x + this.y; }; var num = new number(4, 8); alert(num.getSum()); </script> </body>

</html>

Defining the method through prototype is better way of defining objects.

Inheritance

Inheritance means an object inherits methods and properties from parent object. It is effective reusing of code, where objects can have its parents and also its own, methods and properties. Javascript is prototype language where object is inherited from another object as opposed to classical languages like C+ or Java where class is inherited from another class.

Example of JavaScript's inheritance

Animal (Parent object) {methods and properties: haveIntelligence, eat();}

Wild(Child Object) {name, live(); } -> Own methods. (haveIntelligence, eat();) -> Inherited methods.

In the short exampl above, the Animal is a general class which defines general behavior of the animal – eat, sleep, live. Lion and cow are sub class which can inherit the methods from Animal class.

Steps to inherit class:

ChildClassName.prototype = new ParentClass();
Reset constructor property for class using ChildClassName.prototype.constructor = ChildClassName
We call the parent class methods overridden in child class using function call() method

Example of JavaScript's complex inheritance

<!DOCTYPE html>
<html>	

<body>
<script>
//Parent class
    function Animal(){
        this.intelligence = false;				
    }
//Parent Function
    Animal.prototype.eat = function(){
        document.write("<br\> Animals eat anything from grass to rodents to other animals");
    }
//Create child class object that inherits properties from parent class.
    WildAnimal.prototype = Object.create(Animal.prototype);
            //Set constructor to refer to child class.
    WildAnimal.prototype.constructor = WildAnimal;
//Child Class
    function WildAnimal(name){
        //Call parent constructor, i.e. super class
        Animal.call(this);
        //Initialize this class properties
        this.name = name;
    }
//Define child class function
    WildAnimal.prototype.live = function(){
        document.write("<br\>" + this.name + " lives in forest");
    }	
//Override parent class methods.
    WildAnimal.prototype.eat = function(){
        document.write("<br\>" + this.name + " eats in forest");
    }
    var Horse = new Animal();
    var Lion = new WildAnimal("lion");
//Prints : Lion eats in forest
    Lion.eat();
//Prints: Lion lives in forest
    Lion.live();		
    //Prints true for both the checks.
  	document.write("<p>Print TRUE if LION is inherited</p>");
    document.write(Lion instanceof Animal);
  	document.write(" / ");
    document.write(Lion instanceof WildAnimal);
</script>
</body>

    
</html>

Polymorphism

One function name defined in many ways is called polymorphism. That is, a parent class function inherited in child class may have different implementation. This is also called method over-riding.

Example of JavaScript's polymorphism

The eat() function in above example is implemented differently in Animal and WildAnimal classes.

Encapsulation

Encapsulation is hiding of private properties and exposing methods to manipulate the data. JavaScript do not have public and private access specifiers as in other languages. The object variables with this keyword is public, the variables with var keyword is private.

Encapsulation ensures:

All the private data with var keyword and methods inside constructor are available for manipulation within object class only.
For outside the object, the properties can be accessed only by getter and setter functions.
Private methods cannot have access to public properties. They have to define a variable and assign the public property to the variable for its access.

Example of JavaScript's encapsulation

<!DOCTYPE html>
<html>	
    
<body>
<script>
    function Shapes(){
        var userShape = "Rectangle";
        //Getter and setter for private variable userShape
        this.getUserShape = function(){
            return userShape;
        }
        this.setUserShape = function(shape){
            userShape = shape;
        }
        this.display = function(){
            document.write("<br\>" + userShape + " is the shape");
        }				
    }
    var rect = new Shapes();
    // Rectangle is the shape
    rect.display();
    rect.userShape = "Circle";
    //Rectangle is the shape, as private variable cannot be manipulated directly
    rect.display();
    rect.setUserShape("Circle");
    // circle is the shape
    rect.display();
</script>
</body>

    
</html>

Abstraction

Abstraction in OOP's basically means declaring methods and hiding its implementation. This is of great use with encapsulation and inheritance features. Javascript does not support abstract and interface classes as in Java or C+. But abstraction can be achieved using prototype and is of great advantage in big applications.

Example of JavaScript's abstraction

<!DOCTYPE html>
<html>

<head>
<script>
//Abstract method without implementation
var Vehicle = {
   printModel : function(){}
};

var Model1 = function(){};
var Model2 = function(){};
//Objects implementing Abstract class
Model1.prototype = Object.create(Vehicle);
Model2.prototype = Object.create(Vehicle);

//Abstract function implementation
Model1.prototype.printModel = function(model){
	//Some functionality here
   document.write("Toyota");
   document.write(", ");
};
Model2.prototype.printModel = function(model){
	//Some functionality here
   document.write("Honda");
};
//Object to print the classes
var VehicleModelPrinter = function(itemPrint){
   this.currObj = itemPrint;
};
VehicleModelPrinter.prototype.print = function(){
   this.currObj.printModel();

};
</script>
</head>

<body>
<script>
	var obj = new Model1();
	var printer = new VehicleModelPrinter(obj);
	//Prints Toyota
	printer.print();

	var obj1 = new Model2();
	var printer2 = new VehicleModelPrinter(obj1);
	//Prints Honda
	printer2.print();
	</script>
</body>

    
</html>

›› go to examples ››

Object Oriented Programming (OOM)

Namespace

Example of JavaScript's namespaces

Class

Example of JavaScript's classes

Object

Example

Constructor

Example of JavaScript's constructors

Property

Example of JavaScript's properties

Method

Example #1 of JavaScript's methods

Example #2 of JavaScript's methods

Example #3 of JavaScript's methods

Inheritance

Example of JavaScript's inheritance

Example of JavaScript's complex inheritance

Polymorphism

Example of JavaScript's polymorphism

Encapsulation

Example of JavaScript's encapsulation

Abstraction

Example of JavaScript's abstraction

Comments

About

Contact

Get Connected