SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question Prototyping in JS. Whats the need?

    Hi

    can someone please explain me whats the need of prototyping in javascript?

    What I mean to say is, when you add a method/property to an object using "Function.prototype" syntax, why cannot you directly add that method inside that object when creating it?

    Consider the following example:

    Instead of doing this:
    Code:
    myobj = function(fname){
     this.fname = fname;
    };
    
    myobj.prototype.age = function (age) {
       this.age = age;
    };
    
    var x = new myobj('joe');
    alert(x.fname);
    x.age = 32;
    alert (x.age);
    I can do this:
    Code:
    myobj = function(fname, age){
     this.fname = fname;
      this.age = age;
    };
    
    
    
    var x = new myobj('joe', 32);
    alert(x.fname);
    alert (x.age);
    So what do we need prototype for?

    Any explanations will be appreciated.

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I can't profess to understand this well, but I recently found this video really enlightening on the subject of prototypes:

    http://www.objectplayground.com/

    It's the only explanation of prototypes that I've really been able to grasp.

  3. #3
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,441
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    There are a couple of important differences when you add a method to an object's prototype rather than directly to the object itself:
    • The method will be available to all objects which inherit from that prototype, even if the objects were created before you added the method to the prototype.
    • The objects will reference the method from the prototype rather than being created with their own copy, which is more efficient if you're creating a lot of the same kind of object.


    Edit: +1 to ralph.m's link too - that page is a great help to getting your head around how prototypes work in JS, I had a couple of lightbulb moments while watching the screencast.

  4. #4
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    There are a couple of important differences when you add a method to an object's prototype rather than directly to the object itself:
    • The method will be available to all objects which inherit from that prototype, even if the objects were created before you added the method to the prototype.
    • The objects will reference the method from the prototype rather than being created with their own copy, which is more efficient if you're creating a lot of the same kind of object.



    Hi

    Mind explaining this with an example?


    Thanks

  5. #5
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,441
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    No worries.

    Here's an example that illustrates the first point:
    Code JavaScript:
    var Person = function(name, age) {
        this.name = name;
        this.age  = age;
    };
     
    Person.prototype.talk = function() {
        console.log("Hi, I'm "+this.name);
    };
     
    var pete = new Person('Pete', 32);
     
    pete.talk(); // Hi, I'm Pete
     
    Person.prototype.sleep = function() {
        console.log('Goodnight! zzzzZZZZ');
    }
     
    pete.sleep(); // Goodnight! zzzzZZZZ
    You see that we can call pete.sleep() even though we only defined the method after pete had been created.


    In regards to the second point, lets say that we'd done something like this:
    Code JavaScript:
    var Person = function(name, age) {
        this.name = name;
        this.age  = age;
     
        this.talk = function() {
            console.log("Hi, I'm "+this.name);
        };
     
        this.sleep = function() {
            console.log('Goodnight! zzzzZZZZ');
        }
    };
    Because we're creating the methods in the constructor function, each time we call new Person() a new object will be created with its own copy of these methods. If we were running an app that created a large number of Person objects, we'd be using up more memory with all that unnecessarily duplicated method code.

    Edit: If you want to visualise the prototype example at objectplayground.com, you have to make a few small changes to get sensible output from it:
    Code JavaScript:
    function Person(name, age) {
        this.name = name;
        this.age  = age;
    };
     
    Person.prototype.talk = function talk() {
        console.log("Hi, I'm "+this.name);
    };
     
    this.pete = new Person('Pete', 32);
     
    Person.prototype.sleep = function sleep() {
        console.log('Goodnight! zzzzZZZZ');
    }

  6. #6
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Excellent explanation fretburner


    Cheers!!!

  7. #7
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    2 more questions

    1) Whats the difference between the following two codes?
    2) What benefit do I get when I use the prototype property?

    1)
    Code:
    function displayInfo(fname){
      this.fname;
    }
    
    displayInfo.age = 25;
    
    console.log(displayInfo.age);

    2)
    Code:
    function displayInfo(fname){
      this.fname = fname;
    }
    
    sam = new displayInfo('Sam');
    displayInfo.prototype.age = null;
    sam.age = 33;
    console.log(sam.age);

  8. #8
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,441
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by cancer10 View Post
    1) Whats the difference between the following two codes?
    Nothing really. Even though you initialise the property age on the prototype and set it to null, when you do sam.age = 33; you're actually creating an age property directly on the object sam. Visualise this code over at the objectplayground site and you'll see what I mean:
    Code JavaScript:
    function displayInfo(fname){
      this.fname = fname;
    }
     
    this.sam = new displayInfo('Sam');
    displayInfo.prototype.age = null;
    this.sam.age = 33;

    Quote Originally Posted by cancer10 View Post
    2) What benefit do I get when I use the prototype property?
    As I mentioned in my previous post methods set on the prototype are available to all objects that inherit from it, and the same goes for properties set on the prototype. Of course, if you change the value via one of your objects all the others will now access the changed value, which may or may not be useful depending on what you're trying to achieve.

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Properties don't need to be assigned via the prototype as they are not executable functions, instead you should use getter and setter functions that attach to the prototype but are more descriptive as to what you're currently doing with the person.

    Visit the following demo, press F12, jump over to the console and you will see that only functions are inherited via the prototype http://jsfiddle.net/MS4j6/.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you define properties via prototype then you provide two different ways for the object to get its value - via the prototype or via the property directly attached to the object.

    For example:

    Code:
    var obj1, obj2;
    baseObject = function(x) {
    if (typeof x !== undefined) this.prop = x;
    }
    baseObject.prototype.prop = 'default';
     
    obj1 = new baseObject();
    obj2 = new baseObject('unique');
    alert(obj1.prop); // will display 'default'
    alert(obj2.prop); // will display 'unique'
    delete obj2.prop;
    alert(obj2.prop); // will display 'default'
    The property attached directly to obj2 in the above example overrides the one attached to the prototype but if you delete the property then the prototype property then once more becomes accessible via the property name and so even though the property has been deleted it still has a value.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •