时间戳

首页 > 解决方案 > 从类名字符串实例化一个对象

javascript - 从类名字符串实例化一个对象

问题描述

我正在尝试根据所选选项动态实例化 JS 对象。我的 HTML 看起来像

<select class="klass">
  <option value="Klass1">1</option>
  <option value="Klass2">2</option>
  <option value="Klass3">3</option>
</select>

这里是我的 JS（到目前为止）

let elements = [1,2,3]
let klass_name = document.querySelector('.klass').value
let klass = new ???(elements)
console.log(klass.params())



export default class Klass1 {
  constructor(elements) {
    this.elements = elements
  }

  params() {
    return "lorem"
  }
}

export default class Klass2 {
  constructor(elements) {
    this.elements = elements
  }

  params() {
    return "ipsum"
  }
}

export default class Klass3 {
  constructor(elements) {
    this.elements = elements
  }

  params() {
    return "this is very comPLEex@"
  }
}

我应该用什么代替???？

如果我不必在 JS 中预定义所有可能的选项，那就太好了。

我不是要更改类，而是要实例化此类的对象。

标签： javascript

解决方案

它正在构建一个字典，您可以在其中从与要创建的类关联的选择中检索到的值。所以 Klasses[klass_name] 返回你想要创建的类。

const Klasses = {
  Klass1: class Klass1 {
    constructor(elements) {
      this.elements = elements
    }

    params() {
      return "1"
    }
  },
  Klass2: class Klass2 {
    constructor(elements) {
      this.elements = elements
    }

    params() {
      return "2"
    }
  }
};

let elements = [1, 2, 3]
let klass_name = document.querySelector('.klass').value
const klass = new Klasses[klass_name]();
console.log(klass.params());
<select class="klass">
  <option value="Klass1">1</option>
  <option value="Klass2">2</option>
  <option value="Klass3">3</option>
</select>

推荐阅读