Preserving a reference to “this” in JavaScript prototype functions [duplicate]

by

For preserving the context, the bind method is really useful, it’s now part of the recently released ECMAScript 5th Edition Specification, the implementation of this function is simple (only 8 lines long):

// The .bind method from Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available
  Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments),
        object = args.shift(); 
    return function(){ 
      return fn.apply(object, 
        args.concat(Array.prototype.slice.call(arguments))); 
    }; 
  };
}

And you could use it, in your example like this:

MyClass.prototype.myfunc = function() {

  this.element.click((function() {
    // ...
  }).bind(this));
};

Another example:

var obj = {
  test: 'obj test',
  fx: function() {
    alert(this.test + '\n' + Array.prototype.slice.call(arguments).join());
  }
};

var test = "Global test";
var fx1 = obj.fx;
var fx2 = obj.fx.bind(obj, 1, 2, 3);

fx1(1,2);
fx2(4, 5);

In this second example we can observe more about the behavior of bind.

It basically generates a new function, that will be the responsible of calling our function, preserving the function context (this value), that is defined as the first argument of bind.

The rest of the arguments are simply passed to our function.

Note in this example that the function fx1, is invoked without any object context (obj.method() ), just as a simple function call, in this type of invokation, the this keyword inside will refer to the Global object, it will alert “global test”.

Now, the fx2 is the new function that the bind method generated, it will call our function preserving the context and correctly passing the arguments, it will alert “obj test 1, 2, 3, 4, 5” because we invoked it adding the two additionally arguments, it already had binded the first three.

More Related Contents:

  1. Javascript: Do I need to put this.var for every variable in an object?
  2. Benefits of prototypal inheritance over classical?
  3. JavaScript: Class.method vs. Class.prototype.method
  4. prototype based vs. class based inheritance
  5. Understanding prototypal inheritance in JavaScript
  6. How do I pass the this context to a function?
  7. What does it mean that Javascript is a prototype based language?
  8. Set “this” variable easily?
  9. What is the ‘global’ object in NodeJS
  10. Preserve ‘this’ reference in javascript prototype event handler [duplicate]
  11. Javascript scope addEventListener and this
  12. How to set javascript private variables in constructor?
  13. I would like to ask how to explain this (javascript function)
  14. What’s the difference between using “let” and “var”?
  15. Javascript setInterval and `this` solution
  16. JavaScript closures vs. anonymous functions
  17. Anonymous class instance —- is it a bad idea?
  18. Class vs. static method in JavaScript
  19. Difference of the value, prototype and property
  20. ‘this’ does not work properly in another event. I’m clueless as to why [duplicate]
  21. Will const and let make the IIFE pattern unnecessary?
  22. How to call a parent method from child class in javascript?
  23. What does this “(function(){});”, a function inside brackets, mean in javascript? [duplicate]
  24. Why do catch clauses have their own lexical environment?
  25. Why is the variable `closed` being logged as `false`, if I define it globally as `0`?
  26. How to dynamically set a function/object name in Javascript as it is displayed in Chrome
  27. Global JavaScript Variable Scope: Why doesn’t this work?
  28. ES6 – Call static method within a class
  29. Duck Typing in Javascript
  30. Why does IE nuke window.ABC variables?

Leave a Comment