Home > Javascript > Strange Prototype’s Class.create behavior

Strange Prototype’s Class.create behavior

November 1st, 2011

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;

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.

  1. Cristi
    | #1

    I respect your opinion, but it depends on how you like to do things. If you ask me, mixing frameworks, just because you are not familiar with one of them, or because you can’t find a suitable plugin, is not ok. Not because they can overlap and override some of the methods, but think about the overhead you’re adding by loading all frameworks. Yes, it makes sense to completely replace A with B, prototype with jquery for example, but I think on the long run you’ll have more to lose than gain. After all, all frameworks are built on top of the core js. Which means that if you know javascript well enough, you can learn or use any framework, plugin or snippet. And this applies to any programming language. But, once again, it doesn’t mean you’re wrong and I’m right, it’s just a different perspective on how we do things.

    Plus, I haven’t said I’m not familiar, I just said it’s not my favorite 😉 One can speak English, for example, that doesn’t mean it’s their favorite…

  2. | #2

    Just because Magento uses Prototype, it is not a necessity to use Prototype. Sometimes it is better to use the frameworks you are already familiar with.

  1. No trackbacks yet.