Why PrototypeJS class instances share same properties?

Question

I am having trouble understanding PrototypeJS multiple class instances.

Here is my code sample:

var Test = Class.create();

Test.prototype = {
  settings: {
    a: {},
    b: {},
  },
  initialize: function(options) {
    this.settings.c = options.c;
  }
};

var a = new Test({c: 1});
console.log(a.settings);

var b = new Test({c: 2});
console.log(a.settings);

var c = new Test({c: 3});
console.log(a.settings);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.2/prototype.min.js"></script>

Expected result: a.settings should contain "c" item with value "1".

Actual result: a.settings "c" equals to "3".

Screenshot from dev. tools

(Note, that you need to expand object in dev. tools to see it.)

Why? Am I missing something, or it is some kind of PrototypeJS bug? What is the correct way to create isolated class instances?

Felix Kling · Accepted Answer · 2016-02-22T19:14:08.513

Every instance shares the same this.settings object. Mutable data structures have to be initialized in the constructor, not on the prototype:

Test.prototype = {
  initialize: function(options) {
    this.settings =  {
      a: {},
      b: {},
      c: options.c;
    };
  }
};

Note that this appears to be the "legacy way" (according to the documentation) and the newer way is:

var Test = Class.create({
  initialize: function(options) {
    this.settings =  {
      a: {},
      b: {},
      c: options.c;
    };
  }
});

This issue is actually addressed in the PrototypeJS documentation:

Types of inheritance in programming languages

Generally we distinguish between class-based and prototypal inheritance, the latter being specific to JavaScript.

Prototypal inheritance, of course, is a very useful feature of the language, but is often verbose when you are actually creating your objects. This is why we emulate class-based inheritance (as in the Ruby language) through prototypal inheritance internally. This has certain implications.

[...]

We can try to do the same in Prototype:
var Logger = Class.create({
  initialize: function() { },
  log: [],
  write: function(message) {
    this.log.push(message);
  }
});

var logger = new Logger;
logger.log; // -> []
logger.write('foo');
logger.write('bar');
logger.log; // -> ['foo', 'bar']
It works. But what if we make another instance of Logger?
var logger2 = new Logger;
logger2.log; // -> ['foo', 'bar']

// ... hey, the log should have been empty!
You can see that, although you may have expected an empty array in the new instance, it has the same array as the previous logger instance. In fact, all logger objects will share the same array object because it is copied by reference, not by value.

Instead, initialize your instances with default values:
var Logger = Class.create({
  initialize: function() {
    // this is the right way to do it:
    this.log = [];
  },
  write: function(message) {
    this.log.push(message);
  }
});

Why PrototypeJS class instances share same properties?

1 Answers1

Types of inheritance in programming languages