CODEWITHSUNDEEP
javascript
JohnnyStarr
JohnnyStarr

Reputation: 629

JavaScript object reference

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?

Upvotes: 4

Views: 5847

Answers (4)

gen_Eric
gen_Eric

Reputation: 227310

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'

Upvotes: 1

Quentin
Quentin

Reputation: 944528

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075755

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:

Upvotes: 6

Adam Rackis
Adam Rackis

Reputation: 83376

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();

Upvotes: 8

Related Questions