Are there lifecycle callback functions for javascript objects such as array & string

Question

Ok guys I've been messing about with prototypes for a while now and am not ready to give up on their usefulness just yet... despite heavy criticism!

I'm battling the age old problem of Object.prototype property inheritance in other objects such as arrays & strings. ie:

Object.defineProperty(
    Object.prototype, 'jsf',
    {get:function(){
        return JSON.stringify(this);
    }};
);

x = {abc: 123};
y = document.createElement('div');

If you're reading this page, and you are!, then you will know that because both x & y are objects, based on typeof x or y , both x & y will inherit the jsf property, ergo:

x.jsf = {"abc": 123}
y.jsf = Uncaught TypeError: Converting circular structure to JSON

Now I know there are various work-rounds like:

Object.defineProperty(y, 'jsf', {value: void 0});

And my favorite:

function Master_Object(){ this.jsf = JSON.stringify(this) }
function Master_Element(){ this.str = this.outerHTML }

Object.defineProperty(
    Object.prototype, 'ms',
    {get:function(){
        cons=this.constructor.name;
        if(cons=='Object')                  return new Master_Object();
            else if(cons=='HTMLDivElement') return new Master_Element();
    }}
);

Where every object only has 1 manageable custom property, .ms , and that property is an object containing properties specific to the objects constructor, thus:

x.ms.jsf = {"abc": 123}
y.ms.jsf = undefined

y.ms.str = <div></div>
x.ms.str = undefined

Favorite or not I don't want to have to type the prefix .ms , it's untidy and frankly in the way!

I've been playing with custom elements and I know about the life-cycle callbacks, and how they track the progression of an element...

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {...};
proto.attachedCallback = function() {...};

var XFoo = document.registerElement('x-foo', {prototype: proto});

Thing is I can't seem to translate these callbacks to be used on an object scope as opposed to an element scope?!

It would save me a lot of hassle if I could just write something along these lines:

Object.defineProperty(
    Object.prototype, 'createdCallback',
    {value: function(){
        var Proto_Clone = Object.create(Object.prototype);
        var cons = this.constructor.name;
        if(cons == 'Object'){
            Object.defineProperty(Proto_Clone,'...',{value:...});
        }
            else if (cons == ...)   ...;
        this.prototype = Proto_Clone;
    }}
);

The idea being that when an object is instantiated, a check is performed on it to ascertain it's constructor and if the said constructor is Object then it's prototype is changed to the modified Proto_Clone before it is parsed.

That way the original Object.prototype is never modified and there is no leakage of properties from one object to the next...???!!!

So what do YOU think ? Is it possible, and if so how?

Answer 1

You could use try/catch:

Object.defineProperty(
    Object.prototype, 'jsf',
    {get:function(){
        try {
            return JSON.stringify(this);
        } catch (e) {
            return undefined;
        }
    }};
);