Post
Ask Question

Binding in JavaScript

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>


Similar Articles