我可以继承DOM类吗？

| 我想知道是否可以创建HTMLDivElement的子类。像这样。

MyDivElement.prototype.pickColor = function()
{
    return this.picked;
}
function MyDivElement()
{
    this = new HTMLDivElement();
    this.picked = \'unknowd\';
}
alert(this.picked); // print: \'unkowd\'

（类似）可能吗？如果没有，实现此目标的最佳方法是什么？

已邀请:

4 个回复

丧泉缝锋

Chrome1ѭ在Chrome中抛出TypError\"Illegal constructor\"-因此无法执行。更新：我已经在其他当前的浏览器中进行了测试，它们会引发各种类型的错误-但它们都会引发错误。实际上，这将起作用：

function MyDivElement() {
    this.picked = \'unknowd\';
}

MyDivElement.prototype = document.createElement(\'div\');

var mydiv = new MyDivElement();

但我不确定您如何使用此模式...

癸痊醒

在暴露了“ 4”且易变的浏览器中，可以子类化DOM元素。看起来像这样：

function CustomEl () {
    var el = document.createElement(\'div\')
    el.__proto__ = CustomEl.prototype
    return el
}
CustomEl.prototype.__proto__ = HTMLDivElement.prototype

我还在jsFiddle上进行了更详细的介绍。不幸的是，尽管IE和Opera不允许__proto__访问，并且据我所知没有未来的计划。

拭十年

在某些浏览器中，您可以扩展原型，在其他浏览器中，则可以。我会让你猜猜那些你做不到的。 :-)这与扩展DOM元素并不完全相同，但是它确实允许您执行某些可能需要该功能的事情的子集。事实是，DOM元素并不是真正的JavaScript实体；它们仅仅是运行时系统提供的模拟。（也许总有一天，所有的jsdom工作实际上都会实现。）好吧，我将向您介绍有问题的浏览器：IE根本不喜欢这种浏览器。但是其他人也这样做。如果您曾经看过Prototype库，那么当您忘记对DOM元素原型进行原型化时，就会无聊地看到这个事实的令人讨厌的，仅刺激IE的错误。（IE9可能有所不同，但我对此表示怀疑。）这种事情很容易在jsfiddle上进行测试。

臀夯脖锑

我正在尝试这一点。一个很大的困难是您需要文档的上下文来创建元素。您可以将ѭ7作为默认设置，但这很无聊。这是我正在研究的POC：

function CustomNode(type, parent) { 
    if (type instanceof Node) {
        // Decorate a preexisting node appropriately if called that way.
        if (arguments.length === 2 && type.ownerDocument !== parent) {
            // Import the node if it\'s not owned by the requested document.
            type = parent.importNode(type, true);
        }
        return Object.assign(type, this.__proto__);
    }
    //Normal flow, e.g., new CustomNode(\"div\");
    var d = document;
    if (parent) {
        // Alt document flow, e.g., new CustomNode(\"div\", xmlDoc);
        if (parent.nodeType === 9) {
            d = parent;
        } else {
            // Support for new CustomNode(\"div\", parentElement);
            //  This doesn\'t append the element, just makes sure 
            //  the documents match
            d = parent.ownerDocument;
        }
    }
    var inst;
    // Creation flags
    if (type[0] === \'#\') { //text
        inst = d.createTextNode(type.substr(1));
    } else if (type[0] === \'?\') { //Processing instruction
        type = type.substr(1).split(\' \');
        inst = d.createProcessingInstruction(type.shift(), type.join(\' \'));
    } else if (type[0] === \'[\') { // CDATA
        inst = d.createCDATASection(type.substr(1));
    } else if (type[0] === \'/\') { // Comment
        inst = d.createComment(type.substr(1));
    } else { //Everything else gets an element.
        inst = d.createElement(type);
    }
    // DE-COR-ATE
    Object.assign(inst, this.__proto__);
    return inst;
}
// Decorator for customized NodeLists; probably inefficient.  Decorates
//   contents with CustomNode
function CustomNodeList(list) {
    var Self = this.constructor,
        CNode = this.Node;
    return Object.assign([].map.call(list, function (node) {
        return new CNode(node);
    }), this.__proto__);
}
CustomNodeList.prototype = {
    // so we know how to wrap...
    Node: CustomNode,
    text: function () {
        return this[0].textContent;
    }
};


CustomNode.prototype = {
    // So we know how to decorate NodeLists
    NodeList: CustomNodeList,
    // So we know how to decorate Nodes
    Node: CustomNode,
    // Easy make-and-attach
    new: function (type, attach) {
        var CNode = this.Node;
        var ret = new CNode(type, this.ownerDocument);
        if (attach) {
            this.appendChild(ret);
        }
        return ret;
    },
    // NodeLists with ES5 iterators!
    find: function () {
        var CNodeList = this.NodeList;
        return new CNodeList(this.querySelectorAll.apply(this, arguments));
    },
    kids: function () {
        var CNodeList = this.NodeList;
        return new CNodeList(this.childNodes);
    }
};

请注意，这可能是一个坏主意：这些功能在相同范围内的所有内容（包括元素本身）都将永远不会被垃圾回收，因为大多数浏览器中的GC在引用元素引用对象时都是愚蠢的。出于这个原因，我绝不会将其用于生产：这是直接的内存泄漏。

要回复问题请先登录或注册

我可以继承DOM类吗？

4 个回复

发起人

javascript

prototype

问题状态

我可以继承DOM类吗？

与内容相关的链接

4 个回复

发起人

javascript

prototype

问题状态