javascript – 使用动态名称在ES6中创建一个类的实例?

前端之家收集整理的这篇文章主要介绍了javascript – 使用动态名称在ES6中创建一个类的实例?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这个问题在这里已经有一个答案:> Create object from string in JavasScript ECMAScript 64个
我想通过将一个字符串变量传递给一个函数来实例化一个特定的ES6类.根据变量的值,将创建一个不同的类.

示例 – 我有2个类,ClassOne,ClassTwo.我想要能够将一个变量传递给一个函数并返回一个新的类.类的名称将与变量相关联 – 例如.通过’二’将创建ClassTwo.

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

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 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;
}

解决方法

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

代理类

从@ thefourtheye的例子,维护一个名称到类的映射,你可以有一个类的工作是取所需类的名称并代理其实例化:

[See it working]

定义你的课程

// 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.工厂功能

使用一个对类名称对象执行查找的函数 – >类映射和返回引用类,我们可以照常实例化.

定义出厂功能

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

猜你在找的JavaScript相关文章