Ads Top

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(namecontact){
        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.contactthis.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:

Copyright Reserved to Anything Learn. Powered by Blogger.