JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Object Prototypes
All JavaScript objects inherit properties and methods from a prototype.
Example
<!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>
Output
JavaScript Objects
Using an object constructor:
My father is 50. My mother is 48
You are not allowed to 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=”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>
Output
JavaScript Objects
You cannot add a new property to a constructor function.
The nationality of my father is undefined
To add a new property to a constructor, you must add it to the constructor function:
Example
<!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>
Output
JavaScript Objects
Using an object constructor:
The nationality of my father is English. The nationality of my mother is English
Prototype Inheritance
All JavaScript objects inherit properties and methods from a prototype:
- Date objects inherit from Date.prototype.
- Array objects inherit from Array.prototype..
- Person objects inherit from Person.prototype
The Object.prototype is on the top of the prototype inheritance chain:
Date objects, Array objects, and Person objects inherit from Object.prototype.
Adding Properties and Methods to Objects
Using the prototype Property
The JavaScript prototype property enables you to add new properties to object constructors:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>The prototype property allows you to add new methods to objects 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>
Output
JavaScript Objects
The prototype property allows you to add new methods to objects constructors:
The nationality of my father is English
The JavaScript prototype property also enables you to add new methods to objects constructors:
Example
<!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>
Output
JavaScript Objects
My father is John Doe