javascript - Chrome 不支持 Javascript 中的原型(prototype)属性吗？

Question

这是我的代码:

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。有什么办法解决这个问题吗？我喜欢这个解决我当前问题的方法..

Answer 1

Chrome 已经在图像元素上定义了 x 和 y。由于您尚未将该元素插入到页面中，因此它的 x 和 y 将为 0。

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

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

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

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

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

...然后展开对象。

x 和 y 属性是不可变的，无法更改，因此当您尝试修改它们时它们会保留它们的值(就好像它们的 writable 是 假)。

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