JavaScript Object Prototypes

In previous chapter we learn about object methods. In this chapter we will learn about Object Prototypes

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 Prototypes

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

Create 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>

Download the code Run the code

Add a Property to an Object

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>

Download the code Run the code

The new property weight will be added to car only and not to van or any other vehicle object.

Add new method to an 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>

Download the code Run the code

Same like new property, this new method will be added to car and not with any other vehicle object.

Add propertes to Prototype

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>

Download the code Run the code

Add methods to Prototype

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>

Download the code Run the code

Using prototype property

The prototype property of JavaScript allows you to add properties and methods to existing prototype.

Example

<!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>

Download the code Run the code

<!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>

Download the code Run the code

<<< JavaScript Object MethodsJavaScript Window Object >>>