confusion while understanding prototype

Discussion in 'Javascript' started by VJ, Oct 4, 2007.

  1. VJ

    VJ Guest

    I tried to write sample code to get understanding of javascript's
    prototypal inheritance (along with the variety of function calling
    choices.. )

    During the process, I got myself throughly confused.

    Can anyone explain following behavior [NOTE: Needs firefox+firebug.
    otherwise replace all console.* to alert or equivalent]

    here is my code:
    <html>
    <head>
    <script type="text/javascript">

    function MyClass(){
    if(String(this) == '[object Window]'){
    console.debug('Are you sure to use this object in global scope?? Or
    you just missed using \'new\' keyword?');
    }
    this.method = function(){
    console.info('in MyClass.method');
    }
    this.param1='param1';
    }

    function caller(){
    var execClsDirectly = MyClass();
    var execClsConstructor = new MyClass();

    // execClsDirectly would be null since MyClass does not have any
    return statement
    if (execClsDirectly) execClsDirectly.param2='added global fn call';

    execClsConstructor.param2='added to obj instance';

    var clsRef = MyClass;
    clsRef.param2='added to class definition';

    MyClass.prototype.param2='added to class';

    console.log('execClsConstructor param2: '+execClsConstructor.param2);
    console.log('outer param2: '+MyClass.param2);

    var updatedClsConstructor = new MyClass();
    console.log('updatedClsConstructor param2:
    '+updatedClsConstructor.param2);

    }
    </script>
    </head>
    <body onload="caller();">
    </body>
    </html>

    the output:
    Are you sure to use this object in global scope?? Or you just missed
    using 'new' keyword?
    execClsConstructor param2: added to obj instance
    outer param2: added to class definition
    updatedClsConstructor param2: added to class


    I of course understand the first line of output, but.. confused as to
    same param2 added into MyClass gets added into three different levels.

    Can anyone elaborate this?
    Hope I was able to articulate my confusion in words...

    Regards,
    VJ
     
    VJ, Oct 4, 2007
    #1
    1. Advertising

  2. VJ

    RobG Guest

    VJ wrote:
    > I tried to write sample code to get understanding of javascript's
    > prototypal inheritance (along with the variety of function calling
    > choices.. )
    >
    > During the process, I got myself throughly confused.
    >
    > Can anyone explain following behavior [NOTE: Needs firefox+firebug.
    > otherwise replace all console.* to alert or equivalent]
    >
    > here is my code:
    > <html>
    > <head>
    > <script type="text/javascript">
    >
    > function MyClass(){
    > if(String(this) == '[object Window]'){


    I think a safer test here would be:

    if (this == window) {


    > console.debug('Are you sure to use this object in global scope?? Or
    > you just missed using \'new\' keyword?');
    > }
    > this.method = function(){
    > console.info('in MyClass.method');
    > }
    > this.param1='param1';
    > }
    >
    > function caller(){
    > var execClsDirectly = MyClass();


    A.

    > var execClsConstructor = new MyClass();
    >
    > // execClsDirectly would be null since MyClass does not have any
    > return statement
    > if (execClsDirectly) execClsDirectly.param2='added global fn call';
    >
    > execClsConstructor.param2='added to obj instance';


    B.

    >
    > var clsRef = MyClass;
    > clsRef.param2='added to class definition';


    C.

    >
    > MyClass.prototype.param2='added to class';


    D.

    >
    > console.log('execClsConstructor param2: '+execClsConstructor.param2);
    > console.log('outer param2: '+MyClass.param2);
    >
    > var updatedClsConstructor = new MyClass();
    > console.log('updatedClsConstructor param2:
    > '+updatedClsConstructor.param2);
    >
    > }
    > </script>
    > </head>
    > <body onload="caller();">
    > </body>
    > </html>
    >
    > the output:
    > Are you sure to use this object in global scope?? Or you just missed
    > using 'new' keyword?


    You understand why this does what it does - good. See A.


    > execClsConstructor param2: added to obj instance


    Because you added a property called param2 to the execClsConstructor
    object and assigned it a value of 'added to obj instance'. See B.


    > outer param2: added to class definition


    Because you created a variable clsRef and assigned a value that is a
    reference to the MyClass function object. You then added a param2
    property and assigned it a value of 'added to class definition'. See C.

    You may as well have written:

    MyClass.param2 = 'added to class definition';

    There are no classes in javascript 1.5 (ECMAScript Language Ed. 3).
    MyClass is a function object, it is not a 'class'. *Any* function
    object called with the new operator acts like a constructor.

    When a function is called with the new operator:

    - a new object is created
    - the function's this keyword is assigned a reference to the new object
    - the new object's prototype property is assigned a reference to the
    constructor's prototype object
    - the new object is returned at the completion of the function unless
    you return some other object or value.

    Other stuff happens too, but the above is the important bit for now.

    Note that the constructor itself is not on the inheritance chain, the
    new object gets the properties explicitly assigned, e.g.:

    this.param1 = 'param1';

    plus whatever is on the prototype chain is available as if it were on
    the object itself (more or less).


    > updatedClsConstructor param2: added to class


    Because you added a param2 property to MyClass.prototype, which is on
    the protoype chain for objects created using MyClass as a constructor.
    See D.

    For example:

    function Foo(){
    this.param1 = 'param1';
    }

    var f0 = new Foo();
    alert(f0.param1); // shows param1

    Foo.prototype.param2 = 'param2';
    alert(f0.param2); // shows param2


    That's how *prototype* based inheritance works - via the prototype
    chain. :)


    > I of course understand the first line of output, but.. confused as to
    > same param2 added into MyClass gets added into three different levels.
    >
    > Can anyone elaborate this?


    I hope I did.



    --
    Rob
    "We shall not cease from exploration, and the end of all our
    exploring will be to arrive where we started and know the
    place for the first time." -- T. S. Eliot
     
    RobG, Oct 4, 2007
    #2
    1. Advertising

  3. RobG wrote:
    > VJ wrote:
    >> <script type="text/javascript">


    var _global = this;

    >> function MyClass(){
    >> if(String(this) == '[object Window]'){

    >
    > I think a safer test here would be:
    >
    > if (this == window) {


    And

    if (this == _global) {

    would be safest.

    >> console.debug('Are you sure to use this object in global scope?? Or
    >> you just missed using \'new\' keyword?');
    >> }
    >> [...]



    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, Oct 4, 2007
    #3
    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. arnuld
    Replies:
    5
    Views:
    799
    =?ISO-8859-1?Q?Erik_Wikstr=F6m?=
    Mar 18, 2007
  2. June Lee
    Replies:
    2
    Views:
    808
    Jim Cobban
    Apr 13, 2008
  3. Replies:
    9
    Views:
    197
    Thomas 'PointedEars' Lahn
    May 26, 2006
  4. Replies:
    3
    Views:
    271
  5. javascript fish
    Replies:
    0
    Views:
    175
    javascript fish
    Oct 11, 2008
Loading...

Share This Page