继承自 javascript 中的 DOM Element 对象！这段代码有什么问题？

Question

我正在尝试从 DOM Element 对象继承，当我创建对象时所有代码都运行良好，但是当我尝试调用 appendChild() 方法时，它给出了一个错误提示：

MyObject doesn't have an appendChild method

这是我的代码：

var content=document.createTextNode("This was dynamically created");
function MyObject(tagName){
    Element.constructor.call(this,tagName);
    this.prototype=Element.prototype;
    this.prototype=Object.defineProperties(this.prototype,{
       newMethod:function(){
       //dosomething

       }
    });
}
var newObj=new MyObject("div");
newObj.appendChild(content);

Answer 1

虽然你做错了（稍后会详细介绍），你最终还是试图传递一个继承自 DOM 元素而不是 DOM 元素本身的对象。这是不允许的。

看起来应该可以，但是 DOM 元素和 DOM 方法是宿主对象。它们不会按照您对本机对象所期望的所有相同规则进行操作。 .appendChild() 方法只需要一个元素，仅此而已。所以你试图做的事情不会奏效。

---

关于您的继承方法，这是完全不正确的。您不会修改正在创建的新对象的 .prototype 属性。您修改构造函数的.prototype。它只完成一次，然后从构造函数创建的所有新对象都继承自分配给该构造函数的 .prototype 属性的对象。

因为没有继承方式，所以没有.appendChild() 方法。下面的代码修复了它，但由于上面给出的原因，它仍然无法工作。

function MyObject(tagName){
    Element.call(this, tagName);
}

MyObject.prototype=Object.create(Element.prototype);

Object.defineProperties(MyObject.prototype,{
   newMethod: {
       value:function(){
           //dosomething
       }
   }
});

你的属性描述符语法也是错误的，所以我修复了它。

Answer 2

这是因为调用Element的构造函数不会创建DOM Element对象的实例，而是尝试设置DOM Element对象的构造函数设置的属性，例如

function MyObject(tagName){
Element.constructor.call(this, tagName);
}
var newObj=new MyObject("div");

不会创建tagName 属性，就像我们创建 DOM Element 对象的实例时可用的属性，并且

alert("Tag Name is set to "+newObj.tagName);

会显示

Tag Name is set to undefined

因为构造函数试图设置它但它不能因为没有tagName属性但是如果我用document.createElement(tagName)替换Element.constructor.call(this, tagName);你会得到结果

Tag Name is set to DIV