JavaScript: Which way to create a new object type

Question

I'm writing some JS at the moment but I'm not shure how to create a object in JS... On many sites i found many answers but which one should be use? For the first, I'm thinking there is no different. But i hope some of you can tell me more.

Here the three ways:

// Way 1
var SomeObject = {
    foo: "bar",
    bar: "foo",
    someMethod: function() {
        //code
    }
};

// Way 2
var SomeObject = function() {
    var self = this;

    this.foo = "bar";
    this.bar = "foo";

    this.someMethod = function() {
        //code
    }
}


// Way 3
var SomeObject = function() {
    var self = this;

    this.foo = "bar";
    this.bar = "foo";
}

SomeObject.prototype.someMethod = function() {
    //Code
}

var obj = {} or var obj = new Object() to give you some more possibilities — Simon Schüpbach
– Simon Schüpbach, Commented Apr 23, 2016 at 19:34

Falstaff · Accepted Answer · 2016-04-23 19:48:17Z

2

The first way is called an object literal. The second and third ways are the same, and called function objects. In JavaScript functions are objects, and way 2,3 above are only different in their implementation of the someMethod() method, not in the object definition/implementation. You can also use var newObj = Object.create(Object.prototype) where newObj will inherit the Object.prototype. What is the best . . . Douglas Crockford says that Object literal declaration is the best because its more readable and compact.

Also, maybe you already know this, but you only need to create var self = this if you are nesting functions.

answered Apr 23, 2016 at 19:48

Falstaff

435 bronze badges

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

Comments

trincot · Accepted Answer · 2016-04-23 20:00:51Z

2

The three are different:

The first object has property foo, while way 2 and 3 have not. The latter are constructors that can make objects that have the foo property.

Ways 2 and 3 are also different: way 2 is a constructor that delivers objects with the someMethod method, while way 3 doesn't. Way 3 will define that method one level up -- on the prototype.

Way | constructor | instance has 
    |             | own someMethod
----+-------------+---------------
 1  |    no       |    yes
 2  |    yes      |    yes
 3  |    yes      |    no

What to choose?

When you only need one object instance, a singleton, then way 1 is what you would probably do. As soon as you need more than one, way 1 is not advisable.

If your methods have lots of code, then way 3 is almost certainly what you would go for: you want to avoid to recreate that function for every object instance. On the other hand there is a slight overhead if a method is not defined on the object itself, but on the prototype. That having been said, JavaScript optimises code and might eliminate both these issues in so doing. But way 3 is the most OOP way to do it.

The downside of way 3 is that you don't have access to private members, such as self. If its code relies on this, then care must be taken that these methods are called on instances of that prototype (or are explicitly bound to such), or the result may be unexpected.

edited Apr 23, 2016 at 20:00

answered Apr 23, 2016 at 19:39

trincot

357k38 gold badges282 silver badges338 bronze badges

5 Comments

R3Tech Over a year ago

So if I'm using the third way and I have two objects from Type SomeObject and the method someMethod can access to self.foo. And it will only affect the first object if I'm calling objOne.someMethod()? If yes, I will use the third way. And if its better to create this.me = this instead of var me = this? I read that its a good way to create a self reference and use them in my methods because I could not be shure where this is refer to.

trincot Over a year ago

Like I wrote, in way 3 you cannot access self as it is a private member. So that is not possible. The object (this) that someMethod will act on is determined by the context of your call. Defining this.me = this does not help to avoid the this peculiarities, because you need this to access me then. If you have issues in getting this right, then way 3 will give you headaches. But if you have a good understanding of how this works, you can do anything with way 3.

PVL Over a year ago

Or just use Factory? This way you avoid problems down the road?

R3Tech Over a year ago

mmh damn, so maybe way 3 is not the best. For an example I have a move method which move an object by changing x and y and both are private.

trincot Over a year ago

Indeed, if x and y are private then you need to define methods on the object (not the prototype) to expose them, else you cannot access them via way 3. Way 2 will probably work best for you.

Collectives™ on Stack Overflow

JavaScript: Which way to create a new object type

2 Answers 2

Comments

What to choose?

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

What to choose?

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related