javascript - DOM 元素原型(prototype)

Question

我正在创建自己的小部件:

Button = function(){};
Button.prototype = document.createElement('INPUT');

btn = new Button();
btn.type = 'BUTTON';
btn.value = 'test';
btn.onclick = function(){alert('TEST!')}
document.body.appendChild(btn);

如果我只是打开一个新选项卡并将其复制并粘贴到 Firefox 的控制台中，则运行效果非常好。但是当我将它们放入 js 文件中(包装在 $(document).ready 中)并将其链接到 HTML 中，然后在浏览器中打开 HTML 时，它失败了。

在 btn.onclick 行上，它告诉我:

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object"  nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"  location: "JS frame :: main.js :: <TOP_LEVEL> :: line 12"  data: no]

我有点理解这个错误，因为我继承了原型(prototype)，但是我new了元素(不直接作用于它)，并且它在控制台中运行正常。谁能指出问题所在吗？

Answer 1

你不能像这样创建 DOM 节点(而且你也没有正确地进行原型(prototype)设计，你需要使用 HTMLInputElement.prototype 但那是另一回事)，而是这样做

Button = function(){
    var btn = document.createElement('INPUT');
    btn.type = 'BUTTON';
    return btn;
};

您仍然可以执行new Button，只不过这次它将按预期工作。

<小时/>

编辑:如果您想使用 Button.prototype 定义属性和方法，您可以将它们复制到构造函数中的 btn (这将是 ByVal 不是ByRef)

for (i in Button.prototype) { // make sure to var i
    btn[i] = Button.prototype[i];
}

尝试使用如下所示的原型(prototype)，但请注意，对 Button.prototype 的更改不会反射(reflect)在已创建的 btn 中。

Button.prototype = {test: function () {console.log('invoked');}}