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

问题描述

我想通过将一个字符串变量传递给一个函数来实例化一个特定的ES6类。根据变量的值，将创建一个不同的类。

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

I 不要想要使用开关子句：

  function createRelevantClass（desiredSubclassName）
 {
 let args = []，
 newClass; 
 
 switch（desiredSubclassName）
 {
 case'One'：
 newClass = new ClassOne（args）; 
 break; 
 case'Two'：
 newClass = new ClassTwo（args）; 
 break; 
} 
 
 return newClass; 
} 
  

相反，我想以某种方式使用变量创建构造函数调用名称。这是可能吗？

  function createRelevantClass（desiredSubclassName）
 {
 // desiredSubclassName将是字符串'一'或'Two'
 
 //如何使用'new'运算符或Reflect这里创建基于
中传递的变量的类let newClass =（* magic code to build constructor动态*）; 
 
 return newClass; 
} 
  

解决方案

有几种方法可以完成这个...

1。代理类

从@ thefourtheye的维护名称映射到课堂的例子，你可以有一个班，他的工作是拿所需类的名字，代理它实例化：

[看到它工作 ]

定义你的课程

  // ClassOne.js 
 export class ClassOne {
 constructor（）{
 console.log（Hi from ClassOne）; 
} 
} 
 
 // ClassTwo.js 
 export class ClassTwo {
 constructor（msg）{
 console.log（`$来自ClassTwo`的{msg}）; 
} 
} 
  

定义代理类 （例如 DynamicClass ）

 从'./ClassOne'导入ClassOne; 
从'./ClassTwo'导入ClassTwo; 
 
 //使用ES6对象字面值属性值可以维护一个映射
 //这些键与类本身共享相同的名称
 const classes = {
 ClassOne，
 ClassTwo 
}; 
 
 class DynamicClass {
构造函数（className，opts）{
返回新类[className]（opts）; 
} 
} 
 
导出默认的DynamicClass; 
  

使用示例

从'./DynamicClass'导入DynamicClass

  
 
 new DynamicClass（'ClassOne'）; // => 从ClassOne
 new DynamicClass（'ClassTwo'，'Bye'）; // => 从ClassTwo再见
  

2。工厂功能

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

定义工厂函数

  import ClassOne来自'./ClassOne'; 
从'./ClassTwo'导入ClassTwo; 
 
 const classes = {ClassOne，ClassTwo}; 
 
导出默认函数dynamicClass（name）{
 return classes [name]; 
} 
  

使用示例

 从'./dynamicClass'导入dynamicClass 
 
 const ClassOne = dynamicClass（'ClassOne'）//获取ClassOne类
 
 new ClassOne（args）//创建ClassOne的一个实例
  

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.

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.

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...

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

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