Confused about bind() in javascript

Question

I pulled the code below from this tutorial: tutorial

If you can bind this from a parent function to an anonymous inner function, then what do you do if you want to reference "this" in the anonymous inner function at some later time? Does "this" not exist for the anonymous inner function?

render: function () 
{

    this.getAsyncData(function () {

        this.specialFunction();

        this.anotherSpecialFunction();

    }.bind(this));

}

Answer 1

what do you do if you want to reference "this" in the anonymous inner function at some later time?

There is no way to refer to the value of this that the callback would have if we hadn't called .bind.

However, you don't have to use .bind, there are other ways to use the this value of the "parent" function: How to access the correct `this` context inside a callback?

Does "this" not exist for the anonymous inner function?

this is an implicit value in every function. Which value it has is determined by how the function is called, unless the function is explicitly bound to a certain value (via .bind).

For example, if you call a function "normally", such as func(), then this will refer to the global object (window in browsers). The API documentation usually explains which value this has inside a callback. If it doesn't mention anything explicitly, then you can assume that this refers to the global object, which is not very useful in most cases, and thus it is no problem to "override" it via .bind.
But even if this is set to a specific value in the callback, that value is often also passed as argument to the callback. Being able to access the value via this is just for convenience. But again, it depends on how the API is designed and is usually explained in the API documentation.

---

For more information about this, have a look at the MDN documentation.

Answer 2

The this context is set every time a function is called. If there is no context (as is the case with most callbacks), then this is lost.

It is more common to see:

var self = this;
// code using self instead of this here

The above is more browser-compatible due to .bind being relatively new.

Answer 3

When you have an anonymous callback, this usually refers to the window object. A good example is with setTimeout:

var someObject = {
    set: function() { /* ... */ },
    doSomething: function() {
        // right here, "this" is "someObject"
        setTimeout(function() {
            // whereas right here, "this" is "window"
        });
    }
}

A lot of people solve this conflict like this:

var someObject = {
    set: function() { /* ... */ },
    doSomething: function() {
        var that = this;

        setTimeout(function() {
            console.log(that) // => now it refers to "doSomething"
        });
    }
}

That's where bind comes into play.

See this jsfiddle:

var someObject = {
    set: function() { /* ... */ },
    doSomething: function() {
        setTimeout(function() {
            console.log(this) // => now it refers to "doSomething"
        }.bind(this));
    }
}

Edit

Felix Kling made a good comment on this answer. For this answer, I'm assuming you're calling someObject.doSomething(), and not calling the doSomething() method a different context.

Answer 4

If you can bind this from a parent function to an anonymous inner function, then what do you do if you want to reference "this" in the anonymous inner function at some later time?

You won't be able to, if you want to reference the outer this then set this to a variable and don't use bind.

var that = this;

Does "this" not exist for the anonymous inner function?

this always exists.

Simple example:

this.name = 'Bob';

function sayHello() {
  return ['Hello,', this.name].join(' ');
}

console.log(sayHello()); // "Hello, Bob"
console.log(sayHello.bind({name: 'Ana'})()); // "Hello, Ana"

http://jsbin.com/xibis/1/edit