/    /  Javascript-Object Prototypes

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