What is the prototype in javascript
How to use prototype in javascript?
We use of prototype in the object when we call any function to another function Or using anywhere and you have required that new property adding so how it possible because you are calling this function from another resource. Yes, it’s possible through to Prototype. <script>
function f1(){
this.name = 'Sheo';
}
f1.prototype.email = 'sheo@gmail.com';
f1.prototype = Object.create(f1.prototype);
var rrr = new f1();
console.log(rrr.name);
console.log(rrr.email);
</script>
Described above example: You have f1 an object and you will get “name” property easily in the new object. But if you want to add new property “email” then you can write as “f1.prototype.email” and assign a value as you want. When you want to access this property then you will write reference object name where you want to add and create a new object as this “f1.prototype = Object.create(f1.prototype);”
“Important that you can modify only added new property through prototype not already added property of the object”
And now you can access the newly added property.
How to access an object to another object?
It’s required to use “call” method, already defined in the Javascript.
<script>
function f1(){
this.name = 'Sheo';
}
function f2(){
f1.call(this);
this.lastName = 'Sagar';
}
var rrr = new f2();
console.log(rrr.name);
console.log(rrr.lastName);
</script>
You can use the call method as given above example. “f1.call(this)”
It's called all property of the “f1” object. You can see another example of the prototype inheritance.
<script>
function f1(){
this.name = 'Sheo';
}
f1.prototype.email = 'sheo@gmail.com';
function f2(){
f1.call(this);
this.lastName = 'Sagar';
}
f2.prototype =
Object.create(f1.prototype);
f2.prototype.dob = '18-03-2008';
function f3(){
f2.call(this);
this.name = 'Raghav';
}
f3.prototype =
Object.create(f2.prototype);
var rrr = new f1();
console.log(rrr.name);
console.log(rrr.email);
var sss = new f3();
console.log(sss.name);
console.log(sss.email);
console.log(sss.dob);
console.log(sss.lastName);
</script>
.........................................................
Another way we can do work with prototype...
<script>
function user(name, contact){
this.name = name;
this.contact = contact;
}
function education(){
}
education.prototype.getEducation = function(){
console.log("Education sheo " + this.edu);
}
// inheritance
user.prototype = Object.create(education.prototype);
user.prototype.getName = function(evt){
console.log(this.name);
this.name = evt.target.value
console.log(evt);
}
user.prototype.getContact = function(){
console.log(this.contact);
}
user.prototype.getUserDetails=function(){
console.log(this.name, ' and contact no is', this.contact, this.email)
}
user.prototype.getUserEmail=function(){
console.log(this.email);
}
user.prototype.getFirstChar=function(){
//console.log(this.name);
/*var firstName = this.name;
var fCharac = firstName.charAt(0)
console.log(fCharac);*/
var fCharac = (this.name).charAt(0)
console.log(fCharac);
}
user.prototype.getLastChar = function(){
var lCharac = (this.name).charAt((this.name).length-1);
var lastCharacterUpperCase = lCharac.toUpperCase();
console.log(lastCharacterUpperCase);
}
user.prototype.remveFirstChar = function(){
var firstRemoveCharac = (this.name).substring(1);
console.log(firstRemoveCharac);
}
user.prototype.remveLastChar = function(){
var lastRemoveCharac = (this.name).substring(0, (this.name).length-1);
console.log(lastRemoveCharac);
}
var shiv = new user('Shiv', '9990062545');
shiv.email="dfdf"
var raja = new user('Raja', '342423423');
var sheo = new user('Sheo', '9313921268');
sheo.email = "sheoiitp@gmail.com";
sheo.edu = "BCA";
//console.log(window);
</script>
<button value="Sagar" onclick="sheo.getName(event)">get name</button>
<button onclick="sheo.getContact()">get contact</button>
<button onclick="sheo.getUserDetails()">get Details</button>
<button onclick="sheo.getFirstChar()">get First character</button>
<button onclick="sheo.getLastChar()">get Last character</button>
<button onclick="sheo.remveFirstChar()">remove First character</button>
<button onclick="sheo.remveLastChar()">remove Last Char</button>
<button onclick="sheo.getEducation()">Get Education</button>
.........................................................
Prototype composition or inheritance example:
composition or inheritance means that create alot method OR object and call one
time where we need as below example:
// composition OR inheritance
const eater = function(){
return {
eater: () => {console.log('I am eating');}
}
}
const sleeper = function(){
return {
sleeper: () => {console.log('I am sleeper');}
}
}
const barker = function(){
return {
barker: () => {console.log('I am barker');}
}
}
const meower = function(){
return {
meower: () => {console.log('I am meower');}
}
}
// Now create Composition Object for Dog
const dog = () => {
return Object.assign(
eater(),
sleeper(),
barker()
)
}
// Now create Composition Object for Cat
const cat = () => {
return Object.assign(
eater(),
sleeper(),
meower()
)
}
let tiger = dog();
tiger.eater(); // I am eating
tiger.sleeper(); // I am sleeper
tiger.barker() // I am barker
let leo = cat();
leo.eater(); // I am eating
leo.sleeper(); // I am sleeper
leo.meower(); // I am meower
No comments:
Note: Only a member of this blog may post a comment.