使用动态名称在 ES6 中创建类的实例? [英] Create an instance of a class in ES6 with a dynamic name?

问题描述

我希望能够通过将字符串变量传递给函数来实例化特定的 ES6 类.根据变量的值，将创建不同的类.

I want to be able to instantiate a particular ES6 class by passing a string variable to a function. Depending on the value of the variable, a different class will be created.

示例 - 我有 2 个类，ClassOne，ClassTwo.我希望能够将变量传递给函数并返回一个新类.类的名称将与变量相关 - 例如.传递 'Two' 将创建 ClassTwo.

Example - I have 2 classes, ClassOne, ClassTwo. I want to be able to pass a variable to a function and get a new class back. The name of the class will be related to the variable - eg. passing 'Two' will create ClassTwo.

我不想只想使用这样的 switch 子句:

I don't want to just use a switch clause like this:

function createRelevantClass( desiredSubclassName )
{
  let args = [],
      newClass;

  switch( desiredSubclassName )
  {
    case 'One' :
      newClass = new ClassOne(args);
      break;
    case 'Two' :
      newClass = new ClassTwo(args);
      break;
  }

  return newClass;
}

相反，我希望能够以某种方式使用变量名创建构造函数调用.这可能吗?

Instead, I want to somehow be able to create the constructor call using the variable name. Is that possible?

function createRelevantClass( desiredSubclassName )
{
  // desiredSubclassName would be string 'One' or 'Two'

  // how to use the 'new' operator or Reflect here to create the class based on the variable passed in
  let newClass = ( *magic code to build constructor dynamically* );

  return newClass;
}

推荐答案

有几种方法可以实现此目的...

There are a few ways you can accomplish this...

根据@thefourtheye 的维护名称到类的映射的示例，您可以拥有一个类，其工作是获取所需类的名称并代理其实例化:

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:

[ 看到它工作 ]

定义类

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

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

定义代理类(例如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;

示例用法

import DynamicClass from './DynamicClass';

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

2.工厂函数

使用一个函数对类名的对象执行查找 -> 类映射并返回对类的引用，然后我们可以像往常一样实例化.

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.

定义工厂函数

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

const classes = { ClassOne, ClassTwo };

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

示例用法

import dynamicClass from './dynamicClass'

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

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

这篇关于使用动态名称在 ES6 中创建类的实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！