如何动态创建EcmaScript类?

时间:2016-10-15 18:39:26

标签: javascript class dynamic custom-element

如果我想在EcmaScript中动态创建新类(而不是实例),我该怎么做?那些实例int[] odds = new int[22]; for (int i = -6, m = 0; i <= 38 && m < 22; i++, m++) { if (i % 2 != 0) { odds[m] = i; } } 如何来自另一个类?

传统上,人们可以成为“阶级”:

extend

然后动态扩展它:

function Living(){}
Living.prototype.eat = function(){ console.log("eat") }

等等:

function makeSubclass(name, parentClass){
  var klass = new Function()
  klass.name = name
  klass.displayName = name
  klass.prototype = parentClass.prototype
  klass.prototype.constructor = klass
}
var Animal = makeSubclass("Animal", Living)
var dog = new Animal()
dog.eat() //=> eat

关键是我希望以数据驱动的方式动态地这样做。这种传统方法让我动态地创建新类:

Animal.prototype.walk = function(){ console.log("one foot then another") }
var Person = makeSubclass("Person", Animal)
var rektide = new Person()
rektide.eat() //=> eat
rektide.walk() //=> one foot then another

因此我可以动态地,数据驱动地创建我需要的类。

我认为我被告知的理论是,EcmaScript类只是语法糖,我可以继续使用旧语法。但是我们开始看到只有EcmaScript类会做的示例(例如Custom Elements),因此这种动态定义新类的能力(而不是使用类表达式,这是 static < / em>建设)变得很重要。

在需要新fetch("http://yoyodyne.net/animals").then(response => response.json()).then(animals => { animals.forEach(animalName => window[animalName] = makeSubclass(animalName, Animal) }) 语法问题的自定义元素中,Domenic Denicola写道

  

我希望你知道你可以像动作一样动态地生成类,

所以我想问一下,怎么样?如果我想要一个扩展HTMLElement的新类,我怎样才能以数据驱动的方式动态创建它?

1 个答案:

答案 0 :(得分:6)

使用class expression

class Living {
  eat() {
    return 42
  }
}

const livingThings = {}
;['dog', 'cat'].forEach((name) => (
  livingThings[name] = class extends Living {
    name() { return name }
  }
))

const myDog = new livingThings.dog()
myDog.eat()  //=> 42
myDog.name() //=> 'dog'

这里的超类(Living)可以替换为任何东西,因为它是一个表达式(Living,毕竟,就像任何其他变量一样)。

那就是说,如果可能的话,我会尽量避免动态创建类,而是使用实例。