0

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

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]

我有点理解错误，因为我继承了原型，但我继承了new-ed元素（不直接作用于它），它在控制台中运行正常。谁能指出问题？

4

2 回答 2

2

你不能像这样创建 DOM 节点（而且你的原型设计不正确，你需要使用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];
}

尝试使用如下原型，但请注意更改Button.prototype不会反映在已创建btn的 s 中。

Button.prototype = {test: function () {console.log('invoked');}}
于 2012-12-22T18:40:46.807 回答
2

无论我是否在 Firefox 的开发者控制台中工作（btn.type = ...在线），我都会收到错误消息。

一般来说，不能保证宿主对象可以作为原型正常工作。从规范的§8.6.2：

所有对象都有一个名为 的内部属性[[Prototype]]。该属性的值是或者是null一个对象，用于实现继承。本机对象是否可以具有宿主对象[[Prototype]]取决于实现。

（我的重点）

显然在这种情况下，实现（Firefox 的 SpiderMonkey）不喜欢你这样做。

与其尝试使用宿主对象作为原型，您最好的选择可能是按照 Paul 在他的回答中提出的建议。（您的Button构造函数可以使用或不使用new，因为如果构造函数返回不同的对象，则创建的新对象将new被丢弃。）

于 2012-12-22T18:43:18.107 回答