Javascript Object : Literal Vs Constructor

Question

For creating Javascript object, we can use Literal or Constructor way; In Constructor way, we say;

function myObj(){
this.myProp1 = "abc";
this.myProp2 = "xyz";
}

In literal way, we say;

var myObj = {
myProp1:"abc",
myProp2:"xyz",
}

My question is when declaring properties, why there is a difference like why do we use "this.myProp1" in case of Constructor way and not use "this" in Literal way ?

Solution 1

When defining something literally, the object is being built directly in the code. It doesn't exist yet until it is complete. At that point, this would have no meaning (not that there is any need for it either).

To understand this in the object creation function, first realize that this is special in JavaScript. Whenever you call a function, you can pass anything you want to be this. In general, things like event handlers will pass the event-causing DOM object to be passed as this. In your code, you do this as: MyFunction.call(whatever_needs_to_be_this[, param0, param1]);. When you use the new operator, such as var mything = new SomeThing();, JavaScript is essentially doing something like:

var mything = {};
SomeThing.call(mything);

this in this case is going to be mything in your function.

Solution 2

The key difference between the two is in how they are intended to be used. A constructor, as its name suggests, is designed to create and set up multiple instances of an object. An object literal on the other hand is one-off, like string and number literals, and used more often as configuration objects or global singletons (e.g. for namespacing).

There are a few subtleties about the first example to note:

When the code is executed, an anonymous function is created and assigned to myObj, but nothing else happens. methodOne and methodTwo don't exist until myObj is explicitly called.
Depending on how myObj is called, the methods methodOne and methodTwo will end up in different places:

myObj():
Since no context is supplied, the this defaults to window and the methods will become global.

var app1 = new myObj():
Due to the new keyword, a new object is created and becomes the default context. this refers to the new object, and the methods will get assigned to the new object, which subsequently gets assigned to app1. However, myObj.methodOne remains undefined.

myObj.call(yourApp):
This calls my myObj but sets the context to be another object, yourApp. The methods will get assigned to yourApp, overriding any properties of yourApp with the same names. This is a really flexible method that allows multiple inheritance or mixins in Javascript.

Constructors also allow another level of flexibility since functions provide closures, while object literals do not. If for example methodOne and methodTwo rely on a common variable password that is private to the object (cannot be accessed outside the constructor), this can be achieved very simply by doing:

var myObj = function(){
    var variableOne = "ABCD1234";

    this.methodOne = function(){
       // Do something with variableOne
       console.log(variableOne);
    };
    this.methodTwo = function(){
       // Do something else with variableOne
    };
};

myObj();

alert(variableOne); // undefined
alert(myObj.variableOne); // undefined

If you wanted to make variableOne exposed (public) you'd do:

var myObj = function(){
    this.variableOne = "ABCD1234";

    this.methodOne = function(){
       // Do something with variableOne
       console.log(this.variableOne);
    };
    this.methodTwo = function(){
       // Do something else with variableOne
    };
};

myObj();

alert(variableOne); // undefined
alert(myObj.variableOne); // ABCD1234