Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > confusion while understanding prototype

Reply
Thread Tools

confusion while understanding prototype

 
 
VJ
Guest
Posts: n/a
 
      10-04-2007
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

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      10-04-2007
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
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-04-2007
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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Prototype WTP 0.2 released,this release for Prototype 1.6.0 javascript fish Javascript 0 10-11-2008 07:35 AM
Class prototype vs C function prototype June Lee C++ 2 04-13-2008 08:17 PM
Prototype Object.extend(new Base() | Hash | Hash.prototype) usage: jacobstr@gmail.com Javascript 3 03-27-2007 07:56 AM
Accelerated C++ - Chapter 1, confusion in understanding "flushing the buffer" arnuld C++ 5 03-18-2007 11:14 AM
relation between prototype and Prototype.js shypen42@yahoo.fr Javascript 9 05-26-2006 01:13 AM



Advertisments