在javascript中继承了DOM元素对象!这段代码有什么问题?

Inheriting from the DOM Element object in javascript ! Whats wrong with this code?

本文关键字：代码 问题 什么 段代码 继承 javascript DOM 对象 元素      更新时间：2023-09-26

我试图从DOM元素对象继承，所有的代码运行良好，当我创建对象但当我试图调用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);

虽然您做得不正确(稍后会详细介绍)，但您最终试图传递一个继承自DOM Element而不是DOM Element本身的对象。这是不允许的。

这似乎应该工作，但DOM元素和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
       }
   }
});

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

这是因为调用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
相关文章：