Question

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

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。

Answer 1

我唯一的想法是：
var newDiv = document.createElement("div");
newDiv.prototype=new MyClass();
但我不知道这是否安全，因为我将覆盖所有html元素原型。

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

您可以通过复制对元素的引用，使用MyClass.prototype（或MyClass的实例）中的所有方法扩展元素。许多库提供了一个通常称为extend的函数，它正是这样做的。（Here's jQuery's，here's Underscore's。）这通常被称为“mixin”。那里没有继承，你只是抓住了引用。除了关于在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);

Js：创建从某些js类继承的html元素

1 个答案: