JavaScript Inheritance and Prototype # OOPS JS
Introduction to Inheritance and Prototype Chain in JavaScript
Introduction
This article explains inheritance and the Prototype Chain in JavaScript. JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), since it is dynamic and does not provide a class implementation (although the keyword class is a reserved keyword and cannot be used as a variable name).
When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain.
In JavaScript, a prototype is a property of a function and the object created by constructor functions. The prototype of a function is an object. It's main use is when a function is used as a constructor.
Prototype and property of function
In this example we will understand the concept of property and a prototype of a class. Have a look at the following example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="form1" runat="server">
<script>
function patient(name,age , nationality) {
//Property of patient function
this.name = name;
this.age = age;
this.nationality = nationality;
}
var pat = new patient('Raman','54','Indian');
console.log(pat.name);
console.log(pat.age);
console.log(pat.nationality);
</script>
</form>
</body>
</html>
Adding property in run time
We can add an additional property of a function when the object is created. In this example we are adding a "address" property with a patient object at run time. Here is a sample example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="form1" runat="server">
<script>
function patient(name,age , nationality) {
//Property of patient function
this.name = name;
this.age = age;
this.nationality = nationality;
}
var pat = new patient('Raman','54','Indian');
patient.prototype.address = 'Dindigul';
console.log(pat.name);
console.log(pat.age);
console.log(pat.nationality);
console.log(pat.address);
</script>
</form>
</body>
</html> 
Inherit property of function to another function.
In the following example we will see inheritance in JavaScript. We will inherit a few properties of a function in another function.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <form id="form1" runat="server"> <script> function patient(name, age) { this.name = name, this.age = age } function visitinfo(name,age,doctor,speciality) { patient(name, age); this.doctor = doctor; this.speciality = speciality; } patient.prototype = visitinfo.prototype; visitinfo.prototype.ShowPatient = function () { console.log("Name:- " + name); console.log("Age:- " + age); console.log("Doctor & Speciality :- " + this.doctor + ' ' + this.speciality ); } var pat = new visitinfo('Raman', '54','Rengasamy','Dental'); pat.ShowPatient(); </script> </form> </body> </html>
Comments
Post a Comment