Hello guys,

Today, I am going to show you the concept of object oriented programming in JavaScript. Object-oriented programming (OOP) is a programming paradigm that uses abstraction to create objects based on the real world. OOP uses several techniques such as, modularity,  encapsulation and polymorphism. Today, there are many popular programming languages ( Java, JavaScript, C#, C++, Python, PHP, Ruby and Objective-C) that support OOP. Now let's have a look at some definitions used in OOP;

 

Class:

Defines the characteristics of an object. A class is a template definition of an object's properties and methods.

Object:

An instance of a class.

Property(Attribute):

An object characteristic, such as name, size.

Method:

An object capability, such as running, jumping. It is a function associated with a class.

Constructor:

A method called at the moment an object is instantiated. Has the same name as the class containing it.

Inheritance:

A class can inherit characteristics from another class.

Encapsulation:

A method of bundling the data and methods that use the data so that the developer doesn't have to know all the detail about the methods or the data.

Abstraction:

The conjunction of an object's complex inheritance, methods, and properties must adequately reflect a reality model.

Polymorphism:

Poly means "many" and morphism means "forms". In polymorphism, different classes can define the same method or property.

Let us start by declaring a constructor of the class named Fruit and explaining the concepts on this example;

function Fruit(){

     this.name = "Unknown name";
     this.color = "Unknown color";
     this.size = "Unknown size";

}
  

As you see in the code above, the Fruit class has 3 properties (name, color, size) and  these are defined as unknown by default. So, if we do not declare any of these properties of an object, it will be "unknown" by default. As a next step let's create our methods to write and read these properties;

   Fruit.prototype.setName = function(newName){
           if(typeof newName != 'undefined'){
               this.name = newName;
           }
           else{
               document.write("Please enter a valid name");
           }
     }
 
     Fruit.prototype.getName = function(){
           return this.name;
     }

In the code above, only the setName and getName methods are shown since the other methods (setColor, getColor, setSize, getSize) can be created the same way. The next step is to create an instance of the Fruit class (Object), give a name to this object by using the setName method and print the 3 properties of this object to the screen;

  
     var apple = new Fruit();
     apple.setName("Red Apple");

     document.write(apple.getName() + "<br/>");
     document.write(apple.getColor() + "<br/>");
     document.write(apple.getSize() + "<br/>");

As you can see, only the name property is changed and the rest remain 'unknown' by default. The output;

Red Apple
Unknown color
Unknown size

INHERITANCE

After learning how to create an object and all, let's move on to inheritance.  Inheritance is used to create a new object, that inherits the properties of an existing object. For example, let's create another class named Shoe and use the properties of Fruit class;

 // New class called Shoe inherits Fruit class
  function Shoe(){
      Fruit.call(this);
      this.brand = "Unknown";
  }

After creating a new class, now it is time to inherit the properties of the Fruit class and add our new property and methods to our new class;

// Create the link between these classes( inherit Fruit )
 Shoe.prototype = new Fruit();
 Shoe.prototype.constructor = Shoe;

// setBrand and getBrand Methods for the Shoe class
 Shoe.prototype.setBrand = function(newBrand){
     if(typeof newBrand != 'undefined'){
        this.brand = newBrand;
     }
     else{
        document.write("Please enter a valid brand");
     }
 }

 Shoe.prototype.getBrand = function() {
     return this.brand;
  }

Lastly, we create our new Shoe object and print some of the properties to the screen;

  
// Create myshoe object 
 var myshoe = new Shoe();

 myshoe.setName("My New Shoe");
 myshoe.setBrand("Nike");

 document.write(myshoe.getName() + "<br/>");
 document.write(myshoe.getBrand() + "<br/>");
   

POLYMORPHISM

" Polymorphism in an object oriented system is the ability of different objects to respond to the same message with different answers."

Polymorphism is a closely tied topic to inheritance. Let's see the following example to clarify polymorphism;

Imagine having 3 different objects ( you, your teacher and an old man) and all these objects having a common "talk" method. Whenever you call the method of each of these objects, a string is printed to the screen. Being able to use a common method with these objects and getting different results is called polymorphism;

  
   var you = { talk: function () { alert("I am learning OOP!"); } };
   var yourTeacher = { talk: function () { alert("I will give you an A!"); } };
   var oldMan = { talk: function () { alert("My back hurts!"); } };

   you.talk();
   yourTeacher.talk();
   oldMan.talk();

ENCAPSULATION

Encapsulation is one of the most important topics in OOP. In the previous example, myshoe object does not need to know how the Shoe class's getBrand() method is implemented, but still can use that method. This is called encapsulation, by which every class packages data and methods into a single unit. This enables us to hide the content of the classes and use it only when needed.

Information hiding is a common feature in other languages, such as Java, often as private and protected methods/properties. However this is not required in JavaScript.


Please leave a comment if you have any questions or comments and stay tuned for more!

Continue Reading Introduction to JavaScript Tutorial 5 - Function Initialization and Variables