Question

在此处，在检查员的JS控制台中，通过Safari或Chrome或您拥有的内容尝试此操作。

var x = document.body.getBoundingClientRect();
> undefined

x.top;
> 0

x.top += 5;
> 5

x.top;
> 0

我曾期望getBoundingClientRect()生成的对象是可修改的对象。我刚才证明这是假的。它也不会与浏览器的状态保持同步，因此如果我稍微滚动页面，然后检查x.top的值，它仍会报告0，即使它现在应该是负值因为我向下滚动至少，如果我将x重新分配给getBoundingClientRect()，则会报告负值。

所以，它并没有回应我试图改变它，但似乎没有更高的目的来展示这种行为。

也许有某种干净的方式来解释这个？比 *耸肩*更好的东西就是它的作用。

Answer 1

根据https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect，

rectObject = object.getBoundingClientRect();
返回的值是TextRectangle对象，它是对象的并集 getClientRects()为元素返回的矩形，即CSS 与元素相关联的边框。

根据https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect，

返回的TextRectangle属性为只读。

此外，规范（http://www.w3.org/TR/cssom-view/#the-clientrect-interface）说

interface ClientRect {
   readonly attribute float top;
   readonly attribute float right;
   readonly attribute float bottom;
   readonly attribute float left;
   readonly attribute float width;
   readonly attribute float height;
};

Answer 2

getBoundingClientRect方法确实返回ClientRect object，其属性指定为只读。 这就是它的工作原理 :-)大多数浏览器都会将其实现为具有writable: false descriptor的属性（但不要相信这一点，主机对象可以任意实现）

此行为的更高目的是该方法将返回当前值的静态快照，该静态快照与 live DOM分离并对其进行更改。因此，返回的对象被冻结，并且分配给它没有意义 - 还有其他方法可以更改视图。

为什么某些JavaScript对象是神奇的？

2 个答案: