Dynamically change prototype for JavaScript object

Question

My final task is to fully recover object previously saved using JSON. For now JSON only allows to recover data, but not behaviour. A possilbe solution is to create a new object (lets call it obj) and copy data from JSON-recovered-object to obj. But it doesn't look nice for me. What I am asking, is there a way to dynamically change object prototype in JavaScript?

It's how I solve problem at the moment (using self-made copy method):

(this code on JSFiddle)

function Obj() {
    this.D = "D";
    this.E = "E";
    this.F = "F";

    this.toString = function () {
        return this.D + " * " + this.E + " * " + this.F;
    };

    this.copy = function (anotherObj) {
        for (var property in anotherObj) {
            if (isDef(anotherObj[property]) && isDef(this[property])) {
                this[property] = anotherObj[property];
            }
        }
    }
}
;

$(document).ready(function () {
    var str = $.toJSON(new Obj());
    $("#result").append("<p>JSON: " + str + "</p>");
    var obj = new Obj();
    obj.copy($.parseJSON(str));
    $("#result").append("<p>Recovered obj: " + obj.toString() + "</p>");
});

function isDef(variable)
{
    return typeof variable !== undefined;
}

Community · Accepted Answer · 2017-05-23 11:45:17Z

4

There are easier methods provided by many popular JS libraries.

For example, if you are using jQuery, you might use the jQuery.extend() method instead of your copy function like so:

var obj = $.extend(new Obj(), $.parseJSON(str));

Forked jsFiddle here.

EDIT: Based on ideas from this question, I was able to get the restored object to have all the nested functionality as well, see the updated jsFiddle.

The core idea is to use prototypes instead of properties, and then make sure the object restored from JSON (which is just data) is the first parameter to $.extend():

function Obj2() {
    this.A = "A";
}
Obj2.prototype.toString = function() {
    return this.A;
};

function Obj() {
    this.A = new Obj2();
    this.D = "D";
    this.E = "E";
    this.F = "F";
}
Obj.prototype.toString = function() {
    return this.A.toString() + " * " + this.D + " * " + this.E + " * " + this.F;
};

var str = $.toJSON(new Obj());
$("#result").append("<p>JSON: " + str + "</p>");
var obj = jQuery.extend($.parseJSON(str), new Obj());
$("#result").append("<p>Recovered obj: " + obj.toString() + "</p>");

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Mar 6, 2012 at 8:07

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Denis Kulagin Over a year ago

Thanks. It's what I was looking for. It's a pity it doesn't work if there are object fields: jsfiddle.net/mr_goodcat/KfQrc/2

Denis Kulagin Over a year ago

UPDATE: It seems "deep copy" should be a solution, but I can't make it work in the behaviour part (data is recovered): jsfiddle.net/mr_goodcat/KfQrc/3

GregL Over a year ago

Yeah, I couldn't get that to work, either. Copying nested prototypes is tricky and beyond me at the moment.

Denis Kulagin Over a year ago

Yo! You did it! Thanks a lot. P.S. Seems it works the old way too: jsfiddle.net/mr_goodcat/KfQrc/6, so it only crucial to swap arguments to the extend method.

Denis Kulagin Over a year ago

CRITICAL UPDATE: seems that your solution is not working after all. By swapping arguments we recover behaviour and erase all JSON-recovered data as well(( jsfiddle.net/mr_goodcat/KfQrc/9

|

Collectives™ on Stack Overflow

Dynamically change prototype for JavaScript object

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related