[RESOLVED] Strange JavaScript - Can somebody explain this?

dougal85

I just spent about 4 hours debugging a problem in javascript and finally figured out what it was. I've set up an example, since no point posting thousands of lines.

var myclass = Class.create();

myclass.prototype = {
	myarray: new Array(),

initialize: function(array){
	alert("Class started");
	for(x=0;x<array.length;x++){
		this.addItem(array[x]);
	}
},

addItem: function(item){
	this.myarray.push(item);
},

toString: function(){
	alert(this.myarray.length);
}

}

var test1 = new myclass(new Array("item1", "item2"));
test1.toString();

var test2 = new myclass(new Array("item4", "item4"));
test2.toString();

I had expected two alert boxes both outputting "2"

However, in actual fact the first outputs "2" and the second outputs "4"

I get the feeling i'm misusing the 'this' operator in javascript. can anybody explain it?

it can be fixed by putting the following code in the initialisation method;

this.myarray = new Array();

Thanks

Dougal

severeheadache

This is the difference between a prototype language and an OO language. A prototype serves as a "master" copy of the object. Then when you think you are instancing the object, you are not you are getting a link to the prototype. Well, in the first case you are adding two elements to the "master" and when you get what you expect is another "copy" of the object, you are in fact getting a reference to the master again. So you have 2 "links" to the same master. When you modify 1 object, it is modifying the underlaying "master" and thus affecting the other object.

JS does not have the ability to copy an object.

Let me make the news even better for you. If you re-initalize the myArray property and then set item4 and item4 in them, the original object will also be modified, so now test1 has item4 and item4 in it's myArray too. Isnt prototype wonderful?

I am probably not explaining it well. Do yourself a favor and watch these videos, you will be amazed at the greatness and shortcomings of JS:

This is the first of 4, watch them all, it becomes so clear:
http://video.yahoo.com/video/play?vid=111593

Hope this helps,

Mike

dougal85

Cool, thanks. I'm watching them now.

I've seen Douglas Crockford in a couple of other Yahoo video's, not the best speaker I've heard but he is always very informative and he seems to know loads!

I think this could be the answer to another problem I've been having too.

Have you used the script.aculo.us library?

severeheadache

Yes, I have used script.aculo.us. I have a love hate relationship with it. I was able to do some really cool stuff with drag and drop and animated divs, and what not, but when I really really started pushing it, it started to fall down.

Here was the scenario, I was building an ad-hoc reporting system where the user could select their tables and drag fields between the tables to establish the "join" conditions (kinda like access or navicat if you have played with their query builder). Then the user could drag fields from an available list and establish group bys and order bys. Well, I could do the drag and drop an it would populate nice little divs, but then if the list started to scroll, that is where things got really screwy.

What I found was there are a number of memory leaks in their program. Esp. where they attach a dom element to a JS prototype. If you dont clean these up properly, JS keep them around forever. You essentially have to "detach" the dom before you "unset" the JS object. Most people dont do that and bam, memory leak. Crockford talks about it in his video.

So I moved on to another framework, I have been using dojo. While it does not have all the wizbang stuff, it works and works well. It too is based on prototype so you get all the syntactical goodness of prototype with that library as well.

If you want to pay for a library, blueshoes is really nice and powerfull and really well tested. It has been around the longest, so it has most of the kinks worked out.

Hope this helps, good luck in your endeavours,

Mike

dougal85

Cool, thanks. That does help. It sounds like I am trying to recreate a similar with with script.aculo.us as you did!

If you get a chance could you look at this thread : http://www.phpbuilder.com/board/showthread.php?t=10338262

It would be greatly appreciated. I'm going through the videos and trying to work it out. So i might get there, but any pointers would be great. It's been annoying me for too long.