How to create new Javascript objects dynamically at runtime given their class names only?

Question

Let us say there are some widgets:

function Widget1(initData) {
        ....
} 
Widget1.prototype.render = function() {
    ....
}


function Widget2(initData) {
    ....
}  
Widget2.prototype.render = function() {
    ....
}

What I need to do is the following:

$.subscribe('/launch', function(widgetName, initData) {
    // create a new object of the widget and then call the render method
});

I dont want to write multiple if-else blocks as the number of widgets may become very large. One option is to use eval(), but I believe that there may be better techniques. I am using JQuery framework, so don't want to include any other frameworks that may have a specific feature to support this. A pure Javascript solution will be appreciated.

eval('var x = new ' + widgetName); would be one extremely ugly hackish massively bad way of going about it. — Marc B
– Marc B, Commented Jan 4, 2012 at 18:29
Why do they need to have their own variable definition? If they're just copies of some kind of Widget why not just add them to an Array indexed by whatever string makes sense. — Yevgeny Simkin
– Yevgeny Simkin, Commented Jan 4, 2012 at 18:34
Because each widget is complex, and each instance of the widget will have a separate state. While each instance will look similar to the other, it will render a different set of data. — Samarth Bhargava
– Samarth Bhargava, Commented Jan 4, 2012 at 18:41

julioolvr · Accepted Answer · 2012-02-28 18:20:42Z

2

Yep, there is a way. When you create a function, it's created as a property of the this object in that context. So if you declare those Widget functions in the global scope, they become properties of the window object. As you probably know, you can access a property both as object.property or object['property']. So, if they are global, you can do something like:

$.subscribe('/launch', function(widgetName, initData) {
    var widget = new window[widgetName](initData);
});

EDIT: As T.J. Crowder said, I was horribly wrong. What I said about the function being created as a property of this applies when you're on the global scope (I want to say "only when you're on the global scope", but since I'm not 100% sure I'm gonna leave it as that).

edited Feb 28, 2012 at 18:20

answered Jan 4, 2012 at 18:32

julioolvr

4734 silver badges11 bronze badges

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

2 Comments

T.J. Crowder Over a year ago

"When you create a function, it's created as a property of the this object in that context" No, it isn't. That's only true at global scope. Within a function, it's not true at all.

julioolvr Over a year ago

I added a comment. And really: Ugh, I can't believe what I wrote.

tkone · Accepted Answer · 2012-01-04 18:32:35Z

1

As the comment from Esalijia said:

$.subscribe('/launch', function(widgetName, initData) {
    // create a new object of the widget and then call the render method
    widget = new window[widgetName]();
});

Or you can bind the scope of where Widget* is defined using .bind() and have them available to the $.subscribe method.

answered Jan 4, 2012 at 18:32

tkone

22.8k5 gold badges57 silver badges78 bronze badges

Collectives™ on Stack Overflow

How to create new Javascript objects dynamically at runtime given their class names only?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related