Chrome 不支持 Javascript 中的原型属性吗?

Question

这是我的代码：

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

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

Answer 1

Chrome已经定义了图像元素的x和y。由于您尚未将元素插入页面，因此其x和y将0。

在Chrome的控制台中，在至少包含一张图片的页面上运行此操作...

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

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

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

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

。，然后展开对象。

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

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

Answer 2

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

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

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

Answer 3

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

Image.prototype.hello = "hello";
var a = new Image();
a.hello; // Value is "hello";
a.hello = "goodbye";
a.hello; // Now it is "goodbye"

在Chrome的控制台中进行了测试。