New instance of an object acting as a reference?

Question

I had a problem creating new instances of the object.

Using the code below, I expected each element to have its own random value (what happens).

But then I also expected that the value of this.element would be contained in every instance of the object, but instead, every time the value changes in any instance of the object, it is updated in all of them.

 var Instance = function(element) { this.$element = $(element); this.subInstance.parent = this; } Instance.prototype = { subInstance: { parent: null, $element: null, init: function() { var $this = this; this.$element = this.parent.$element; //test for what this.$element refers to in init function var random = Math.random(); $('.element', this.$element).text('Updated ' + random); //test for what this.$element refers to in an event handler $('.element', this.$element).on('click', function(e) { $this.$element.css('background-color', '#f00'); }); } } } $('div.instance').each(function(i, o) { var instance = new Instance(o); instance.subInstance.init(); });​ 

Now I know that I can move subInstance from the prototype and into the constructor using this.subInstance = {... , but this seems wrong, why is this.$element not contained in every instance of the object?

JS A note of both examples: http://jsfiddle.net/q7zAg/

Answer 1

This may seem wrong, but it is not. If each object created from the constructor must work with a unique subInstance , you will need to create a new one for each individual instance. On prototype it will be generic.

However, one thing you could do is use Object.create to create a new instance that inherits from the prototyped subInstance . Then you take advantage of reuse, and each instance can modify its own object.

 var Instance = function(element) { this.$element = $(element); this.subInstance = Object.create(this.subInstance); this.subInstance.parent = this; } 

Now, some might argue that subInstance should still not be on prototype , but rather there should be a local variable in IIFE. I would agree with that.

Here is an example:

 var Instance = (function() { var _subInstance = { parent: null, $element: null, init: function() { // ... } }; var Instance = function(element) { this.$element = $(element); this.subInstance = Object.create(_subInstance); this.subInstance.parent = this; }; // other prototyped props Instance.prototype.foo = "bar"; return Instance; })(); 

Answer 2

Note that the this function is defined as the function is called, and not how it is declared or initialized (other than using bind).

In your code, you have:

 > Instance.prototype = { > subInstance: { 

which assigns an Instance.prototype object, which has a subInstance property, which is an object.

Then there is:

 > init: function() { > var $this = this; > this.$element = this.parent.$element; 

This method is called:

 > instance.subInstance.init(); 

So, this inside the init method always refers to the same object (i.e. Instance.prototype.subInstance ), therefore the assignments of this.$element continue to replace the value.

Answer 3

 var Obj = { internal:null, __init:function(data){ this.internal = data; return this }, get:function(){ return this.internal; }, init:function(){ var args = arguments,instance = function(){ return this.__init.apply(this,args); }; instance.prototype = this; return new instance(); } } console.log(Obj.init(123).get()); console.log(Obj.get()); console.log(Obj.init(321).get()); console.log(Obj.get());