Binding a function to an object and

A function can be bound to an object so that it always has the same this , regardless of the context of the call.

This is convenient for passing a function as a parameter, so as not to transmit an object reference with it.

For example, consider the loss of context that we encountered in the chapter on timers: calling setTimeout(user.sayHi, 1000) will run the user.sayHi function in a global context, does not save this :

  function User() { 
    this .id = 1; 

    this .sayHi = function () { 
      alert( this .id); 
   };  
 }  

  var user = new User(); 

 setTimeout(user.sayHi, 1000); // выведет "undefined" (ожидается 1) 

The problem, of course, is not only in the specific id property, but in the fact that, since this is not passed, you cannot refer to other properties of the object from the method.

The easiest way to get around this is to make a call through a wrapper:

 // анонимная фунция-обёртка  
  setTimeout( function () { 
   user.sayHi();  
 }, 1000);  

But is this the only solution? What now - with each such call to wrap user.sayHi ?

..Of course not. You can bind the context to a function, so that it will always be fixed. And how - we will see

Snap through closure

The easiest way to bind a function to the correct this is ... Do not use this !

For example, to access an object from a function via a closure:

  function User() { 
    this .id = 1; 

    var self = this ;    // сохранить this в замыкании  

    this .sayHi = function () { 
     alert( self.id );  
   };  
 }  

  var user = new User(); 

 setTimeout(user.sayHi, 1000); // выведет "1" (ура, работает) 

Since the function was “weaned off” from this , it can be safely passed anywhere. The context will be correct.

Modern `bind` method

In modern JavaScript, there is a bind method for binding functions. It is supported by most modern browsers, with the exception of IE <9, but is easily emulated.

This method allows you to bind a function to the desired context and even to arguments.

bind syntax:

var wrapper = func.bind(context[, arg1, arg2...])

func: Arbitrary function
wrapper: The wrapper function returned by the bind call. It calls func , fixing the context and, if specified, the first arguments.
context: The wrapper will call the function with the context this = context .
arg1 , arg2 , ...: If the arguments arg1, arg2... are specified - they will be added to each call of a new function, and they will be faced with those specified in the call.

The simplest example, we fix only this :

  function f() { 
    alert( this .name); 
 }  

  var user = { name: "Вася" }; 

  var f2 = f.bind(user); 

 f2(); // выполнит f с this = user 

Use in the constructor to bind the sayHi method to the object being created:

  function User() { 
    this .id = 1; 

    this .sayHi = function () { 
      alert( this .id); 
    }.bind( this ); 
 }  

  var user = new User(); 

 setTimeout(user.sayHi, 1000); // выведет "1" 

Importance: 4

What will this code output?

  function f() { 
    alert( this .name); 
 }  

  f = f.bind( {name: "Вася" } ).bind( {name: "Петя" } ); 

 f();  

Decision

Answer: "Вася" . "Вася"

  function f() { 
    alert( this .name); 
 }  

  f = f.bind( {name: "Вася" } ).bind( {name: "Петя" } ); 

 f(); // Вася 

The first call to f.bind(..Вася..) returns a "wrapper" that sets the context for f and passes the call to f .

The next call to bind will set the context already for this wrapper, this does not affect anything.

To make this easier to understand, use our own version of bind instead of the built-in one:

  function bind(func, context) { 
    return function () { 
      return func.apply(context, arguments); 
   };  
 }  

The code will be as follows:

  function f() { 
    alert( this .name); 
 }  

  f = bind(f, {name: "Вася" } ); // (1) 
  f = bind(f, {name: "Петя" } ); // (2) 

 f(); // Вася 

Here you can see that the first call to bind , in line (1) , returns a wrapper around f , which looks like this (highlighted):

  function bind(func, context) { 
    return function () { 
      return func.apply(context, arguments); 
   };  
 }  

In this wrapper, this is not used anywhere else, only func and context . Look at the code, there is no this anywhere.

Therefore, the next bind in line (2) , which is already running on the wrapper and fixes this in it, does not affect anything. What difference does it make as this in a function that does not use this this ?

[Open task in new window]

`bind` with arguments

The bind method can create a wrapper that captures not only the context, but also a number of arguments.

For example, there is a multiplication function mul(a, b) :

  function mul(a, b) { 
    return a * b; 
 };  

Based on it, we can create a double function that will double the values:

  function mul(a, b) { 
    return a * b; 
 };  

 // double умножает только на два  
  var double = mul.bind( null , 2); // первым аргументом всегда идёт контекст 

 alert( double(3) ); // 3*2 = 6 
 alert( double(4) ); // 4*2 = 8 

The call to mul.bind(null, 2) returned a wrapper that captures the context this = null and the first argument 2 . The context is not used in functions, so it does not matter what it is equal to.

The function is double = mul(2, *) .

You can also create a triple , triple value:

var triple = mul.bind( null , 3);

Carring

Creating a new function by fixing the arguments of an existing “scientific” is called currying.

For completeness, consider a combination of both bindings: context and arguments.

Let User objects have a send(to, message) method that can send a message to user. Let's create a function for sending messages to Petya from Vasya. To do this, we need to fix the context and the first argument to send :

  function User(name) { 
    this .toString = function () { 
      return name; 
   };  

    this .send = function (to, message) { 
      alert( this + ': ' + to + ', ' + message ); 
   };  
 }  

  var visitor = new User( "Вася" ); 
  var admin = new User( "Админ" ); 

 // создать функцию для пересылки сообщений от admin к visitor  
  var sendFromAdminToVisitor = admin.send.bind(admin, visitor); 

  sendFromAdminToVisitor( 'привет!' ); // Админ: Вася, привет! 
  sendFromAdminToVisitor( 'пока!' ); // Админ: Вася, пока! 

Why such a function may be needed? Well, for example, in order to pass it to setTimeout or any other place in the program, where it may be that users do not know anything, but need some function of one argument for messages. And this is quite suitable.

`bind` cross-browser emulation

For IE <9 and older versions of other browsers that do not support bind , you can implement it yourself.

Without the support of currying, it's very simple.

Here is our own bind bind function:

  function bind(func, context) { 
    return function () { 
      return func.apply(context, arguments); 
   };  
 }  

Its use:

  function User() { 
    this .id = 1; 

    this .sayHi = bind( function () { 
      alert( this .id); 
    }, this ); 
 }  

  var user = new User(); 

 setTimeout(user.sayHi, 1000); // выведет "1" 

Variant `bind` with currying

In order for the bind function to pass arguments, it needs to be "slightly" complicated:

  function bind(func, context /*, args*/ ) { 
    var bindArgs = [].slice.call(arguments, 2); // (1) 
    function wrapper() { // (2) 
      var args = [].slice.call(arguments); 
      var unshiftArgs = bindArgs.concat(args); // (3) 
      return func.apply(context, unshiftArgs); // (4) 
   }  
    return wrapper; 
 }  

Scary looks, right?

If interested, it works like this (in lines):

Calling bind saves additional args arguments (they come from the 2nd number) to the bindArgs array.
... and returns the wrapper wrapper .
This wrapper makes the arguments array from arguments and then, using the concat method, adds them to the bindArgs (3) arguments.
It then passes the call to func (4) .

The use is exactly as in the example above, only instead of send.bind(admin, visitor) call bind(send, admin, visitor) .

Option `bind` for methods

Previous versions of bind bind any function to any object.

But if you want to bind to an object not an arbitrary function, but one that is already in the object, i.e. its method, the syntax can be simplified.

Normal bind call:

var userMethod = bind(user.method, user);

Alternative syntax:

var userMethod = bind(user, 'method' );

Support for this syntax is easily embedded in a regular bind . To do this, it suffices to check the types of the first arguments:

In frameworks, as a rule, there are methods of bindings. For example, in jQuery this is $ .proxy, which works as described earlier:

  var userMethod = $.proxy(user.method, user); 
  var userMethod = $.proxy(user, 'method' ); 

... On the other hand, editors who support autocompletion do not like such “optimizations” very much. Say, if you try to automatically rename a method , they will be able to find it in the bind(user.method, user) call bind(user.method, user) , but they will not be able to in the bind(user, 'method') .

Total

Summary, shortened, bind code for binding a function or an object method:

  function bind(func, context /*, args*/ ) { 
    var args = [].slice.call(arguments, 2); 

    if ( typeof context == "string" ) { // bind(obj, 'method', ...) 
     args.unshift( func[context], func );  
      return bind.apply( this , args); 
   }  

    return function () { 
      var unshiftArgs = args.concat( [].slice.call(arguments) ); 
      return func.apply(context, unshiftArgs); 
   };  

 }  

Syntax: bind(func, context, аргументы) or bind(obj, 'method', аргументы) .

You can also use func.bind from modern JavaScript, if necessary, adding cross-browser emulation by the es5-shim library:

Binding a function to an object and carring: "bind / bindLate"

Snap through closure

Modern `bind` method

`bind` with arguments

`bind` cross-browser emulation

Variant `bind` with currying

Option `bind` for methods

Total

Comments

To leave a comment

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone

Binding a function to an object and carring: "bind / bindLate"

Snap through closure

Modern bind method

bind with arguments

bind cross-browser emulation

Variant bind with currying

Option bind for methods

Total

Comments

To leave a comment

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone

Modern `bind` method

`bind` with arguments

`bind` cross-browser emulation

Variant `bind` with currying

Option `bind` for methods