Why is JavaScript bind() necessary?

by

Why is JavaScript bind() necessary?

The value of this is determined by how a function is called. If it is you who calls the function then there is usually no need to use .bind, since you have control over how to call the function, and therefore its this value.

However, often it is not you who calls the function. Functions are passed to other functions as callbacks and event handlers. They are called by other code and you have no control over how the function is called, and therefore cannot control what this will refer to.

If your function requires this to be set to a specific value and you are not the one calling the function, you need to .bind the function to a specific this value.

In other words: .bind allows you to set the value of this without calling the function now.

Here is comparison of referring to/calling functions:

                    +-------------------+-------------------+
                    |                   |                   |
                    |      time of      |       time of     |
                    |function execution |    this binding   |
                    |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|  function object  |      future       |      future       |
|         f         |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|   function call   |       now         |        now        |
|        f()        |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|     f.call()      |       now         |        now        |
|     f.apply()     |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|     f.bind()      |      future       |        now        |
|                   |                   |                   |
+-------------------+-------------------+-------------------+

I’m also wondering why example 3 solves the issue and the difference between example 2 and 3.

Example 1/2 and 3 couldn’t be more different. storeMyName and storeMyName2 contain functions, which are called in the future, whereas storeMyName3 contains the result of calling myName.getName() at that moment.

Further reading material:

More Related Contents:

  1. When you pass ‘this’ as an argument? [duplicate]
  2. How do I use ‘this” keyword in an object literal? [closed]
  3. How to access the correct `this` inside a callback
  4. What is the use of the JavaScript ‘bind’ method?
  5. What’s the difference between ‘$(this)’ and ‘this’?
  6. jQuery how to bind onclick event to dynamically added HTML element [duplicate]
  7. Javascript setInterval and `this` solution
  8. Preserving a reference to “this” in JavaScript prototype functions [duplicate]
  9. Javascript “this” pointer within nested function
  10. “this” keyword in event methods when using JavaScript prototype object
  11. How do I pass the this context to a function?
  12. Set “this” variable easily?
  13. ‘this’ does not work properly in another event. I’m clueless as to why [duplicate]
  14. How does the “this” keyword work, and when should it be used?
  15. How to handle lack of JavaScript Object.bind() method in IE 8
  16. requestAnimationFrame with this keyword
  17. this value in JavaScript anonymous function
  18. this is undefined inside arrow function
  19. JS Object this.method() breaks via jQuery
  20. How to reference the caller object (“this”) using attachEvent
  21. What is context in _.each(list, iterator, [context])?
  22. ‘this’ keyword, not clear
  23. What object javascript function is bound to (what is its “this”)?
  24. The reason to use JS .call() method?
  25. onClick Function “this” Returns Window Object
  26. Why is it necessary to use bind when working with ES6 and ReactJS?
  27. Javascript scope addEventListener and this
  28. JavaScript this refers to window instead of object inside function
  29. How to bind methods when destructuring an object in JavaScript?
  30. addEventListener, arrow functions, and `this` [duplicate]

Leave a Comment