confusion while understanding prototype

V

VJ

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
 
R

RobG

VJ said:
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]'){
Click to expand...

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?
Click to expand...

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

execClsConstructor param2: added to obj instance
Click to expand...

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
Click to expand...

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
Click to expand...

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?
Click to expand...

I hope I did.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Issue with textbox script? 0
Prototype 1.6--Somebody Stop These People 6
"with" statement, extending prototype 13
Prototype Object.extend(new Base() | Hash | Hash.prototype) usage: 3
Javascript confusion.... 5
XmlHttpRequest.onreadystatechange <-> this-keyword 23
Inheritance : access to the superClass' methods via prototype 2
Function Declaration as anti-pattern? 8

Members online

No members online now.
Total: 51 (members: 0, guests: 51)
Robots: 286

Forum statistics

Threads
473,983
Messages
2,570,187
Members
46,747
Latest member
jojoBizaroo

Latest Threads

Top