Understanding JS objects defined as functions vs not defined as functions

Question

Relative JS newbie here trying to understand the difference between two ways of defining a JS object...

In certain cases I have seen examples of what I would call "namespace" objects or "handlers" that might look something like this:

var example = {
  message: null,
  setup: function( message ) {
    example.message = message;
    alert( message );
  }
}

I might use something like this to group some related functions. If I were to call example('foo!') I would expect an alert message with foo! to appear, and thereafer if I called example.message I would expect it to return foo!.

My first question is: what is this kind of object (not defined as a function) called?

I use objects like this a lot in my sites, as handlers to setup a bunch of bindings for ajax interactions etc. I've been trying to learn about object-oriented javascript, and have been doing some reading (1,2). In the Mozilla docs it's suggested that objects should be defined as functions, so more like this:

var example = function( message ) {
    ....
}

My second question is: What is this kind of object (defined as a function) called?

I don't really understand the difference between the two so I'm having a number of issues, which raises question 3:

If you define an object as a function, how do you define properties on the object if you don't necessarily want them to execute when it is instantiated?

Ie. if I do this:

var example = function( message ) {
    alert('message');
}

Then I know that example('foo!') will trigger an alert with foo!. But, how do I define other properties or methods on the object to access and/or call later?

Sarfraz · Accepted Answer · 2012-04-22 19:48:07Z

6

My first question is: what is this kind of object (not defined as a function) called?

That is knows as object literal notation.

My second question is: What is this kind of object (defined as a function) called?

That is knows as function expression.

More Readings:

If you define an object as a function, how do you define properties on the object if you don't necessarily want them to execute when it is instantiated?

You can use this keyword to add properties or use prototype property like this:

var example = function( message ) {
    alert('message');
    this.hello = function(){
        alert('hello'); 
    }
}

Or

var example = function( message ) {
    alert('message');
}

example.prototype.hello = function(){ 
   alert('hello');
}

var e = new example('hello');
e.hello();

When using this, you need to use new keyword to instantiate the object.

Interested readings on OOP:

edited Apr 22, 2012 at 19:48

answered Apr 22, 2012 at 19:34

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

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

2 Comments

Andrew Over a year ago

This is extremely helpful, thank you! One minor subquestion, are there any major gotchas or tricky differences between object literal and function expression? Ie. since I'm used to using obj. literals is there anything I should be especially wary of if I try to use a function expression?

Lekensteyn Over a year ago

Perhaps worth noting, but if you omit new from e = new example, this in the example function refers to the global object (window).

Collectives™ on Stack Overflow

Understanding JS objects defined as functions vs not defined as functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related