JavaScript Object Prototypes
Every JavaScript object gets its properties and methods from a prototype.
In the last section, we discovered the utilization of an object constructor:
We also found out that it's not possible to add a new characteristic to an already existing object constructor.
To include a fresh characteristic in a constructor, you need to incorporate it within the constructor function:
Prototype Inheritance
All JavaScript objects get their properties and methods from a prototype:
Date objects come from Date.prototype.Array objects come from the Array.prototype.Person things come from Person.prototype things.
The Object.prototype is at the beginning of the prototype inheritance chain.
Date, Array, andPerson objects all get their features from Object.prototype.
Adding Properties and Methods to Objects
At times, you might want to include additional characteristics (or actions) to all current objects of a specific kind.
At times, you may need to include additional features or actions to an object's constructor.
Using the prototype Property
The JavaScript prototype property lets you add additional properties to object constructors.
You can use the JavaScript prototype property to add new methods to object constructors.
Only change your own prototypes. Don't change the basic designs of regular JavaScript objects.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Using an object 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;
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
document.getElementById("demo").innerHTML = "My father is " + myFather.age + ". My mother is " + myMother.age;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>You cannot add a new property to a constructor function.</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";
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
document.getElementById("demo").innerHTML = "The nationality of my father is " + myFather.nationality;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<p>Using an object 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;
this.nationality = "English";
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
document.getElementById("demo").innerHTML = "The nationality of my father is " + myFather.nationality + ". The nationality of my mother is " + myMother.nationality;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>The prototype property lets you add extra methods to object constructors.</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.prototype.nationality = "English";
const myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML = "The nationality of my father is " + myFather.nationality;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></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
};
const myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML = "My father is " + myFather.name();
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery