Advantage of using prototype objects over regular functions?

Discussion in 'Javascript' started by Yansky, Feb 2, 2008.

  1. Yansky

    Yansky Guest

    I'm just starting to learn about the prototype object in javascript
    and I was wondering if someone could explain just in laymans terms why
    you would use it instead of a regular functions? It seems like it does
    the same thing as regular functions except in a more complicated way.
     
    Yansky, Feb 2, 2008
    #1
    1. Advertising

  2. Yansky <> writes:

    > I'm just starting to learn about the prototype object in javascript
    > and I was wondering if someone could explain just in laymans terms why
    > you would use it instead of a regular functions? It seems like it does
    > the same thing as regular functions except in a more complicated way.


    Are you asking about the advantages and disadvantages of object-oriented
    constructs w/ method calls vs function calls, or about the use of
    prototypes vs putting all properties including methods in the same
    object?

    Objects provide their own mechanism for property lookup. This means that
    different objects can provide methods and properties with the same name
    to do different things. In other words, they provide a straight forward
    way of doing polymorphism:

    myCollectionOfObjects.forEach(function(o) {
    o.quack(); // what quack() does is determined by o itself
    });

    Functions are useful for actions that aren't intimately tied to a single
    object and they're easier to use in higher-order constructs - getting
    the above construct to work using "pure oo" only would get seriously
    ugly very soon, see classic Java's sortable collections for instance.

    As for using prototypes vs direct object properties; prototypes can be
    shared so they're more efficient if you otherwise need to copy /
    initialize a lot of properties. Also, they make it easy to extend
    existing "classes of" objects:

    this code from the mozilla developer site:

    if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(fun, /* thisp */) {
    var len = this.length;
    if (typeof fun != "function")
    throw new TypeError();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++) {
    if (i in this)
    fun.call(thisp, this, i, this);
    }
    };
    }

    Joost.
     
    Joost Diepenmaat, Feb 2, 2008
    #2
    1. Advertising

  3. Yansky

    Steve Swift Guest

    Yansky wrote:
    > I'm just starting to learn about the prototype object in javascript
    > and I was wondering if someone could explain just in laymans terms why
    > you would use it instead of a regular functions? It seems like it does
    > the same thing as regular functions except in a more complicated way.


    The general idea (it seems to me) behind these JavaScript libraries is
    that you only have to learn how to do things once. If you try to do
    things in native JavaScript you end up learning how to do it in Internet
    Explorer, then Firefox, then Opera, then Sarfari, then …

    --
    Steve Swift
    http://www.swiftys.org.uk/swifty.html
    http://www.ringers.org.uk
     
    Steve Swift, Feb 2, 2008
    #3
  4. Steve Swift <> writes:

    > Yansky wrote:
    >> I'm just starting to learn about the prototype object in javascript
    >> and I was wondering if someone could explain just in laymans terms why
    >> you would use it instead of a regular functions? It seems like it does
    >> the same thing as regular functions except in a more complicated way.

    >
    > The general idea (it seems to me) behind these JavaScript libraries is
    > that you only have to learn how to do things once. If you try to do
    > things in native JavaScript you end up learning how to do it in
    > Internet Explorer, then Firefox, then Opera, then Sarfari, then …


    I don't think the poster was talking about the Prototype.js library.

    Then again, I could be wrong.

    Joost.
     
    Joost Diepenmaat, Feb 2, 2008
    #4
  5. Yansky wrote:
    > I'm just starting to learn about the prototype object in javascript
    > and I was wondering if someone could explain just in laymans terms why
    > you would use it instead of a regular functions?


    It only seems as if there are regular functions. Globally declared
    functions are in fact methods (callable properties) of the Global Object.
    Locally declared functions are methods of the local Variable Object (that
    can not be referred to).

    > It seems like it does the same thing as regular functions except in a more
    > complicated way.


    Read on object-oriented programming to see the advantages of a reusable
    encapsulation structure.

    As for laymen terms, you can bite in every apple. Let bite() be a method of
    people (with the target of biting as argument), or of apples (maybe with the
    biting person or the size/form of the bit as argument).


    HTH

    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Feb 2, 2008
    #5
  6. Thomas 'PointedEars' Lahn <> writes:

    > Yansky wrote:
    >> I'm just starting to learn about the prototype object in javascript
    >> and I was wondering if someone could explain just in laymans terms why
    >> you would use it instead of a regular functions?

    >
    > It only seems as if there are regular functions. Globally declared
    > functions are in fact methods (callable properties) of the Global Object.
    > Locally declared functions are methods of the local Variable Object (that
    > can not be referred to).


    I prefer to state it more or less the the other way around; all
    functions can be called as methods and as functions. A method call sets
    the this object to something useful, a function call sets the this
    object to null. he caller determines which of the two is used.

    Poperty-lookup (if used) is responsible for the inheritance mechanism
    which is independent of the actual calling. *

    I find this a useful and practical view as a programmer. I'm not
    claiming that this is exactly what happens in any implementation.

    * obj.prop(arg) is just syntactic sugar for obj.prop.call(obj,arg) (and
    yes, that's a circular definition, but JS is full of those edge cases).

    Joost.
     
    Joost Diepenmaat, Feb 2, 2008
    #6
  7. Joost Diepenmaat wrote:
    > Thomas 'PointedEars' Lahn <> writes:
    >> Yansky wrote:
    >>> I'm just starting to learn about the prototype object in javascript
    >>> and I was wondering if someone could explain just in laymans terms why
    >>> you would use it instead of a regular functions?

    >> It only seems as if there are regular functions. Globally declared
    >> functions are in fact methods (callable properties) of the Global Object.
    >> Locally declared functions are methods of the local Variable Object (that
    >> can not be referred to).

    >
    > I prefer to state it more or less the the other way around; all
    > functions can be called as methods and as functions. A method call sets
    > the this object to something useful, a function call sets the this
    > object to null. he caller determines which of the two is used.


    Nonsense. As every function is a method and `null' has no properties, the
    `this' value is never `null'.


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Feb 2, 2008
    #7
  8. Thomas 'PointedEars' Lahn <> writes:

    > Joost Diepenmaat wrote:
    >> Thomas 'PointedEars' Lahn <> writes:
    >>> Yansky wrote:
    >>>> I'm just starting to learn about the prototype object in javascript
    >>>> and I was wondering if someone could explain just in laymans terms why
    >>>> you would use it instead of a regular functions?
    >>> It only seems as if there are regular functions. Globally declared
    >>> functions are in fact methods (callable properties) of the Global Object.
    >>> Locally declared functions are methods of the local Variable Object (that
    >>> can not be referred to).

    >>
    >> I prefer to state it more or less the the other way around; all
    >> functions can be called as methods and as functions. A method call sets
    >> the this object to something useful, a function call sets the this
    >> object to null. he caller determines which of the two is used.

    >
    > Nonsense. As every function is a method and `null' has no properties, the
    > `this' value is never `null'.


    Oops, I forgot about the rule that said that if this is null or some
    other non-object, it becomes the global object.

    joost.
     
    Joost Diepenmaat, Feb 3, 2008
    #8
  9. Yansky

    VK Guest

    On Feb 3, 6:16 pm, Joost Diepenmaat <> wrote:
    > Oops, I forgot about the rule that said that if this is null or some
    > other non-object, it becomes the global object.


    Still not exactly right. null as argument is used in call() and
    apply() methods to enforce the global context for callee. This way
    "this" is never null, but null argument is used in some methods to get
    a particular "this" state.
     
    VK, Feb 3, 2008
    #9
  10. VK wrote:
    > On Feb 3, 6:16 pm, Joost Diepenmaat <> wrote:
    >> Oops, I forgot about the rule that said that if this is null or some
    >> other non-object, it becomes the global object.

    >
    > Still not exactly right. null as argument is used in call() and
    > apply() methods to enforce the global context for callee. This way
    > "this" is never null, but null argument is used in some methods to get
    > a particular "this" state.


    Unlike Joost, you have not understood ECMAScript Ed. 3, section 10.2.3,
    among several other sections and aspects of the programming language.


    PointedEars
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
     
    Thomas 'PointedEars' Lahn, Feb 3, 2008
    #10
  11. Yansky

    uncle_billy Guest

    On Feb 2, 2:45 am, Yansky <> wrote:
    > I'm just starting to learn about the prototype object in javascript
    > and I was wondering if someone could explain just in laymans terms why
    > you would use it instead of a regular functions? It seems like it does
    > the same thing as regular functions except in a more complicated way.


    I think what the orginal poster was trying to ask is something like
    this: what are the advantages to using one or the other of these?


    var Car = function() {
    this.wheels = 4;
    this.moveForward = function() {
    ...
    }
    }

    var Car = function() {
    this.wheels = 4;
    }
    Car.prototype.moveForward = function() {
    ...
    }
     
    uncle_billy, Feb 12, 2008
    #11
  12. uncle_billy wrote:
    > On Feb 2, 2:45 am, Yansky <> wrote:
    >> I'm just starting to learn about the prototype object in javascript
    >> and I was wondering if someone could explain just in laymans terms why
    >> you would use it instead of a regular functions? It seems like it does
    >> the same thing as regular functions except in a more complicated way.

    >
    > I think what the orginal poster was trying to ask is something like
    > this: what are the advantages to using one or the other of these?
    >
    > var Car = function() {
    > this.wheels = 4;
    > this.moveForward = function() {
    > ...
    > }
    > }
    >
    > var Car = function() {
    > this.wheels = 4;
    > }
    > Car.prototype.moveForward = function() {
    > ...
    > }


    Not quite. If we would assume as you do that every car had four wheels in
    the beginning, it would probably be prudent to define that as an inherited
    prototype property. And one would not use function *expressions* where not
    necessary, of course.

    function Car()
    {
    }

    Car.prototype = {
    constructor: Car,
    wheels: 4,

    moveForward: function()
    {
    ...
    }
    };

    And if that would have been the question, the answer would have been obvious:

    You would gain at least some memory efficiency for losing at least some
    runtime efficiency, because you would only need one Function object for all
    Car objects but it would have to be looked up through the prototype chain on
    each property access.


    PointedEars
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
     
    Thomas 'PointedEars' Lahn, Feb 12, 2008
    #12
  13. Thomas 'PointedEars' Lahn <> writes:

    > You would gain at least some memory efficiency for losing at least some
    > runtime efficiency, because you would only need one Function object for all
    > Car objects but it would have to be looked up through the prototype chain on
    > each property access.


    True. But note that the runtime property-lookup penalty will be offset
    by having more efficient object creators. In other words, creating a lot
    of objects with a lot of "interited" properties will be faster, and if
    you only access a subset of all properties of all objects the total run
    time /may/ be faster with prototype inheritance than without.

    --
    Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
     
    Joost Diepenmaat, Feb 12, 2008
    #13
  14. Joost Diepenmaat wrote:
    > Thomas 'PointedEars' Lahn <> writes:
    >> You would gain at least some memory efficiency for losing at least some
    >> runtime efficiency, because you would only need one Function object for all
    >> Car objects but it would have to be looked up through the prototype chain on
    >> each property access.

    >
    > True. But note that the runtime property-lookup penalty will be offset
    > by having more efficient object creators. In other words, creating a lot
    > of objects with a lot of "interited" properties will be faster, and if
    > you only access a subset of all properties of all objects the total run
    > time /may/ be faster with prototype inheritance than without.


    But it is unlikely. Usually the object is created once, but the prototype
    method is probably called more than once on the same object.

    However, in order not to be misunderstood, I recommend using prototype
    methods unless a closure in the constructor increases efficiency when
    calling the method. Because ISTM processing time is a lot cheaper than
    memory nowadays.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Feb 12, 2008
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    2,287
    Robert Maas, see http://tinyurl.com/uh3t
    Jun 11, 2005
  2. kai
    Replies:
    2
    Views:
    341
  3. deepu
    Replies:
    37
    Views:
    1,581
    CBFalconer
    Feb 24, 2006
  4. deathweaselx86
    Replies:
    5
    Views:
    1,145
    Raymond Hettinger
    Jun 25, 2011
  5. Thirsty Traveler

    Is there any advantage to using a webservice over a post

    Thirsty Traveler, Jun 19, 2006, in forum: ASP .Net Web Services
    Replies:
    1
    Views:
    146
    Josh Twist
    Jun 20, 2006
Loading...

Share This Page