In previous chapter we learn about object methods. In this chapter we will learn about Object Prototypes
Every JavaScript Object has a prototype which is also an object. Prototype is like a parent object.
All JavaScript objects i.e Date, Array, RegExp, Function, etc.. inherit from the parent prototype Object.prototype.
Every JavaScript Object inherits properties and methods of its prototype object.
JavaScript Prototype is a top most parent of all objects.All JavaScript objects inherits the properties and methods from prototype.
Objects create by an object literal method, or with new Object(), inherit parent prototype Object.prototype.
Objects create using new Date(), inherit parent prototype Date.prototype
You can create an object prototype using an object constructor method as shown below.
function Vehicle(make, model, mfgyear, color) { this.make = make; this.model = model; this.mfg_year = mfgyear; this.color = color; }
This is a standard method of create an object prototype. Once constructor function is define, you
can use the new keyword to create new objects from same prototype.
<!DOCTYPE html>
<html>
<body>
<p id="text"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
}
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
var van = new Vehicle('Toyota', 'Auris', '1997', 'White');
document.getElementById('text').innerHTML = 'Color of car is '+car.color+'. Color of van is '+van.color;
</script>
</body>
</html>
It is very easy to add a new property to an existing object.
<!DOCTYPE html>
<html>
<body>
Car weight is defined after an object is created.
<p id="text"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
}
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
car.weight= '1000kg';
document.getElementById('text').innerHTML = 'Weight of a car is '+car.weight;
</script>
</body>
</html>
The new property weight will be added to car only and not to van or any other vehicle object.
It is also easy to add a new method to an existing object.
<!DOCTYPE html>
<html>
<body>
Car manufacturer method is defined after an object is created.
<p id="text"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
}
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
car.manufacturer = function() {
return this.make+' '+this.model;
};
document.getElementById('text').innerHTML = 'Car manufacturer is '+car.manufacturer();
</script>
</body>
</html>
Same like new property, this new method will be added to car and not with any other vehicle object.
Adding a new property to prototype is not same as adding a property to an existing object, because prototype is not an existing object.
To add a new property to prototype, you must add it to object constructor function.
<!DOCTYPE html>
<html>
<body>
It is not possible to assign a new property to a new prototype constructor function.
<p id="text"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
this.sub_type = "Sedan";
}
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
document.getElementById('text').innerHTML = 'Car type is '+car.sub_type;
</script>
</body>
</html>
You can also add methods to constructor function.
<!DOCTYPE html>
<html>
<body>
You can add new method to prototype constructor function.
<p id="text"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
this.manufacturer = function() {
return this.make+' '+this.model;
};
}
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
document.getElementById('text').innerHTML = 'Car manufacturer is '+car.manufacturer();
</script>
</body>
</html>
The prototype property of JavaScript allows you to add properties and methods to existing prototype.
<!DOCTYPE html>
<html>
<body>
You can add new method to prototype constructor function.
<p id="text"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
}
Vehicle.prototype.sub_type = "Sedan";
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
document.getElementById('text').innerHTML = 'Car subtype is '+car.sub_type;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
You can add new method to prototype constructor function.
<p id="text"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
}
Vehicle.prototype.manufacturer = function() {return this.make+' '+this.model;};
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
document.getElementById('text').innerHTML = 'Car manufacturer is '+car.manufacturer();
</script>
</body>
</html>