CODEWITHSUNDEEP
javascript
Greg Gum
Greg Gum

Reputation: 38139

What is the difference between these two different ways of creating an object literal

Am just learning javascript coming from c#. I have seen two ways of creating an object. What is the difference between the two? They seem to do the same thing.

var myContact = {

    first: "greg",
    last: "gum",
    fullName: function()
    {
        return this.first + " " + this.last;
    }

}

alert(myContact.fullName());


var myContact2 = function () {

    this.first = "greg";
    this.last = "gum";
    this.fullName = function()
    {
        return this.first + " " + this.last;
    }
};

var aContact = new myContact2();

alert(aContact.fullName());

Upvotes: 2

Views: 114

Answers (3)

nem035
nem035

Reputation: 35501

JavaScript objects

  • Can be created via literals
  • Can be assigned to variables, array entries, and properties of other objects
  • Can be passed as arguments to functions
  • Can be returned as values from functions
  • Can possess properties that can be dynamically created and assigned

JavaScript functions

  • All of the above
  • Additionally, functions can be invoked

Since functions in JavaScript posses all of the capabilities objects posses and they are called first class objects.

Additional information:

There are four ways to invoke a function in JavaScript. The way you are using it here is invocation by constructor

When the function is called as a constructor via the new operator, its context is defined as the new object instance. This means that we can initialize values within the constructor function via the this parameter (in addition to attaching properties via the prototype).

var obj = function() { this.whatever = "hello"; } // 'this' refers to `obj`
var instance = new obj();
alert(instance.whatever);                         // alerts 'hello'

If we choose to do so, instance members created inside the constructor will occlude properties of the same name defined in the prototype. Binding operations within the constructor always take precedence over those in the prototype.

When a constructor is invoked, the following happens:

  • A new empty object is created.
  • This object is passed to the constructor as the this parameter, and thus becomes the constructor's function context.
  • In the absence of any explicit return value, the new object is returned as the constructor's value.

Other 3 JavaScript function invocations:

  • As a function

This type of invocation occurs when a function is invoked using the () operator, and the function context is the global context - usually the window object. For instance:

function example(){ return this; };
alert(example() == window); // invocation as a function (`this` is the global context)

  • As a method

Happens when a function is assigned to a property of an object and the invocation occurs by referencing the function using that property. That object becomes the function context and is available within the function via the this parameter. This is one of the primary means by which JavaScript allows object-oriented code to be written. For instance:

var example = {};
example.whatever = function(){ return this; };
alert(example == example.whatever()); // invocation as a method (`this` is the object to which this method belongs)

  • Via its apply() or call() methods

var context = {};
function example() {
    alert(this == context); // showing that we set the context
}

example.call(context);      // invocation using `call`

The only difference is that call() takes the function arguments as comma separated, and apply() takes the function arguments in an array.

Upvotes: 2

optimus
optimus

Reputation: 856

Method Invocation - A method JavaScript function stored in a property of an object. In method invocation the object becomes the invocation context, and the function body can refer to that object using the keyword this.

var myContact = {

first: "greg",
last: "gum",
fullName: function()
   {
    return this.first + " " + this.last;
   }
}

Constructor Invocation - If a function or a method invocation is preceded by the keyword new, then it is a constructor invocation. 

var myContact2 = function () {

this.first = "greg";
this.last = "gum";
this.fullName = function()
  {
    return this.first + " " + this.last;
  }
 };

If a constructor has no parameter, then argument list and paranthesis can be omitted. So these two are equivalent:

var aContact = new myContact2();
var aContact = new myContact2;

Upvotes: 2

Dave Pile
Dave Pile

Reputation: 5774

myContact is a single instance.

myContact2 you can create multiple instances.

You left out

var myContact3 = function(){

    return {
        first: "greg",
        last: "gum",
        fullName: function()
        {
            return this.first + " " + this.last;
        }
    };

};

:)

Which is the best of both worlds until you want a prototype function!

Upvotes: 0

Related Questions