Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding Prototype in JavaScript

 Print 
  Author : Shailendra Chauhan
Posted On : 02 Apr 2014
Total Views : 9,764   
Updated On : 02 Apr 2014
 

JavaScript is a prototype-based programming language which has no class like as C++, C#, Java etc. JavaScript uses functions as classes. Hence, in JavaScript we can define a class name Student as given below-

<script>
function Student() { }

//creating instances of class
var st1 = new Student();
var st2 = new Student(); 
</script>

Making members public and private

You can define a private or local variable inside a class by using var keyword. When you define a variable without var keyword inside a class, it acts as a public variable.

<script>
//Person class
var Person = function () {
 var id; //private
 var show = function () { }; //private function

 this.Name = "Deepak"; //public
 this.Address = "Dehi"; //public
 this.Display = function () { //public function
 //do something
 };
};

//creating instance of Person class
var person1= new Person();
 
// calling the person class Display method.
person1.Display();
</script>

Prototype-based programming

Prototype-based programming is a style of object-oriented programming in which classes are not present, and code re-usability or inheritance is achieved by decorating existing objects which act as prototypes. This programming style is also known as class-less, prototype-oriented, or instance-based programming.

Defining constructor in JavaScript

In JavaScript, the function acts as the constructor for the instance. Function within JavaScript is defined by using function keyword followed by parentheses (). You can define a Person class with constructor as given below:

<script>
var Person=function (firstname, lastname, age) { //constructor
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
};

var person1 = new Person("Deepak", "Kumar", 50);
</script>

Different ways to create object/instance

In JavaScript, you can create object in two different ways as given below-

  1. Using Constructor function

    You can create the object in JavaScript, by using new keyword and constructor function as given below-

    <script>
    function Person(firstname, lastname, age) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
    }
    
    var person1 = new Person("Deepak", "Kumar", 50);
    var person2 = new Person("Manu", "chauhan", 21);
    </script>
    
  2. Using Object initializer

    You can also create the object in JavaScript, by using object initializer as given below-

    <script>
    person1 = new Object();
    person.firstname = "Deepak";
    person.lastname = "Kumar";
    person.age = 50;
    
    //Or
    person1 = { firstname: "Deepak", lastname: "Kumar", age: 50 };
    </script>
    
What do you think?

I hope you will enjoy the prototype while programming with JavaScript. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS
24 SEP
Angular2 and Angular4 (Classroom)
08:30 AM-11:30 AM IST
23 SEP
MEAN Stack (Classroom)
8:30 Am To 11:30 Am
23 SEP
Microsoft Azure Infrastructure Solutions (Online)
08:00 PM-11:00 PM IST / 9:30 AM-12:30 PM CST
20 SEP
MEAN Stack (Online)
07:00 AM-09:00 AM IST
20 SEP
ASP.NET MVC with Angular4 (Online)
9:00PM- 11:00PM IST(+5:30GMT)
16 SEP
Angular2 and Angular4 (Online)
08:00 AM-10:00 AM IST(+5.30 GMT)
7 SEP
ASP.NET MVC with Angular4 (Online)
09:00 PM to 11:00 PM IST (+5:30 GMT)
22 AUG
ASP.NET Core with Angular4 (Online)
07:00 AM - 9:00 AM IST(+5:30 GMT)
19 AUG
MEAN Stack 2 (Online)
5:30 Pm - 7:00 PM IST (+5:30 GMT)
19 AUG
ASP.NET MVC with Angular4 (Online)
10:30 Am to 12:30 PM IST (+ 5:30 GMT)
19 AUG
NodeJS with Angular4 (Classroom)
04:00 PM to 07:00 PM IST (+5:30 GMT)
12 AUG
ASP.NET MVC with Angular4 (Classroom)
11:30 AM - 1:30 PM IST (+5:30GMT)
15 JUL
ASP.NET MVC with Angular4 (Online)
03:30 PM - 05:30 PM IST(+5.30 GMT)
LIKE US ON FACEBOOK
 
+