2

这是我的代码：

Image.prototype.x = 0;
Image.prototype.y = 0;

var blankImage = new Image();
blankImage.src = "blank.png";
blankImage.x = 16;
blankImage.y = 16;

如果我这样做，在 Firefox 中blankImage.x它会返回 16，但在 Chrome 中它会返回 0。有没有办法解决这个问题？我喜欢这个解决方案来解决我当前的问题..

4

3 回答 3

5

Chrome 已经定义x了y图像元素。由于您还没有将元素插入到页面中，它的x和y将是0.

在至少有一张图片的页面上，在 Chrome 的控制台中运行它...

$$("img")[0].hasOwnProperty("x");

您将看到HTMLImageElement已经直接在其上拥有该属性，而不是在其prototype对象上。

如果您在控制台中输入它，您也可以直观地看到它...

dir($$("img")[0]);

...然后展开对象。

x和属性是不可变的y，无法更改，因此当您尝试修改它们时它们会保留其值（就像它们writable是一样false）。

如果您要对 a 上尚不存在的属性执行相同操作HTMLImageElement，它将按您的预期工作。

于 2012-07-02T01:58:47.813 回答
1

请注意，DOM Image 对象不是任何标准的一部分（它可能隐藏在 HTML5 中的某个地方，但我找不到它），它是一个 DOM 0 功能，在标准化时就存在于浏览器中，并且从那时起就一直保持兼容性.

浏览器不需要实现任何类型的继承方案，因此期望它们实现原型继承是不合理的。此外，许多浏览器并未在所有或任何 DOM 对象上实现原型继承。所以不要期望 DOM Image 对象有原型属性，或者原型对象上设置的属性会被 Image 实例继承。

文档：MDN：https ://developer.mozilla.org/en/DOM/Image MSDN 图像对象： http: //msdn.microsoft.com/en-us/library/dd757809 (v=vs.85).aspx#方法

于 2012-07-02T02:37:35.687 回答
0

不完全确定发生了什么，但我发现这取决于您设置的属性的名称，例如：

Image.prototype.hello = "hello";

var a = new Image();

a.hello; // Value is "hello";

a.hello = "goodbye";
a.hello; // Now it is "goodbye"

在 Chrome 的控制台中测试。

于 2012-07-02T02:00:45.427 回答