javascript - 如何覆盖 HTMLElement 原型(prototype)上的 getter 函数

Question

自 Object.__defineGetter__()已被弃用 我正在尝试使用 Object.defineProperty()覆盖 HTMLSpanElement.prototype.offsetWidth 上的 getter 函数这样所有<span>当访问 offsetWidth 属性时，元素将返回相同的值。

这在 Firefox 28 和 IE 11 中工作得很好，但在 Chrome 33 和 34 中(也许其他版本也一样，我只试过这两个)defineProperty()似乎无法覆盖对象原型(prototype)的 getter。

这是我的代码，HTML:

<span id="testspan">The quick brown fox</span>

Javascript:

Object.defineProperty(HTMLSpanElement.prototype, "offsetWidth", {
    get: function(){return 5;},
    });

var x = document.getElementById("testspan");
window.alert( x.offsetWidth );

因此，无论何时访问 span 对象的 offsetWidth，它都应该返回 5。在 Firefox 28 和 IE11 中它工作正常。但在 Chrome 33 和 34 中，它返回 span 元素的实际宽度，在本例中为 126。根据 ECMA-262 v5 规范(相关章节 here)，假设我正确解释它，我应该 能够重新定义原型(prototype)的 getter 和 setter。我错过了什么吗？有人有任何 Chrome 34 的解决方法/技巧吗？

在 JSFiddle 上试试 here .如果已安装，请在 Chrome 和 Firefox 中尝试。

有人问了类似的问题here ，尽管 Scimonster 的建议在 Chrome 34 中不起作用。

Answer 1

修改属性

当属性已经存在时，Object.defineProperty() 会尝试根据描述符中的值和对象的当前配置修改属性。如果旧描述符将其可配置属性设置为 false(该属性被称为“不可配置”)，则除了可写之外没有任何属性可以更改。在那种情况下，也不可能在数据和访问器属性类型之间来回切换。

如此处所述:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

是的，从实例中删除 offsetWidth 将强制进行原型(prototype)检查并返回 5 :)