Most of us learn JavaScript from tutorial website such as w3schools or tizag.com. However, these tutorial site only covered the most fundamental of JavaScript. Many hidden features of JavaScript are usual removed to simplify the tutorial. Although basic does bring us a long way, we still need to read more of these features eventually and improve our coding. In this article, i will cover the predefined prototype object in JavaScript. We will discuss everything we need to know about prototype object and the application in the real world.
The Prototype Object
The prototype object was introduced on JavaScript 1.1 onwards to simplify the process of adding or extending custom properties and methods to ALL instances of an object. In other word, prototype object is used to add or extend object properties or methods so every other object will also have such properties/methods. Let me show you an example. Below listed a few way to extend an object properties.
//adding a custom property to a prebuilt object
var imgObj =new Image();
imgObj.defaultHeight= "150px";
//adding a custom property to the custom object "Shape"
function Shape(){
}
var rectangle =new Shape()
rectangle.defaultColor = 'blue';
From the above example, we are able to extend properties of each object easily. However, if i create a new instances of the same object, the properties will be lost!
var newImg =new Image(); alert(newImg.defaultHeight); //return undefined 'defaultHeight'; var newRec =new Shape() alert(newRec.defaultColor); //return undefined 'defaultColor';
This is when prototype object comes in. Prototype object is able to add the properties above and extend to other new instances object as well. Hence, the following will allowed all new instances created to contain the properties or methods attached by any previous object. We just have to add the keyword prototype between the object and name of the properties/method to use the prototype object. Using the same example above,
//adding a custom property to a prebuilt object
function check_height(){
return typeof this.defaultHeight != 'undefined'?true:false;
}
var imgObj =new Image();
imgObj.prototype.defaultHeight= "150px";
imgObj.prototype.hasHeight= check_height;
//adding a custom property to the custom object "Shape"
function Shape(){
}
function color_checker(){
return typeof this.defaultColor != 'undefined'?true:false;
}
var rectangle =new Shape()
rectangle.prototype.defaultColor = 'blue';
rectangle.prototype.hasColor = color_checker;
var newShape =new Shape()
alert(newShape.defaultColor) // blue
alert(newShape.hasHeight) // true
var newImg =new Image()
alert(newImg.defaultHeight) // 150px
alert(newImg.hasColor()) // true
Now every new instances of Image and Shape will have the properties and methods defined previously by the variables rectangle and imgObj.
Prototype Object Restriction
Prototype object can add or extend properties or methods to any custom object but for predefined object, only those that are created with the new keyword are allowed to use the prototype object in JavaScript. The following list some of these predefined object.
- The date object
- The string object
- The Array object
- The image object
Prototype Object is an Array
In case you haven't notice, prototype object is actually an array. From all of the above example, we are doing the following declaration to create new properties or method
//declare a function
obj.prototype.name = function(){};
//declare a property
obj.prototype.name = variables;
Notice that we are actually associating a name with a variable or function into the prototype object. Hence, we can also declare prototype with the same way as declaring an array.
obj.prototype ={
name: variables,
name: function(){}
}
The above two methods are similar and can be declare either way. Since both ways are similar, performance wise shouldn't make any big differences.
Priority Between Prototype And Own Property
What if we have both property? If the object itself already has a prototype property and if we redeclare the exact same property again without the keyword prototype, JavaScript will take which property? The answer is own property. In JavaScript, the own property takes precedence over the prototype's. Consider the following example,
function Rectangle(w,h){
this.area = w*h;
}
var obj = new Rectangle(2,2); //area is 4;
obj.prototype.area = 200; // now we have own and prototype 'area'
alert(obj.area); // 4 will appear instead of 200; Hence, own property takes priority first.
What happened if we delete the property?
delete obj.area alert(obj.area); // 200 appeared!
Prototype property will take over again. Hence, we can use the Own property to overwrite prototype property defined in the object.
Identify Own and Prototype Properties
How do we identify whether the given object properties are from own or prototype? In JavaScript, there is a method hasOwnProperty which can be used to identify whether a given property is from own or prototype. Let's look at the following example,
function Rectangle(w,h){
this.area = w*h;
this.parameter = w+h;
}
obj.prototype.height = 5;
obj.prototype.weight = 6;
var obj = new Rectangle(2,2);
obj.hasOwnProperty('area');// return true;
obj.hasOwnProperty('parameter');// return true;
obj.hasOwnProperty('height');// return false;
obj.hasOwnProperty('weight');// return false;
Inheritance Using Prototype Object
In the real world, prototype object is usually used as inheritance during OOP (Object Oriented Principle) with JavaScript. In JavaScript, we are not looking at classes inheriting other classes but object inheriting other object since everything in JavaScript is Object. Once we understand this, it will be easier for us to show inheritance example with prototype object.
function Shape(){
}
function color_checker(){
return typeof this.defaultColor != 'undefined'?true:false;
}
function getArea(){
return this.area;
}
Shape.prototype.defaultColor = 'blue';
Shape.prototype.hasColor = color_checker;
Shape.prototype.getArea = getArea;
function Rectangle(w,h)
{
this.area = w*h;
}
function Rectangle_getArea()
{
alert( 'Rectangle area is = '+this.area );
}
Rectangle.prototype = new Shape();
Rectangle.prototype.constructor = Rectangle;
Rectangle.prototype.getArea = Rectangle_getArea;
Using the custom object 'Shape' example above, i extend it so that 'Rectangle' will inherit all method and properties of 'Shape'. Inherit can be done through this sentence
Rectangle.prototype = new Shape();
'Rectangle' prototypes are assigned to the prototype of the 'Shape' through an object instance thereby "inheriting" the methods assigned to the prototype array of 'Shape'. After 'Rectangle' has inherit 'Shape', it overwrites the getArea method of 'Shape' through this statement.
Rectangle.prototype. getArea = Rectangle_getArea;
Inheritance using prototype object can reduce a lot of unnecessary coding and make your overall code run faster. The constructor on the above code is to overwrite the way Rectangle object is being instantaneous since the Rectangle prototype was overwritten by Shape prototype on the previous statement. Hence, to create a Rectangle object, the constructor for it will be as follow
function Rectangle(w,h)
We can use the above code as follow
var recObj = new Rectangle(20, 20); rec.getArea(); //return 'Rectangle area is = 400' rec.hasColor(); // return true; rec.defaultColor;//return blue;
Check Prototype Inheritance
We can check whether a particular object is another prototype object by using the function isPrototypeOf. In other word, we can check whether a particular object inherit another object properties and methods. Using the previous inheritance explanation, we can check whether Shape is inherited into Rectangle object.
var rec = new Rectangle(5,5); Shape.isPrototypeOf(rec);// return true;
This shows that Shape is a prototype of rec object. I think the method name said it all.