How the JavaScript this keyword works?

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.

Bu开发者_如何学Ct, 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?

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.

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:

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

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

1. 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 }

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