Как создать классы EcmaScript на лету?

Если я хочу динамически создавать новые расширения (а не экземпляры) на лету в EcmaScript, как я могу это сделать? И как могут эти экземпляры из другого класса?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

И так далее:

fetch("http://yoyodyne.net/animals").then(response => response.json()).then(animals => {
    animals.forEach(animalName => window[animalName] = makeSubclass(animalName, Animal)
})

Ключ в том, что я хочу делать это динамически, с учетом данных. Этот традиционный подход позволит мне динамически создавать новые классы:

class

И таким образом я могу динамически, data-driven создавать классы, которые мне нужны.

Теория, по-моему, мне рассказывала, что классы EcmaScript были просто синтаксическим сахаром, и я мог продолжать использовать старый синтаксис. Однако мы начинаем видеть примеры, в которых будут выполняться только классы EcmaScript (например, пользовательские элементы ), и поэтому эта способность «на лету» определять новые классы (в отличие от использования выражения класса, статической конструкции) становится важной.

В пользовательских элементах, нуждающихся в новой classсинтаксической проблеме, Доменик Деникола пишет

Я надеюсь, вы знаете, что вы можете генерировать классы динамически так же легко, как функции,

И поэтому я хотел бы спросить, как? Если мне нужен новый класс, который расширяет HTMLElement, как я могу создать его «на лету», управляемым данными?

javascript,class,dynamic,custom-element,

1

Ответов: 1


6 ов принято

Используйте выражение класса :

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) может быть заменен на что угодно, так как ita € ™ s выражение (в Livingконце концов, как и любая другая переменная).

Тем не менее, я постараюсь избежать динамического создания классов, если это возможно, и вместо этого использовать экземпляры.

JavaScript, класс, динамический, заказ элемент,
Похожие вопросы