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 Element而不是DOM Element本身的对象。这是不允许的。

它似乎应该可以工作，但DOM Elements和DOM方法是主机对象。他们不会按照您对本机对象的所有相同规则进行游戏。 .appendChild()方法需要一个Element，而不需要其他任何东西。因此，您尝试做的事情不会起作用。

关于你的继承方法，它完全不正确。您不能修改正在创建的新对象的.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属性但是如果我用Element.constructor.call(this, tagName);替换document.createElement(tagName)你会得到结果

Tag Name is set to DIV

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

2 个答案: