javascript - 覆盖 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"

但是这对页面没有任何影响，我的意思是页面的主体没有改变，只是返回了闭包中私有(private)变量的值。有没有办法在 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 函数，但您可以扩充它们。不过说真的，除非您有非常特殊的需要，并且您真的知道自己在做什么，否则您不应该使用它。如果使用不当，您可能真的会搞砸页面上插件的功能或任何其他意想不到的后果。

我这里还有一把 Playground fiddle :jsfiddle