4

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?

4
  • 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) Commented Jan 12, 2012 at 15:49
  • But it works: jsfiddle.net/damirR/aF63T Commented Jan 12, 2012 at 15:50
  • 2
    How do you call it? Obj.dumb() alerts Johnny for me. Commented Jan 12, 2012 at 15:51
  • What problem are you having? How are you calling dumb? Commented Jan 12, 2012 at 16:00

4 Answers 4

8

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();
Sign up to request clarification or add additional context in comments.

Comments

6

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:

2 Comments

You can also use .bind: var f = Obj.dumb.bind(Obj); f(); :-)
@Rocket: True, at least on ES5 browsers (or if you use a shim).
1

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'

Comments

0

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).

1 Comment

"Everything in JS is an object." Not quite. Nearly everything, but we do have primitives (strings that aren't Strings, numbers that aren't Numbers).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.