I'm having an issue with Javascript object literals.

I would like to reference the object within one of the functions:

var Obj = {
    name : "Johnny",
    dumb : function() {
        alert(this.name);
    }
}

Sadly, the "dumb" function is an object as well. So, since dumb() has no 'name' property, it will return as undefined.

How do I get around this?

I'm having an issue with Javascript object literals.

I would like to reference the object within one of the functions:

var Obj = {
    name : "Johnny",
    dumb : function() {
        alert(this.name);
    }
}

Sadly, the "dumb" function is an object as well. So, since dumb() has no 'name' property, it will return as undefined.

How do I get around this?

• javascript

• 1 JSON is a data format that is a subset of JS object literal syntax. That isn't what you have (among many other things, it doesn't support functions) – Quentin Commented Jan 12, 2012 at 15:49
• But it works: jsfiddle/damirR/aF63T – DamirR Commented Jan 12, 2012 at 15:50
• 2 How do you call it? Obj.dumb() alerts Johnny for me. – Gumbo Commented Jan 12, 2012 at 15:51
• What problem are you having? How are you calling dumb? – gen_Eric Commented Jan 12, 2012 at 16:00

4 Answers 4

dumb is a method on your Obj object. When called, this will be set to Obj, and will alert "Johnny"

Try it out

var Obj = {
    name : "Johnny",
    dumb : function() {
        alert(this.name);
    }
}

Obj.dumb();

Your code is fine. The call to dumb should be:

Obj.dumb(); // "Johnny"

this in JavaScript is defined entirely by how a function is called, not where the function is defined. If you call a function via an object property, within the call this will refer to the object. So for instance, if you did this:

var f = Obj.dumb;
f(); // "undefined"

...then you get undefined (well, probably), because you haven't set any specific value for this. In the absense of a specific value, the global object is used. (window, on browsers.)

You can also set this by using the call or apply features of JavaScript functions:

var f = Obj.dumb;
f.call(Obj); // "Johnny"

The first argument to call (and to apply) is the object to use as this. (With call, any subsequent arguments are passed to the function, so f.call(Obj, 1); would effectively be Obj.dumb(1);. With apply, the second argument is an array to use as the arguments for the function, so f.apply(Obj, [1]); would effectively be Obj.dumb(1);.)

More reading:

• Mythical methods
• You must remember this

I think I'm missing the problem here. Your code works fine.

var Obj = {
    name : "Johnny",
    dumb : function() {
        alert(this.name);
    }
}
Obj.dumb();  // Alerts 'Johnny'

This is because dumb is called on Obj which is set to this.

EDIT: If you did the following, it would be undefined:

var x = Obj.dumb;
x(); // Alerts ''

This is because this is now window (as the function is not being called on Obj anymore).

You'd have to either .call:

var x = Obj.dumb;
x.call(Obj); // Alerts 'Johnny'

Or .bind (ECMAScript 5, meaning modern browsers only):

var x = Obj.dumb.bind(Obj);
x.call(); // Alerts 'Johnny'

Everything in JS is an object. this is not "the function being called" it is the object it is being called on (unless you use something like apply() to mess with that).

Obj.dumb();

will have this === Obj so this.name will resolve to "Johnny".

Just make sure you call Obj.dumb() and don't do something like:

// This won't work
var foo = Obj.dumb;
foo();

… as, while foo will be the same function as dumb, the context is different (and this will be the default object: window).