Returning a reference in JavaScript

Question

Here is the code:

I am trying to get collection.prototype.add to return a reference such that the final alert will display testing, testing, 123, testing. Is there a way to accomplish what I'm trying to do here?

HTML:

<span id="spantest">testing, testing, 123, testing</span>

JavaScript:

var collection = function () {
   this.items = {};   
}

collection.prototype.add = function(sElmtId) {
    this.items[sElmtId] = {};
   return this.items[sElmtId];
}

collection.prototype.bind = function() { 
    for (var sElmtId in this.items) {
        this.items[sElmtId] = document.getElementById(sElmtId);
    }
}
var col = new collection();
var obj = {};
obj = col.add('spantest');
col.bind();
alert(obj.innerHTML);

I want obj to be a reference to this.items[sElmtId] so when this.items[sElmtId] is updated later on with .bind(), obj will then point to the same DOM element that this.items[sElmtId] does. — Elliot B.
– Elliot B., Commented Mar 1, 2012 at 23:33
The reason for needing this code is a bit complicated. In the larger version of my code I have objects that instantiate DOM elements. I want those objects to have a property (e.g., this.dom_elmt) that points to the DOM element they were responsible for rendering. The reason why I'm trying to create the DOM reference after the fact is because I'm writing for IE6 compatibility. Constructing DOM fragments in memory is too slow for large pages in IE6. I have to create the HTML by string, insert into DOM after the function exits, and create the link back to the DOM element afterwards. — Elliot B.
– Elliot B., Commented Mar 1, 2012 at 23:36

Felix Kling · Accepted Answer · 2012-03-01 23:41:12Z

2

You problem is this line:

this.items[sElmtId] = document.getElementById(sElmtId);

This overwrites the object currently assigned to this.items[sElmtId] with the DOM node. Instead, you should assign the node to a property of that object:

this.items[sElmtId].node = document.getElementById(sElmtId);

That way, obj.node will always refer to the current node:

alert(obj.node.innerHTML);

DEMO

Side note: The problem with your fiddle is also that you execute the code when the DOM is not built yet (no wrap (head)), so it cannot find #spantest. You have to run the code once the DOM is ready, either no wrap (body), onDomRead or onLoad.

edited Mar 1, 2012 at 23:41

answered Mar 1, 2012 at 23:36

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ry- · Accepted Answer · 2012-03-01 23:35:54Z

Creating a reference like you need is impossible in JavaScript. The closest thing you can get is either a nested or closed object, or just copying it over, like so:

var collection = function() {
    this.items = {};
};

collection.prototype.add = function(sElmtId) {
    return this.items[sElmtId] = {};
};

collection.prototype.bind = function() {
    for(var sElmtId in this.items) {
        var element = document.getElementById(sElmtId);

        for(var x in element) {
            this.items[sElmtId][x] = element[x];
        }
    }
};

var col = new collection();

var obj = {};

obj = col.add('spantest');
col.bind();

alert(obj.innerHTML);

But it won't be truly "bound". You'll have to use nested objects if you need that kind of functionality, and it will probably defeat the point of your syntactic sugar.

http://jsfiddle.net/GKBfL/7/

Collectives™ on Stack Overflow

Returning a reference in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related