Strange Prototype’s Class.create behavior

A few more months and it would’ve been a year since the last post. Worry not, this blog hasn’t died – and just to make sure I don’t forget what I want to write, I’ve already prepare a few articles. So stay tuned!

But enough with the intro and let’s see what this article is about: Prototype (http://www.prototypejs.org/), not really my favorite javascript framework, but since Magento relies on it, I need to be able to use it and write proper code (I don’t believe in mixing frameworks either).

The scenario is rather simple – create a “class” called Stuff and then instantiate two objects of that class.

var Stuff = Class.create({
	data: {},
	x: null,
	y: [],
	
	initialize: function() {}
});

var a = new Stuff();
var b = new Stuff();

So far so good, because the code does nothing, but let’s add the following:

a.data.x = 1;
a.x = 5;
a.y.push(3);

What would you expect b to contain? From my (lack of) knowledge, I would say b.data is an empty object, b.x is null and b.y is an empty list/array. At least that’s how it goes in other programming languages, such as PHP. Well, this doesn’t happen here. If you do console.log(b) you’ll get:

data	Object { x=1}
x	null
y	[3]

In other words, object and array attributes have the same reference, or point to the same object. I would’ve said that the variables a and b are pointing to the same object, if a.x was the same as b.x, but b.x is still null, while a.x is 5.

Bug, feature or normal behavior, this can still be very annoying – I spent about an hour trying to figure out why two objects of the same “class” had the same settings when they were clearly configured differently. Hope this comes in handy at some point.

Tested on prototype v1.6.0.3 & v1.6.1.