访问 JavaScript 中 __defineGetter__/__defineSetter__ 隐藏的属性

Question

我正在尝试为 innerHTML 属性定义一个自定义设置器。不幸的是，在定义 setter 函数后，我无法访问底层属性：

$('body')[0].__defineSetter__("innerHTML",
  function (val) {
    alert("Setting to: " + val);
    this.innerHTML = val;
});

此代码片段填充了调用堆栈，因为赋值会递归调用 setter。 显然 innerHTML 已经是 IE8 中的重载属性，您可以简单地保存旧的 get/set 对并在新的属性描述符中使用它。摘自 MSDN：

var innerHTMLdescriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
Object.defineProperty(Element.prototype, 'innerHTML',
  { set: function(htmlVal) {
      var safeHTML = toStaticHTML(htmlVal);
      innerHTMLdescriptor.set.call(this, safeHTML);
    }
});

然而，Chrome 似乎并非如此，其中 getOwnPropertyDescriptor 返回 innerHTML 的未定义。在这种情况下，我如何访问底层属性？

附加问题：如何确保将来创建的所有对象都具有这种特殊的 innerHTML 行为？是否可以使用 DOM 原型来实现此目的？看来重载函数不是我这里所需要的。也许可以重载 DOM 构造函数并添加调用 __defineGetter__/defineProperty 但看起来对构造函数的支持并不常见，所以我想知道是否有任何替代方案。

Answer 1

您所需要的只是一个单独的数据存储属性来存储实际值，就像使用 getter 和 setter 的其他语言一样。您可以使用闭包来隐藏它们。

var _innerHTML = "";

this.__defineSetter__( "innerHTML",
    function (val) {
        alert("Setting to: " + val);
        _innerHTML = val;
    } );

this.__defineGetter__( "innerHTML",
    function () {
        return _innerHTML;
    } );

但是，我发现在现有 DOM 属性上使用 getter 和 setter 通常不起作用，因为这些属性在内部进行了特殊处理。例如，它不适用于文本输入的 value 属性。我希望 innerHTML 也会有同样的情况。