JavaScript
supports prototype-based inheritance, One object inherit from other object.
If you
create an object by using Constructor function, that object has the property
‘prototype’ by default.
Let me
give an example. I am going to define an Employee constructor function like
below.
function
Employee(id, firstName){
this.id = id;
this.firstName = firstName;
}
Let me
define two objects using Employee constructor function.
var emp1 =
new Employee(1, "Hari Krishna");
var emp2 =
new Employee(2, "Sudhir");
Suppose if
you want to add two more properties like organization, country to all the
instances of Employee objects (for existing objects and new objects), you need
to use the prototype property.
Employee.prototype.organization
= "XYZ";
Employee.prototype.country
= "India";
Above
statement adds the properties organization and country properties to all
Employee instances.
prototype.html
<!DOCTYPE html> <html> <head> <title>objects</title> </head> <body> <script type="text/javascript"> function displayObject(obj) { document.write("<br />"); for (prop in obj) { document.write(prop + " : " + obj[prop] + "<br />"); } document.write("<br />"); } function Employee(id, firstName) { this.id = id; this.firstName = firstName; } var emp1 = new Employee(1, "Hari Krishna"); var emp2 = new Employee(2, "Sudhir"); displayObject(emp1); displayObject(emp2); Employee.prototype.organization = "XYZ"; Employee.prototype.country = "India"; displayObject(emp1); displayObject(emp2); </script> </body> </html>
Open above
page in browser, you can able to see following text.
id : 1
firstName
: Hari Krishna
id : 2
firstName
: Sudhir
id : 1
firstName
: Hari Krishna
organization
: XYZ
country :
India
id : 2
firstName
: Sudhir
organization
: XYZ
country :
India
Can I add methods to an object using
prototype?
Yes of
course, you can also add methods using prototype.
Employee.prototype.getDetails
= function(){
return "[" + this.id + "
" + this.firstName + "]";
}
Above
statement adds the function getDetails to Employee.
prototype.html
<!DOCTYPE html> <html> <head> <title>objects</title> </head> <body> <script type="text/javascript"> function Employee(id, firstName) { this.id = id; this.firstName = firstName; } var emp1 = new Employee(1, "Hari Krishna"); var emp2 = new Employee(2, "Sudhir"); Employee.prototype.getDetails = function() { return "[" + this.id + " " + this.firstName + "]"; } document.write(emp1.getDetails() + "<br />"); document.write(emp2.getDetails() + "<br />"); </script> </body> </html>
Open above
page in browser, you can able to see following text.
[1 Hari
Krishna]
[2 Sudhir]
Inheriting properties from other
object
By using
prototype property, you can inherit the properties and methods of an object
into other object.
var
organization = {
name : "xyz",
city : "Bangalore"
}
function
Employee(id, firstName){
this.id = id;
this.firstName = firstName;
}
I defined
organization object using literal notation and created Employee constructor
function.
Employee.prototype
= organization;
Above
statement sets the prototype of Employee to organization. So Employee instances
inherit the organization properties like name and city.
prototype.html
<!DOCTYPE html> <html> <head> <title>objects</title> </head> <body> <script type="text/javascript"> function displayObject(obj) { document.write("<br />"); for (prop in obj) { document.write(prop + " : " + obj[prop] + "<br />"); } document.write("<br />"); } var organization = { name: "xyz", city: "Bangalore" } function Employee(id, firstName) { this.id = id; this.firstName = firstName; } Employee.prototype = organization; var emp1 = new Employee(1, "Hari Krishna"); displayObject(emp1); </script> </body> </html>
Open above
page in browser, you can able to see following text.
id : 1
firstName
: Hari Krishna
name : xyz
city :
Bangalore
No comments:
Post a Comment