Difference in js object instances

Question

I am new to this kind of stuff, i gone through several tutorials of js and i found this two type of coding standards of functions, shown below :

 return({
           error: function(message){
                     // Code here
            },
           debug: function(message){
                     // Code here
           }
       });

And another one like

 this.error = function(message){
    //Code Here

    };
    this.debug = function(message){
    //Code Here

    };
return this;

I am new in coding, so have a little idea about coding formats. Can you please explain a basic difference between above two snippets ?, but the usage of both are same .

They both assign `error` and `debug` properties, but one creates a new object for them via `{...}` while the other modifies an existing object via `this`. What effect that difference has depends on the surrounding context and value of `this`. Can you expand on your snippets? — Jonathan Lonowski, Jun 18 '14 at 04:53
They both don't use prototype, maybe it's time to read different tutorials: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Jun 18 '14 at 04:56
Not much difference in your two simple examples, but using the `new` operator and the prototype chain (which would be more compatible with the second option) enables things like more efficient method storage, easier inheritance, using `instanceof` to identify object types, having a public constructor function, etc... — jfriend00, Jun 18 '14 at 05:20

score 1 · Answer 1 · answered Jun 18 '14 at 04:42

1

They are pretty much the same.

The first returns an object literal from a function:

 app.factory('myFactory', function() {
    var var1 = 'a';
    var var2 = 'b';
    return  {
         method1: function() { ... },
         method2: function() { ... },
         property1: var1,
         property2: var2
    };
 });

The second returns a function that Angular will call like this: var fn = new MyFunction(); This is basically what a service is.

app.service('MyFunction', function() {
     var var1 = 'a';
     var var2 = 'b';
     this.method1 = function() { ... };
     this.method2 = function() { ... };
     this.property1 = var1;
     this.property2 = var2;
});

Services make use of the 'this' keyword because the function constructor is called (new MyFunction()).

Both are singletons, and both are injectable. As you can see there is little difference between the two.

answered Jun 18 '14 at 04:42

Michael Kang

52,003
16
103
135

Is any use ever made of the *prototype* chain available in the second case? Just curious, I'm not an Angularjs user. – RobG Jun 18 '14 at 04:48
I would think yes, although, i'm not a big fan of prototype, or knowledgable in it either – Michael Kang Jun 18 '14 at 04:49
RobG wasn't talking about the library called prototype, rather the prototype chain as it naturally occurs in JavaScript. – Ja͢ck Jun 18 '14 at 05:05
I'm unsure about that – Michael Kang Jun 18 '14 at 05:22
@pixelbits—ok, so elsewhere you'd declare or initialise *MyFunction* and setup the *MyFunction.prototype* methods, then do `app.service('MyFunction', MyFunction)`, i.e. use a function reference instead of a function epxression. – RobG Jun 18 '14 at 06:28
Once MyFunction is setup (like I have above), you could inject it into your controller function. app.controller('MyController', function($scope, MyFunction) { MyFunction.method1(); }); – Michael Kang Jun 18 '14 at 06:32

Juan Garcia · Answer 2 · 2014-06-18T04:56:40.857

Those are two different ways of implementing constructors in JavaScript. The difference is how you call the constructor.

In case of

function Foo(){
  return { bar : 1 } ;
} ;

you call create a new instance of the object by calling it as Foo() or new Foo() or X.Foo(). The constructor property will be however Object constructor.

But in case of

function Foo(){
  this.bar = 1 ;
  return this ;
} ;

it will return an object with constructor Foo when call it as new Foo(), it will return the global object when call it Foo() and you will have bar=1 in the global object, and it will return X when call it as X.Foo() if X has method Foo, and X will have bar=1 property

Difference in js object instances

2 Answers2