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?

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?

• javascript
• json

• 1 you aren't creating a new copy, you are copying the reference to foo. – 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 Commented Nov 30, 2011 at 13:07
• javaScript by definition does not use classes – Piotr Kula Commented Nov 30, 2011 at 13:13
• 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 Commented Nov 30, 2011 at 14:14

3 Answers 3

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.

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.

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);