In my earlier article in this series of learning JavaScript I have discussed about the data types , functions, this keyword and properties and classes. Learning JavaScript Prototype and Inheritance can be very easy as I have done in this article with the help of simple examples. Thereupon I will discuss how we can use prototype to create inheritance in JavaScript.
What is a prototype?
Talking generally “A prototype is the primary or first version of any structure or object from which we have to use to make the other forms of the same structure or object “. This was the basic definition of the word prototype itself.
Static Members in JavaScript
In my previous post I have discuss about the constructor functions and how we can create an instance of the class using these functions.But what if I want to add a static data member to this constructor function. Subsequently we have to simply use the name of the functions(Student in our case) followed by the name of the static data member as shown in the below code snippet.
In the below code I have added a static property named course.
function Student(fName, lName) {
this.fName = fName;
this.lName = lName;
}
Student.course = "Science";
var newStudent = new Student("Vikram", "Chaudhary");
alert(newStudent.course); //undefined
alert(Student.course); //ScienceWhat is a Prototype Object
Each and every object in JavaScript has a prototype object associated with it. This prototype object help us to add the functions or data members to instance of the class which can be shared among all the instances of that class.
In the above figure I have added a property named ClassTeacher and a function named CallForAttendance to the prototype object of the Student class. As we can see from the above example we can use the “this” keywords to access the members of the instance. But the value of these prototypes will be shared among all the instances of the Student class.
In this case a question will come to your mind. Why prototypes and why not static members? The answer for this question is that we cannot access the instance members in the static functions using “this” keyword.
How to achieve Inheritance in JavaScript
As we have seen that we have concept of class in javascript in my previous post, which means that we can create object. If we have objects in that case we should have concept of inheritance. Inheritance in JavaScript can be achieved by using concept of prototype object which I have discussed just now in the same article.
In the code snippet below I have created a Person class and set the prototype of that class as DisplayOccupation method which means that this method will be present for all the instances of the Person class.
function Person(occupation) {
this.occupation = occupation;
}
Person.prototype.DisplayOccupation = function () {
alert("My occupation is " + this.occupation);
}Now suppose if I have a Student class and if I want to set the Person class as the base class of the Student class I have to do it as shown below
function Student(fname, lname) {
this.fname = fname,
this.lname = lname
}
Student.prototype = new Person("student");
var student = new Student("vikram", "chaudhary");
alert(student instanceof Person); //trueWhenever I will create an instance of the Student class that class will inherit the properties of the Person class which can be confirmed by using the instanceof function as shown in the last line of above code snippet.
Now since Person class is the base class of the Student object and DisplayOccupation is prototype of Person class which means that we can call the DisplayOccupation on the instance of the Student class as shown below.
student.DisplayOccupation();// My occupation is student
Student.prototype.DisplayNameAndOccupation = function () {
alert("My Name is " + this.fname + " " + this.lname + " and I am a " + this.occupation);
}
student.DisplayNameAndOccupation();This is not the only case with prototypes we can also add function prototype to the Student class itself which is not derived from the Person class. The example of which I have in the above code. I have added the DisplayNameAndOccupation function as prototype to the Student class and in this function I am able to access all the properties of both Person as well as Student class.
I hope I am being able to clarify the topic of prototype as well as inheritance in this article with simple code examples.