Introduction

JavaScript sets a value of the execution context, "this", during execution.
Use cases/mistakes
For an example, we use a Menu constructor, that should accept an element and create a menu on it’s base as in the following:
  1. function Menu(elem) {
  2. // ...
  3. }
  4. // Usage
  5. var elem = document.getElementById('Abhijeet') // a DOM element
  6. var menu = new Menu(elem)
Set Timeout
When you setup setTimeout, you may want it to reference the object:
  1. function Mymenu(elem) {
  2. setTimeout(function () {
  3. alert(this) // window, not menu!
  4. }, 1000)
  5. }
  6. new Mymenu(document.createElement('div'))
But this references the window because setTimeout always executes the function in the window context.
Private method / local function
A local function is often used as a private method.
A simple call to privateMethod() uses "this" as the window.
  1. function Mymenu(elem) {
  2. function privateMethod() {
  3. alert(this) // window, not menu!
  4. }
  5. // ... call private method
  6. privateMethod()
  7. }
  8. new Mymenu(document.createElement('div'))
Binding with "var abhi = this".
First, we can store a reference to "this" in the closure.
In the following example, "this" is copied to a new variable "abhi". This variable is then used instead of "this".
  1. function Mymenu(elem) {
  2. var abhi = this
  3. setTimeout(function () {
  4. alert(abhi) // object! (menu)
  5. }, 1000)
  6. }
  7. new Mymenu(document.createElement('div'))
Early binding
We could use a helper function, "bind", that forces this.
The following is an example of such a function. It accepts a function "func" and returns a wrapper that calls "func" withthis = "fixThis".
For example:
  1. function bind(func, fixThis) {
  2. return function () {
  3. return func.apply(fixThis, arguments)
  4. }
  5. }
Late binding
Late binding is a variation of a bind with slightly different behavior.
In short, it means “binding on-call time”, instead of “immediate binding”.
Late Binding in Action
To use late binding, we use "bindLate" instead of "bind".
For example:
  1. <!DOCTYLE HTML>
  2. <html>
  3. <body>
  4. <script>
  5. function bindLate(funcName, fixThis) { // instead of bind
  6. return function () {
  7. return fixThis[funcName].apply(fixThis, arguments)
  8. }
  9. }
  10. function Mymenu(elem) {
  11. this.Hello = function () { alert('Mymenu') }
  12. elem.onclick = bindLate('Hello', this)
  13. }
  14. function BigMenu(elem) {
  15. Mymenu.apply(this, arguments)
  16. this.Hello = function () { alert('BigMenu') }
  17. }
  18. new BigMenu(document.body)
  19. </script>
  20. Click here. I'm a BigMenu!
  21. </body>
  22. </html>