Js:创建继承自某个 js 类的 html 元素

Js: create html element that inherits from some js class

本文关键字：js 类的 html 元素 创建 继承 Js      更新时间：2023-09-26

我有js类（如果js支持类是这个问题的题外话）：

var MyClass=function(){
....
}
MyClass.prototype.someMethod=function(){
...
}

我想创建将继承MyClass的html元素（例如div）。例如，对于自定义元素，我可以使用以下内容：

  var SimpleTableClass = document.registerElement('simple-table',{prototype: new MyClass()});
  simpleTable=new SimpleTableClass();

我唯一的想法是：

var newDiv = document.createElement("div");
newDiv.prototype=new MyClass();

但我不知道这是否是安全的方法，因为我将覆盖所有 html 元素原型。

如果可能的话，我不仅想获取html元素，还想获得其构造函数（类），如SimpleTableClass的示例所示。

我唯一的想法是：

var newDiv = document.createElement("div");
newDiv.prototype=new MyClass();

但我不知道这是否是安全的方法，因为我将覆盖所有 html 元素原型。

比它是否安全更重要的是，它毫无意义。它在div上创建一个prototype属性，该属性不会从MyClass实例中为其提供任何方法。

您可以使用 MyClass.prototype（或 MyClass 的实例）中的所有方法扩展元素，方法是复制它们对元素的引用。许多库提供了一个通常称为 extend 的函数来做到这一点。（这里是jQuery的，这里是下划线的。这通常称为"混合"。那里没有继承，你只是在抓取参考。除了关于 expando 属性命名冲突的通常警告之外，它足够安全。为了尽量减少命名冲突的几率，您可以在方法前面加上一些前缀。

例如：

var MyStuff = {
  myDoThis: function() {
    // ...
  },
  myTurnGreen: function() {
    this.style.color = "green";
  }
  // ...and so on...
};
var div = document.createElement('div');
div.innerHTML = "This is the text of my div";
document.body.appendChild(div);
Object.keys(MyStuff).forEach(function(key) {
  div[key] = MyStuff[key];
});
setTimeout(function() {
  div.myTurnGreen();
}, 500);

相关文章：