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 回答