Javascript-Object Prototypes

A prototype is an object and that is associated with each function() and object by default in JavaScript, where the javascript function’s prototype property is accessible, modifiable and the object’s prototype property is not visible.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="pro"></p>

<script>
function Person(first, last, age, eye) {
 this.firstName = first;
 this.lastName = last;
 this.age = age;
 this.eyeColor = eye;
}

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("pro").innerHTML =
"My father is " + myFather.age + ". My mother is " + myMother.age;
</script>

</body>
</html>

OUTPUT:

JavaScript Objects

My father is 50. My mother is 48

We can’t add a new property to an existing object constructor.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>You cannot add a new property to a constructor function.</p>

<p id="pro"></p>

<script>
function Person(first, last, age, eye) {
 this.firstName = first;
 this.lastName = last;
 this.age = age;
 this.eyeColor = eye;
}

Person.nationality = "English";

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("pro").innerHTML =
"The nationality of my father is " + myFather.nationality;
</script>

</body>
</html>

OUTPUT:

JavaScript Objects

You cannot add a new property to a constructor function.

The nationality of my father is undefined

Add a new property to a constructor, you must add it to the constructor function().

Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="pro"></p>

<script>
function Person(first, last, age, eye) {
 this.firstName = first;
 this.lastName = last;
 this.age = age;
 this.eyeColor = eye;
 this.nationality = "Telugu";
}

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("pro").innerHTML =
"The nationality of my father is " + myFather.nationality + ". The nationality of my mother is " + myMother.nationality;
</script>

</body>
</html>

OUTPUT:

JavaScript Objects

The nationality of my father is Telugu. The nationality of my mother is Telugu

Prototype Inheritance:

Date objects inherit from Date.prototype
Array objects inherit from Array.prototype
Person objects inherit from Person.prototype

Using the prototype Property:

add new properties to object constructors.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="pro"></p>

<script>
function Person(first, last, age, eye) {
 this.firstName = first;
 this.lastName = last;
 this.age = age;
 this.eyeColor = eye;
}

Person.prototype.nationality = "telugu";

var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("pro").innerHTML =
"The nationality of my father is " + myFather.nationality;
</script>

</body>
</html>

OUTPUT:

JavaScript Objects

The nationality of my father is telugu

add new methods to objects constructors:

Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="pro"></p>

<script>
function Person(first, last, age, eye) {
 this.firstName = first;
 this.lastName = last;
 this.age = age;
 this.eyeColor = eye;
}

Person.prototype.name = function() {
 return this.firstName + " " + this.lastName
};

var myFather = new Person("ravi", "kumar", 50, "blue");
document.getElementById("pro").innerHTML =
"My father is " + myFather.name();
</script>

</body>
</html>

OUTPUT:

JavaScript Objects

My father is ravi kumar