覆盖innerHTML属性访问

Question

我正在寻找一种在DOM元素上启用setter方法的方法。因此，基本上我想拦截对该特定属性的所有调用。我尝试在特定的DOM元素上定义get / set属性，但这并没有太大帮助：

(function(object, property) {
    var __value;
    Object.defineProperty(object, property, {
        // Create a new getter for the property
        get: function () {
            console.log('access gettter');
            return __value;
        },
        // Create a new setter for the property
        set: function (val) {
            __value = val;
        }
    })
})(document.body, 'innerHTML');

其结果是调用：

document.body.innerHTML = 'testValue';

是：

document.body.innerHTML
 access gettter
"testValue"

但这对页面没有任何影响，我的意思是页面的主体没有更改，只返回了闭包内部的私有变量的值。有没有办法在JavaScript中实现此功能？

Answer 1

是的，可以这样做。这是工作形式的代码：

(function(object, property) {
    var ownObjectProto = Object.getPrototypeOf(object);
    // exit if bad property
    if (!object[property]) {
        console.error(property + " is not a property of " + object.toString());
        return;
    }

    while (!Object.getOwnPropertyDescriptor(ownObjectProto, property)) {
        ownObjectProto = Object.getPrototypeOf(ownObjectProto);
    }

    var ownProperty = Object.getOwnPropertyDescriptor(ownObjectProto, property);
    Object.defineProperty(object, property, {
        // Create a new getter for the property
        get: function () {
            console.log('access gettter');
            return ownProperty.get.call(this);
        },
        // Create a new setter for the property
        set: function (val) {
            return ownProperty.set.call(this, val);
        }
    })
})(document.body, 'innerHTML');

您实际上并没有在这里替换set和get函数，但是可以对其进行扩充。认真地说，除非有特别需要，否则您不应该使用它，并且您确实知道自己在做什么。如果使用不当，您可能真的会弄乱页面上插件的功能，或者造成其他意外后果。

我在这里还有一个游乐场小提琴： jsfiddle