Create an instance of a class in ES6 with a dynamic name? [duplicate]

by

There are a few ways you can accomplish this…

1. Proxy Class

Following from @thefourtheye’s example of maintaining a mapping of name to class, you could have a class whose job is to take the name of the desired class and proxy its instantiation:

[ See it working ]

Define your classes

// ClassOne.js
export class ClassOne {
    constructor () {
        console.log("Hi from ClassOne");
    }
}

// ClassTwo.js
export class ClassTwo {
    constructor (msg) {
        console.log(`${msg} from ClassTwo`);
    }
}

Define the proxy class (e.g. DynamicClass)

import ClassOne from './ClassOne';
import ClassTwo from './ClassTwo';

// Use ES6 Object Literal Property Value Shorthand to maintain a map
// where the keys share the same names as the classes themselves
const classes = {
    ClassOne,
    ClassTwo
};

class DynamicClass {
    constructor (className, opts) {
        return new classes[className](opts);
    }
}

export default DynamicClass;

Example usage

import DynamicClass from './DynamicClass';

new DynamicClass('ClassOne'); //=> "Hi from ClassOne"
new DynamicClass('ClassTwo', 'Bye'); //=> "Bye from ClassTwo"

2. Factory Function

Use a function that performs a lookup against an object of class name -> class mappings and returns reference to the class, which we can then instantiate as usual.

Define the factory function

import ClassOne from './ClassOne';
import ClassTwo from './ClassTwo';

const classes = { ClassOne, ClassTwo };

export default function dynamicClass (name) {
  return classes[name];
}

Example usage

import dynamicClass from './dynamicClass'

const ClassOne = dynamicClass('ClassOne') // Get the ClassOne class

new ClassOne(args) // Create an instance of ClassOne

More Related Contents:

  1. Private properties in JavaScript ES6 classes
  2. ES6 class variable alternatives
  3. ES6 modules: Export single class of static methods OR multiple individual methods
  4. Call static methods from regular ES6 class methods
  5. How to extend a class without having to use super in ES6?
  6. Declaring static constants in ES6 classes?
  7. ES6 classes : what about instrospection?
  8. Javascript ES6 class definition not accessible in window global
  9. “This” within es6 class method [duplicate]
  10. ES6 Dynamic class names
  11. Override a setter, and the getter must also be overridden
  12. Getting a list of statics on an ES6 class
  13. What are getters and setters for in ECMAScript 6 classes?
  14. Why aren’t methods of an object created with class bound to it in ES6?
  15. How to add mixins to ES6 javascript classes?
  16. ES6 – declare a prototype method on a class with an import statement
  17. Javascript: how to dynamically create nested objects using object names given by an array
  18. ES6 template literals vs. concatenated strings
  19. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  20. this value in JavaScript anonymous function
  21. Object vs Class vs Function
  22. Extract certain properties from all objects in array
  23. What’s the purpose of allowing duplicate property names?
  24. map function not working in React
  25. How to get the first element of Set in ES6 ( EcmaScript 2015)
  26. How can I load jQuery if it is not already loaded?
  27. What is ‘global symbol registry’?
  28. object destructuring: how to use intermediate nested property
  29. Compare two Arrays with Objects and create new array with unmatched objects
  30. When is the body of a Promise constructor callback executed?

Leave a Comment