javascript - AppendChild 不起作用！，继承自 DOM Element 对象..我在这里做错了什么？

Question

我正在编写我的自定义元素，它具有比标准 DOM 元素更多的方法，这是从 Element 对象继承的方法

function MyObject(){

    return (Object.create(document.createElement("Mytag"),{
         myfunction:function(){
             return blahblah;
         }
    }));

}//function for creating object ends

function MyObject2(){

    return (Object.create(document.createElement("Mytag2"),{
        myfunction:function(){
            return blahblah;
        }
    }));

}//function for creating second object ends

var a=new MyObject();//statement works fine
var b=new MyObject2();//statement works fine 

现在，当我尝试将其中一个对象作为另一个对象的子对象时，我可以做任何事情，而是抛出异常

a.appendChild(b);

Answer 1

因为您使用return (Object.create(...));, 您的new MyObject();和new MyObject2();返回对象而不是 DOM 元素，因此a.appendChild(b)将无法正常工作，因为a并且b应该是 DOM 元素。

要查看差异，请查看此jsFiddle中的控制台

Answer 2

您需要将属性描述符传递给Object.create，而不是方法。

function MyObject() {
    return Object.create(document.createElement("Mytag"), {
        myfunction: {
            value: function() {
                 return 'blahblah';
            }
        }
    });
}

这在 Chrome 中对我有用：

a = new MyObject();
> HTMLUnknownElement {spellcheck: true, isContentEditable: false, contentEditable:
  "inherit", children: HTMLCollection[0], outerText: ""…}
a.myfunction()
> "blahblah"

但是请注意，它没有正确地将对象的“类型”设置为MyObject. 当我尝试将对象添加到 DOM 时，它也不会阻止引发异常:(