JavaScript object prototype
All JavaScript objects inherit properties and methods from the prototype.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>
<h2>JavaScript object</h2>
<p id="demo"></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("demo").innerHTML =
"My father is " + myFather.age + ". My mother is " + myMother.age;
</script>
</body>
</html>We also learned that you cannot add new properties to an existing object constructor:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript object</title>
<body>
<h2>JavaScript object</h2>
<p>You cannot add a new property to the constructor.</p>
<p id="demo"></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("demo").innerHTML =
"The nationality of my father is " + myFather.nationality;
</script>
</body>
</html>To add a new property to a constructor, you must add it to the constructor:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript object</title>
<body>
<h2> JavaScript object</h2>
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = "English";
}
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
document.getElementById("demo").innerHTML =
"My father's nationality is " + myFather.nationality + ". My mother's nationality is: " + myMother.nationality;
</script>
</body>
</html>-
Prototype inheritance
All JavaScript objects inherit properties and methods from the prototype:
Object.prototype is at the top of the prototype inheritance chain: Date object, Array object and Person object inherit from object.prototype.
- Date object inherits from Date.prototype
- Array object inherits from Array.prototype
- Person object inherits from Person.prototype
Add properties and methods to objects
Sometimes, you want to add new properties (or methods) to all existing objects of a given type. Sometimes you want to add new properties (or methods) to the object constructor.
Use prototype properties
The JavaScript prototype property allows you to add new properties to the object constructor:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";The JavaScript prototype property also allows you to add new methods to the object constructor:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};