Online: 8058
Online: 8058
Online: 8058
The JavaScript Objects are Date, Array, Regular Expression, Function, ........etc.
All the objects in the JavaScipt inherits the methods and properties from their prototype.
Objects are created withe new Object() or with Object Literal, which is inherit from prototype called Object.prototype, and it is on the top of the prototype chain.
We are taking person as object, the main properties to be considered while taking person as object are name, gender, age, height, etc. But we are taking only few properties into consideration among all those
<script>
function person(first, last, gender, height) {
this.firstName = first;
this.lastName = last;
this.gender = gender;
this.height = height;
}
</script>
In the above code snippet we have created an object prototype in a standard way.
Adding new properties/methods to an existing object.
Adding new properties/methods to all existing objects of a given type.
Adding new properties or methods to an object prototype.
<script>
function person(first, last, gender, height) {
this.firstName = first;
this.lastName = last;
this.gender = gender;
this.height = height;
}
var myFriend = new person("Charitha", "Goud", "Female", 5.3);
var myColleague = new person("Surendra", "Goud", "Male", 5.8);
myFriend.native = "Madanapalli"; // This is added property
document.getElementById("myId").innerHTML =
"My friend is from " + myFriend.native;
</script>
In the above code snippet there are few properties to a person object like first name, last name, gender, height other than this we have added an extra property i.e 'native' in the script code.
<script>
function person(first, last, gender, height) {
this.firstName = first;
this.lastName = last;
this.gender = gender;
this.height = height;
}
var myFriend = new person("Charitha", "Reddy", "Female", 5.3);
var myColleague = new person("Surendra", "Goud", "Male", 5.8);
// This is added method in the script code
myFriend.name = function () {
return this.firstName + " " + this.lastName;
};
docment.getElementById("myId").innerHTML = "My friend is " + myFriend.name();
</script>
In the above snippet we added an extra method to an object for returning the name of the object.
<p id="myId"></p>
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
person.native = "Madanapalli";
var myFriend = new person("Charitha", "Reddy", 23, "blue");
var myColleague = new person("Surendra", "Goud", 23, "brown");
document.getElementById("myId").innerHTML =
"My friend is " + myFriend.native;
</script>
Adding properties to a Prototype in a similar way
In the above code snippet we tried to add a new property to a prototype, but it is not possible to add a new property to prototpe like as we add a new property to an existing object, this is beacuse of prototype is not an existing object.
If in case we need to add a property to a prototpe, we must add it to a prototype function.
<p id="myId"></p>
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.native = "Madanapalli";
}
var myFriend = new person("Charitha", "Reddy", 23, "blue");
var mycolleague = new person("Surendra", "Goud", 23, "brown");
document.getElementById("myId").innerHTML =
"My friend is from " + myFriend.native + "<br>" + "My Colleague is also from " + mycolleague.native;
</script>
Adding properties to a prototype
In the above code snippet we added property to a prototype function for adding property to prototype.
<p id="myId"></p>
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.name = function () {
return this.firstName + " " + this.lastName
};
}
var myFriend = new person("Charitha", "Reddy", 23, "blue");
document.getElementById("myId").innerHTML =
"My friend is " + myFriend.name();
</script>
In the above code snippet we added a method to a prototype.
<p id="myId"></p>
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
person.prototype.native = "Madanapalli";
var myFriend = new person("Charitha", "Reddy", 23, "blue");
document.getElementById("myId").innerHTML =
"My friend is from " + myFriend.native;
</script>
Adding new properties to existing prototype
In the above code snippet we added new properties to an existing prototype.
<p id="myId"></p>
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
} // Adding new methods to existing prototype
person.prototype.name = function () {
return this.firstName + " " + this.lastName
};
var myFriend = new person("Charitha", "Reddy", 23, "blue");
document.getElementById("myId").innerHTML =
"My friend is " + myFriend.name();
</script>
Adding new methods to existing prototype
In the above code snippet we added a new method to the existing prototype in the script block which is linked with the HTML <p> element through the "myId".
