Question

我想要将一个Elements默认属性（如innerHTML）作为备份添加到对象下，因为它不会污染Elements属性。所以，以帮助了解我想要实现的目标和当前的工作原理：

Element.prototype._backupPropertyDescriptors = {};
Element.prototype._backupProperties = {};

Element.prototype._backupPropertyDescriptors._innerHTML = Object.getOwnPropertyDescriptor(Element.prototype,'innerHTML');

//This is what I want to do but loses Elements scope:
Object.defineProperty(Element.prototype._backupProperties,'_innerHTML',Element.prototype._backupPropertyDescriptors._innerHTML);
//the scope has changed from element to _backupProperties so this property fails.

//The working version:
Object.defineProperty(Element.prototype,'_innerHTML',Element.prototype._backupPropertyDescriptors._innerHTML);

//the reason for this is I want to be able to manipulate the get and set such as:
Object.defineProperty(Element.prototype._backupProperties,'_innerHTML',{configurable:true,enumerable:true,get:function(){console.log('getting',this.innerHTML);return this.innerHTML},set:function(val){console.log('doing something here before setting');this.innerHTML = val;}});

这个问题就是一旦它在备份中，this语句就不再拥有该元素了...... 我知道这样做的一种方法是使用绑定或调用，但这仍然构成了我如何获得元素范围...在定义属性期间this是窗口..

Answer 1

所以对于任何想要尝试这样做的人来说，这里是我发现的解决方案:)可能是更好的东西，但这确实有效。在原型中只需要3个属性，然后所有其他属性都放在一个属性中。

Element.prototype._backupPropertyDescriptors = {};
Element.prototype._backupProperties = {};

Object.defineProperty(Element.prototype,'_backupProvider',
{
    writeable:false,
    enumerable:true,
    configurable:true,
    get:function()
    {
        var _backupProperties = this._backupProperties;
        _backupProperties._Element = this;
        return {_Element:this,_backupPropertyDescriptors:this._backupPropertyDescriptors,_backupProperties:_backupProperties};
    }
});
//These first ones set up the main provider and property and descriptor holders.

//then just copy a descriptor:
Element.prototype._backupPropertyDescriptors._innerHTML = Object.getOwnPropertyDescriptor(Element.prototype,'innerHTML');

//and assign it to a new property inside the backupProperties:
Object.defineProperty(Element.prototype._backupProvider._backupProperties,'_innerHTML',
{
    enumerable:true,
    configurable:true,
    get:function()
    {
        return this._Element._backupProvider._backupPropertyDescriptors._innerHTML.get.call(this._Element);
    },
    set:function(val)
    {
        console.log('setting html to: ',val);
        this._Element._backupProvider._backupPropertyDescriptors._innerHTML.set.call(this._Element,val);
    }
});

//and if you wanted to do something really crazy.... like overwrite the original..
Object.defineProperty(Element.prototype,'innerHTML',
{
    enumerable:true,
    configurable:true,
    get:function()
    {
        return this._backupProvider._backupProperties._innerHTML;
    },
    set:function(val)
    {
        console.log('setting html to: ',val);
        //do some crazy two way template binding here or something else crazy
        this._backupProvider._backupProperties._innerHTML = val;
    }
});

这就是全部..感谢@Bergi的帮助

更改原型元素集范围

1 个答案: