Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Difference between this property and prototype property?

    Can someone tell me the difference between having a property declared on the function level or the prototype level? They both seem to work the same to me...

    If I create two Persons (see below) and change the firstName on one of them, it updates only that instance of the person (as expected), and not the other, no matter the implementation (this or prototype), so why choose one or the other? Or does it matter?

    Example:
    Code:
    var Person = function() {
          this.firstName = "bob";
    }
    or

    Code:
    var Person = function(){};
    Person.prototype.firstName = "bob";
    Run either implementation returns the same result.
    Code:
    function Test() {
          var p1 = new Person();
          var p2 = new Person();
          p1.firstName = "jane";
          alert(p1.firstName); //bob
          alert(p2.firstName); //jane;
    }

    Thanks for the help!
    Last edited by LiveFree; 08-26-2012 at 11:59 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,078
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    The two codes are functionally the same.

    As we often say here, there are several different ways of killing a cat. In many instances there is no discernable advantage of using one over another.

    Quizmaster: What is the only prime number between 60 and 65?
    Contestant: 50.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My understanding is that prototype reduces memory by not cloning methods to classes implementing that prototype.

    How does that work with properties like in this example? Does it copy non-functions to the instance object? It seems like it does, but I'm kind of a newbie so I'm unsure...

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    When you define a property directly on the object the prototype property becomes inaccessible (unless you specifically reference it via the prototype).

    If you don't define the property directly (or delete the direct property) then the prototype property with the same name will be accessed instead.

    Code:
    var Person = function(){};
    Person.prototype.firstName = "bob";
    function Test() {
          var p1 = new Person();
          var p2 = new Person();
          p2.firstName = "jane";
          alert(p1.firstName); //bob - reference to prototype
          alert(p2.firstName); //jane - direct reference
          delete p2.firstName;
          alert(p2.firstName); //bob - reference to prototype
    }
    The prototype property occurs once regardless of how many objects use it. The individual objects can either have their own copy defined or use the prototype one.
    Last edited by felgall; 08-27-2012 at 03:13 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I think it should be

    p2.firstName = "jane";

    for the above example.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, thank you for the help

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by LiveFree View Post
    My understanding is that prototype reduces memory by not cloning methods to classes implementing that prototype.

    How does that work with properties like in this example? Does it copy non-functions to the instance object? It seems like it does, but I'm kind of a newbie so I'm unsure...
    i like to think of prototypes as globals and this as a local.
    prototype.x is the exact same object for all, this.x is specific to the function executing the code.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by rnd me View Post
    prototype.x is the exact same object for all, this.x is specific to the function executing the code.
    Don't you mean the instance of the object executing the code?

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    If we were using a class-oriented language, you would say that the prototype properties are static properties. But then class-oriented languages don't let you add properties to individual objects, so the analogy quickly breaks down.

    It's kind of funny, back in 1995 when I was helping build a combination C++/Java development system/compiler (yeah, I know...Java *compiler*?), the compiler guru that was guiding the thing had the idea of adding the ability to Java (and C++!) to dynamically add properties to objects (not classes). We ended up deciding that we could add it later, but then the product died. Too bad. If we'd pulled it off then we'd have had a language that was both class-oriented and object-oriented. (The sad part is it wouldn't have really been all that hard to do. The base Object class would have had methods addProperty and addMethod, very similar to, say, the DOM's setAttribute concept.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    Quote Originally Posted by Logic Ali View Post
    Don't you mean the instance of the object executing the code?
    But functions are objects in JavaScript.

    [I just had to throw that in. Purely tongue in cheek.]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by rnd me View Post
    prototype.x is the exact same object for all, this.x is specific to the function executing the code.
    Quote Originally Posted by Logic Ali View Post
    Don't you mean the instance of the object executing the code?
    no. well, if you are directly invoking a function as a method of an object created using "new ", then this will equal the object instance, as you note. that's true, but i was alluding to more.

    this is defined by the function's activation context, which means .call(), .apply(), .bind(), and even [1,2,3].map( fn , thisObject ) can all set what this means.


    you can use this to make lightweight prototype-less 'instances' by applying a Constructor instead of using new:

    Code:
    function Person() {
          this.firstName = "bob";
    }
    
    Person.prototype.age=123;
    
    var o={};
    Person.call(o);
    
    
    alert([o.firstName, o.age ]); //shows: "bob," (no age)
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    Oogle. You do like to explore the edges, don't you. But, yes, that all makes perfect sense. Thanks.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    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
    •