www.webdeveloper.com
Results 1 to 14 of 14

Thread: Using object.prototype vs declaring functions in a constructor

  1. #1
    Join Date
    Jun 2012
    Posts
    9

    Question Using object.prototype vs declaring functions in a constructor

    I've recently begin delving much more into JavaScript and have realized that what I thought I knew before was not very much. That being said, I've programmed some Java so naturally when I came to JavaScript I wanted to understand how to create objects.

    As I dug, I came across two different ways to declare methods and fields for all objects. One of them is to declare them in the constructor:
    code:

    function ExampleObject() {
    this.aField = "";
    this.method = function(param) {
    alert(param);
    }
    }



    Another, that I *think* accomplishes the same thing, is to use prototype:
    code:

    function ExampleObject() {}
    //this would have to be defined outside of the constructor, in this case
    ExampleObject.prototype.aField = "";
    ExampleObject.prototype.method = function(param) {
    alert(param);
    }



    Now, please bear with me as a launch an onslaught of questions, as I've only been nursing my understanding for a couple days now:
    1) Do these two code snippets accomplish the same thing? If not, what is the difference and why does it occur? If so, is one way better, faster, or more universally accepted?
    2) Does using prototype retain the reference of the this keyword? In other words, if I referred to "this.aField" in the prototype method declaration, would JavaScript know to refer to an ExampleObject's "aField" field?

    ...and I think I'll stop there...

  2. #2
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by snowguy13 View Post
    1) Do these two code snippets accomplish the same thing? If not, what is the difference and why does it occur? If so, is one way better, faster, or more universally accepted?
    On the surface, they will both accomplish the same thing. The difference is that when you declare methods in the constructor, then a new copy of each method/function is created for every new instance. Attaching the method to the prototype, on the other hand, creates just one copy of the method/function that is shared across all instances. Using the prototype is better and more universally accepted, though your application would have to grow quite large before you notice any difference.


    Quote Originally Posted by snowguy13 View Post
    2) Does using prototype retain the reference of the this keyword? In other words, if I referred to "this.aField" in the prototype method declaration, would JavaScript know to refer to an ExampleObject's "aField" field?
    Yup.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  3. #3
    Join Date
    Jun 2012
    Posts
    9
    Okay, thank you!

  4. #4
    Join Date
    Jun 2012
    Posts
    9

    object.prototype with fields

    I've got a follow up question:

    I can see how defining methods in a constructor can take extra time, as each function must be created for every instantiation. However, what about fields? Should I define fields using the prototype, or is the constructor okay?

  5. #5
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    If each instance should have its own copy of some field, which is the case most of the time, then you should declare it in the constructor. Fields set in the prototype will be shared across all instances.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  6. #6
    Join Date
    Jun 2012
    Posts
    9

    Prototypes are Cool

    OOOOOOOOOOOOOOOOO ... *five hours later* ... OOOOOOOHHHHHH!

    Finally, I think I'm beginning to understand the prototype. I wish it didn't take explanations from five different sites. xD

    Thank you very much.

    To check my understanding:

    code:

    function Object() {}
    Object.prototype.field = "hi";

    var o1 = new Object();
    alert(o1.field); //alerts "hi"
    var o2 = new Object();
    o2.field = "bye";
    alert(o1.field); //this would be "bye", right?
    //Or would it still be "hi", since setting a value to o2.field hides the prototypical field
    //and creates a field unique to o2?


  7. #7
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by snowguy13 View Post
    //Or would it still be "hi", since setting a value to o2.field hides the prototypical field
    //and creates a field unique to o2?
    That one.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  8. #8
    Join Date
    Jun 2012
    Posts
    9
    Okay. I think I'm starting to like JavaScript, even though it makes every bone in my Java-programming body ache... :P

    Thank you very much!

  9. #9
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    maybe it's just me but I like to keep my objects out of global scope

    Code:
    var Person = function () {
        this.firstname = "Ninja";
        this.surname = "Turtle";
    	this.offspring;
    };
    
    Person.prototype = {
        multiply: function () {
            this.offspring = this.firstname + ' Jr.' + this.surname;
        },
        findFemale: function (femaleName) {
            this.multiply();
    		return this.offspring;
        }
    };
    Code:
    var x = new Person;
    x.findFemale();

  10. #10
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by Jeff Mott View Post
    On the surface, they will both accomplish the same thing. The difference is that when you declare methods in the constructor, then a new copy of each method/function is created for every new instance. Attaching the method to the prototype, on the other hand, creates just one copy of the method/function that is shared across all instances. Using the prototype is better and more universally accepted, though your application would have to grow quite large before you notice any difference.
    I tend to disagree. It depends firstly on your object instantiation to object usage ratio. That is, it's a question of where you want to take your performance hit: The prototypal pattern places the hit at method-call time, whereas the "build-it-on-the-fly" approach places the hit at instantiation time.

    If performance isn't an issue for your application, the "better" one is simply whichever looks better, is easier to read, and therefore maintain. In my opinion, that's not the prototypal route.

  11. #11
    Join Date
    Jun 2012
    Posts
    9
    Quote Originally Posted by maurycy View Post
    maybe it's just me but I like to keep my objects out of global scope
    But wait... If the point of a certain function is to act as a constructor for an object, why would you want to limit the scope of that constructor?

  12. #12
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    I mean keep it away from users access, nothing should be defined in global scope

  13. #13
    Join Date
    Jun 2012
    Posts
    9
    Quote Originally Posted by maurycy View Post
    I mean keep it away from users access, nothing should be defined in global scope
    So, say, coding
    code:

    var Object = function() {
    this.name = "an object";
    }



    vs.

    code:

    function Object() {
    this.name = "an object";
    }



    would limit the scope of the object Object?

  14. #14
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    It's not limiting that object it's limiting access to it from 3rd party (user parasites)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles