CODEWITHSUNDEEP
javascriptdesign-patterns
user905864
user905864

Reputation:

Can you help me decide on this JavaScript design problem?

I have a code as follow in making an object:

var myObject = {
    Init: function() {
        // config anything here to initiate this object.
    };
}

Where myObject.Init() performs like a constructor of a class. I use this Init() to generalize the object to be initiated in a following factory pattern:

window[myObjectName].Init();

myObjectName is whatever name of the object to create.

Then again I have a 2nd choice to create an object, which is much more easier for me to actually turn the Init() into a some sort of a constructor like the code below:

var myObject = function() {
    // config anything here to initiate this object.
}

With the code above, I can simply create an object like the following:

window[myObjectName]();

and practically reduces myObject code on having Init() attached to it (and every other object I would do in the factory).

However the 2nd choice comes with a disadvantage I discovered, where I can't use this inside the object, that I actually have to explicitly use myObject to call things inside. For example:

var myObject = function() {
    myObject.doSomething(); // instead of this.doSomething();
}

Which concerns me a little on variable/object reference (please correct me if I'm wrong).

Any help on these choices' advantages and disadvantages? which do you prefer on both of these choices or can you suggest a better solution?

Thanks.

Upvotes: 2

Views: 84

Answers (4)

Tigraine
Tigraine

Reputation: 23668

The second way is actually the preferred one. this in JavaScript does not always refer to the current object. You usually keep a reference around to your object so that you don't have to rely on this.

Even when you write your code with the .Init function I as a caller can override your this by doing a 

window[myObjectName].Init.call(mynewthis);

In JavaScript the caller decides on what this will refer to.

Upvotes: 0

Guffa
Guffa

Reputation: 700572

Why not use a constructor function? Both approaches that you suggested requires the object to be created and stored before it can be initialised. You can do like this:

function MyObject() {
  this.x = 1;
  this.y = 2;
}

You use the new keyword to create the objects:

window[myObjectName] = new MyObject();

Another advantage with this is that you can use the prototype of the function to add methods to the objects that are created:

MyObject.prototype = {

  doSomething: function() {
    // do something
  }

  doMore: function() {
    // do more
  }

};

Upvotes: 3

pedrodg
pedrodg

Reputation: 115

Arly, in my uderstanding, you should definitely be able to use this.doSomething(). What is the error you're getting at that line of code?

Upvotes: 0

cwallenpoole
cwallenpoole

Reputation: 82048

There are a couple of different ways to create class structures in js. My personal preference, though is for something like your second example.

var MyClass = function() {
    // define local variables
    var x = 0;
    function doSomething()
    {
       return ++x;
    }
    function doSomethingTwice()
    { 
        doSomething(); 
        doSomething(); 
    }

    // basically an export section where variables are assigned "public names"
    this.doSomething = doSomething;
    this.doSomethingTwice = doSomethingTwice;
    // careful though, this next line WON'T WORK!
    this.x = x; // because this is an assignment by value, this.x will be 0 
                // no matter how many times you `doSomething`
};
var inst = new MyClass(); // the `new` keyword is imperative here
                          // otherwise `this` won't work right.

Upvotes: 1

Related Questions