Making a new instance of a json javascript class?

Question

I've started writing a lot more javascript lately and am trying to do it all in the best way I can. Formatting my classes using JSON seems to be the cleanest way but I'm having trouble with something that seems like it should be really basic, but I just struggle to find the answer anywhere... perhaps merely from a lack of the right jargon!

So far I've been doing things in this method:

function foo(){
   this.bar = 'hello world';
   this.init = function(){
      alert('this.bar');
   }
}

crow = new foo();
crow.init();

And that all seems to work as I expect it to. When I lay out the object in JSON though I can't see to create a new instance of it, only a reference to the original which defeats the point of a lot of uses for me. What am I doing wrong here?

foo = {
   bar = 'hello world';

   init:   function(){
      alert(bar);
   }

}

foo.bar(); // This alerts 'hello world'

crow = foo ;
crow.bar = 'metal' ;
crow.init(); // Outputs 'metal'
foo.init(); // Also outputs 'metal'

Have I missed the point somewhere, is this the wrong approach or am I just doing it wrong?

you aren't creating a new copy, you are copying the reference to foo. — Daniel A. White
– Daniel A. White, Commented Nov 30, 2011 at 13:06
That's not JSON. JSON is a serialization format (i.e. a transport format) for data and as such it always is a string. What you talk about are JavaScript object literals – something that is only visually related to JSON. (apart from that your second sample is a syntax error and never outputs anything) — Tomalak
– Tomalak, Commented Nov 30, 2011 at 13:07
Hi guys. DanielA.White, that's the obvious part of it, but not very helpful! I realise that it's not classes strictly speaking but still very handy; @Tomalak so are you saying this isn't the way to approach things? If not, what should I be searching for for information? — Leonard
– Leonard, Commented Nov 30, 2011 at 14:14

chawkinsuf · Accepted Answer · 2017-06-01 20:57:49Z

4

If you want to define the functions in a class as an object you need to alter the prototype of the function. Here is an example from your code:

var foo = function() {}
foo.prototype = {
    bar: 'hello world',

    init: function() {
        alert(this.bar);
    }
};

var crow = new foo();
crow.bar = 'metal';
crow.init();

While it is essential to understand how this works if you are using javascript, John Resig has a small script that is fantastic for adding oop features in javascript. This addition allows a psedo-inheritance with the use of a constructor and super functions.

edited Jun 1, 2017 at 20:57

answered Nov 30, 2011 at 13:09

chawkinsuf

1,4011 gold badge14 silver badges14 bronze badges

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

2 Comments

Leonard Over a year ago

That looks exactly like what I've been looking for, cheers! Is there any known problems with this approach or is it a fairly standard way of approaching things?

chawkinsuf Over a year ago

This is a standard way for making a "class" in javascript. As another poster mentioned, the terminology between class, object and function gets a bit muddled in javascript. You can use the new keyword to instantiate a function as a "class" object. The prototype of the original function will be available to any instances in its original form and functions can use the this keyword to access a reference to the object that initiated the function call. When paramerters are changed using the this keyword, only the data in the individual instance is updated.

jabclab · Accepted Answer · 2011-11-30 13:12:12Z

0

If you're able to use jQuery in your project then you can use the extend method to achieve Object deep copying:

var original = { a: 123, b: "xxx" },
    copy = $.extend(true, {}, original);

The first input parameter of true means that the copy will be deep.

answered Nov 30, 2011 at 13:12

jabclab

15.1k5 gold badges57 silver badges51 bronze badges

Comments

Lyubomir.Rudko · Accepted Answer · 2011-11-30 13:18:06Z

0

All objects are copied by reference, so by doing

crow = foo ;

you'll get the reference to the same object. In order to create new object use function:

function apply(o, c){
    if(o && c && typeof c == 'object'){
        for(var p in c){
            if (c.hasOwnProperty(p) {
                o[p] = c[p];
            }
        }
    }
    return o;
};

than you can use it

var crow = apply({}, foo);

answered Nov 30, 2011 at 13:18

Lyubomir.Rudko

134 bronze badges

Collectives™ on Stack Overflow

Making a new instance of a json javascript class?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related