How do I make JavaScript Object using a variable String to define the class name?


Here's what I'm trying to do -- this is pseudo code and doesn't work. Does anyone know how to accomplish this for real:

// Define the class
MyClass = Class.extend({});

// Store the class name in a string
var classNameString = 'MyClass';

// Instantiate the object using the class name string
var myObject = new classNameString();

Would it work if you did something like this:

var myObject = window[classNameString];

..?


Here's a more robust solution that will work with namespaced functions:

var stringToFunction = function(str) {
  var arr = str.split(".");

  var fn = (window || this);
  for (var i = 0, len = arr.length; i < len; i++) {
    fn = fn[arr[i]];
  }

  if (typeof fn !== "function") {
    throw new Error("function not found");
  }

  return  fn;
};

Example:

my = {};
my.namespaced = {};
(my.namespaced.MyClass = function() {
  console.log("constructed");
}).prototype = {
  do: function() {
    console.log("doing");
  }
};

var MyClass = stringToFunction("my.namespaced.MyClass");
var instance = new MyClass();
instance.do();

BTW: window is the reference to the global Object in browser JavaScript. Which is also this, and should work even in non-browser environments such as Node.js, Chrome extensions, transpiled code etc.

var obj = new this[classNameString]();

The limitation is that the class being called must be in the global context. If you want to apply the same to a scoped class you need to do:

var obj = (Function('return new ' + classNameString))()

However, there really is no reason to use a string. JavaScript functions are themselves objects, just like strings which are objects also.

Edit

Here is a better way to get the global scope that works in strict mode as well as non-browser JS environments:

var global;
try {
  global = Function('return this')() || (42, eval)('this');
} catch(e) {
  global = window;
}

// and then
var obj = new global[classNameString]

From: How to get the global object in JavaScript?


If MyClass is global, you can access it as a property of window object (assuming your code runs in a browser) using subscript notation.

var myObject = new window["MyClass"]();

If classNameString come from secure source you can use

var classNameString = 'MyClass';
var myObject = eval("new " + classNameString + "()");

This solution works with namespaces and is independent on platform (browser/server).


Here is improved version of Yuriy's method that also handles objects.

var stringToObject = function(str, type) {
    type = type || "object";  // can pass "function"
    var arr = str.split(".");

    var fn = (window || this);
    for (var i = 0, len = arr.length; i < len; i++) {
        fn = fn[arr[i]];
    }
    if (typeof fn !== type) {
        throw new Error(type +" not found: " + str);
    }

    return  fn;
};