如何即时创建 EcmaScript 类?
How do I create EcmaScript classes on the fly?
如果我想在 EcmaScript 中动态创建新的 classes(不是实例),我该怎么做?这些实例 extend
如何来自另一个 class?
传统上可以 "class":
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
关键是我希望以数据驱动的方式动态地这样做。这种传统方法让我 动态地 创建新的 classes:
fetch("http://yoyodyne.net/animals").then(response => response.json()).then(animals => {
animals.forEach(animalName => window[animalName] = makeSubclass(animalName, Animal)
})
因此我可以动态地、数据驱动地创建我需要的 classes。
我认为有人告诉我的理论是 EcmaScript classes 只是语法糖,我可以继续使用旧语法。但是,我们开始看到只有 EcmaScript classes 可以执行的示例(例如 Custom Elements),因此这种动态定义新 classes 的能力(与使用 [= =44=] 表达式,它是一个 static 结构)变得很重要。
在自定义元素需要新的 class
语法问题中,Domenic Denicola 写道
I hope you're aware that you can generate classes dynamically just as easily as functions,
所以我想问一下,怎么样?如果我想要一个扩展 HTMLElement 的新 class,我如何以数据驱动的方式即时创建它?
使用 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
,毕竟,就像任何其他变量一样)。
也就是说,如果可能的话,我会尽量避免动态创建 类,而是使用实例。
如果我想在 EcmaScript 中动态创建新的 classes(不是实例),我该怎么做?这些实例 extend
如何来自另一个 class?
传统上可以 "class":
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
关键是我希望以数据驱动的方式动态地这样做。这种传统方法让我 动态地 创建新的 classes:
fetch("http://yoyodyne.net/animals").then(response => response.json()).then(animals => {
animals.forEach(animalName => window[animalName] = makeSubclass(animalName, Animal)
})
因此我可以动态地、数据驱动地创建我需要的 classes。
我认为有人告诉我的理论是 EcmaScript classes 只是语法糖,我可以继续使用旧语法。但是,我们开始看到只有 EcmaScript classes 可以执行的示例(例如 Custom Elements),因此这种动态定义新 classes 的能力(与使用 [= =44=] 表达式,它是一个 static 结构)变得很重要。
在自定义元素需要新的 class
语法问题中,Domenic Denicola 写道
I hope you're aware that you can generate classes dynamically just as easily as functions,
所以我想问一下,怎么样?如果我想要一个扩展 HTMLElement 的新 class,我如何以数据驱动的方式即时创建它?
使用 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
,毕竟,就像任何其他变量一样)。
也就是说,如果可能的话,我会尽量避免动态创建 类,而是使用实例。