How the JavaScript this keyword works?

Question

I have been doing some JavaScript development and I encountered this problem. Consider the following code

var obj = {};
obj.bind = function () {
console.info(this);
};

obj.bind();

I'm running the code on the FireBug JavaScript console. The expected result is that this displays a reference to the object in the console.

It actually displays undefined.

But, when I make this change to my code

var obj = {};
obj.bind = function () {
this.x = 'x';
console.info(this);
};

obj.bind();

Now the console displays the expected value of this, which is a reference to the obj object.

Why does this happen?

I tried the first example in Chrome's developer console and it displayed the object as you expected. Perhaps this is a bug in Firebug? — user1114
– user1114, Commented Jul 13, 2011 at 1:24
The console can lie about a few things, keep that in mind. An example is deleting variables with delete. Works in the console, not outside. — alex
– alex, Commented Jul 13, 2011 at 1:25
@Jeremy No it doesn't. It displays 'undefined'. Chrome displays the object, but that's because Chrome does, and not because of the 'console.info' function. Look under the object and you'll find the undefined word. — Omar Abid
– Omar Abid, Commented Jul 13, 2011 at 1:34
@Omar You're incorrect. Append some string to this before writing it out in in obj.bind to confirm this yourself. I think the undefined it displays is the return value of the obj.bind() call. — user1114
– user1114, Commented Jul 13, 2011 at 1:38

user113716 · Accepted Answer · 2011-07-13 01:41:39Z

3

undefined is the return value of the function, which you'll get because you're not returning a value explicitly.

In both Chrome and Firebug, it correctly displays the Object in the console before the return value undefined.

So if you do:

var obj = {};
    obj.bind = function () {
    console.info(this);
    return "foo";
};

obj.bind();

...you should see something like:

Object {   }
"foo"

If Firebug is not displaying the Object when it is empty, you may need to check to make sure you're using the most current version.

answered Jul 13, 2011 at 1:41

user113716

323k64 gold badges454 silver badges441 bronze badges

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

Comments

Charlie Flowers · Accepted Answer · 2011-07-13 01:44:35Z

-1

In your example, "this" should be obj, just as some commenters pointed out. Here are the details that explain why --

In Javascript, the value of "this" changes depending on how you call the function:

When a function is stored as a property on an object, and you invoke that function by calling obj.foo(), "this" will be obj.

EX:

var obj = {
  x: 1,
  increment: function() {
    this.x = this.x + 1;
};

obj.increment(); // Makes "this" be obj

When you invoke a function using syntax that does not refer to any owning object, "this" will be the global environment.

EX:

function someFunc(a, b) {
     return a + b; // If you were to refer to "this" here, it would be the global env.
}

someFunc(5, 6);

When you invoke a function as if it were a constructor by using the new operator, a new object will be instantiated for you, and "this" will point to that new object.

EX:

function SomeConstructor() {
   this.x = 42; // under the hood, a new object was instantiated for you, and "this" was set to it.
}

var result = new SomeConstructor(); // note the "new" keyword

// result will be { x:42 }

When you use call() or apply(), you can control what "this" is.

(No example here since it's fairly far from your question. Look up docs for apply() or call() for an example.)

answered Jul 13, 2011 at 1:44

Charlie Flowers

17.5k10 gold badges74 silver badges89 bronze badges

2 Comments

RobG Over a year ago

Except in ES5 strict mode, where if this does not resolve to an object, it is left as–is, it is not set to the global object as it would be otherwise (ES5 §10.4.3).

Charlie Flowers Over a year ago

Anybody want to explain the downvote? I sure don't see what's wrong, but if something is, I'd like to fix it.

Collectives™ on Stack Overflow

How the JavaScript this keyword works?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related