Have you ever look at the code of other developers and you see that sometimes they used
functionName.bind(this)
, functionName()
functionName.bind(this)
In this post, I gonna show you what is different between these approaches.
What is
bind(something)
Lets take a normal case:
var object = { getValue() { return 123; }, printValue() { console.log(this,this.getValue()); console.log(this.getValue()); } } object.printValue();
Result:

As you can see that, in the method
printValue
, the value for
this
is the it’s own object. It’s mean that when
printValue
need to access
getValue
method, it just call
this.getValue()
. But why the value is its own object? Since the method
printValue()
in invoked by
object.printValue()
. By other words
printValue()
is invoked in the context of the object. So
printValue
can easily access other properties, methods in the object
Now, what happen if we assign the method printValue to a button
var object = { getValue() { return 123; }, printValue() { console.log(this); console.log(this.getValue()); } } $("button").on("click",object.printValue);
When the button is clicked, this is the result:

Can you guess what is the problem? The value of
this
is not object anymore, it’s changed to the button who invoked that method. In consequence, we can’t access the method
getValue()
anymore. How can we solve this problem?
//Incorrect way $("button").on("click",object.printValue); //Correct way $("button").on("click",object.printValue.bind(object));
The difference is we call
bind(object)
before passing it to button event.
bind(object)
will tell to the browser that “Hey browser, I’m printValue function and I need to access object’s properties, method. So whenever I access
this
, could you please pass
object
as a value instead of the context I’m invoked (that is the button in this case)”.
Now you understand the responsibility of
bind(something)
. But this is not the only use case we need to use
bind(something)
. Let’s figure out
Use cases
setTimeout()
Let see what happen if we access
this
in setTimeout method
var object = { getValue() { return 123; }, printValue() { setTimeout(function() { console.log(this); console.log(this.getValue()); }); } }; $("button").on("click", object.printValue.bind(object));
The result we have is:

In this case the value for
this
inside setTimeout method is changed to
window
. It makes sense because the function inside
setTimeout
will be invoked under
window
context. So how can we resolve this problem by
bind()
Solution with
.bind()
var object = { getValue() { return 123; }, printValue() { var fn = function() { console.log(this); console.log(this.getValue()); }; setTimeout(fn.bind(this)); } };
var object = {
getValue() {
return 123;
},
printValue() {
var fn = function() {
console.log(this);
console.log(this.getValue());
};
setTimeout(fn.bind(this));
}
};
Method preference
we also have a trouble with
this
in method preference
var object = { getValue() { return 123; }, printValue() { console.log(this); console.log(this.getValue()); } }; var fn = object.printValue; fn();
Solution:
var object = { getValue() { return 123; }, printValue() { console.log(this); console.log(this.getValue()); } }; var fn = object.printValue.bind(object); fn();
Conclusion
I hope that via this post, you have learn what is the responsibility of
bind(something)
as well as learn one more way to deal with access
this
problem. From understanding it, you’re not confused when you see someone use
bind(something)
anymore. See you in the next post!