Bind () Example in Function

In fact, the so-called bind is bound as the name suggests. The bind () method creates a new function. When the new function is called, its this value is the first parameter passed to bind (), and its parameter is bind () other parameters and their original parameters. In this case, many people may be confused. The following is an example of this article to introduce it in detail. Preface

Bind () accepts countless parameters. The first parameter is the this point of the new function generated by it. For example, if I upload a window, no matter where it is called, this in this new function points to window. The parameters of this new function are the second, third, and fourth of bind .... add the original parameter to the nth parameter. (All right, I have covered myself)

Example

Let's take a look at the chestnuts for better understanding. Let's take a look at the most basic usage of bind:

This. x = 9; var module = {x: 81, getX: function () {return this. x ;}}; module. getX (); // return 81 var retrieveX = module. getX; retrieveX (); // return 9. In this case, "this" points to the global scope // create a new function, bind "this" to the module object // newbie may be confused by the global x variable and the attribute x in the module. var boundGetX = retrieveX. bind (module); boundGetX (); // 81 is returned.

It is obvious that we call retrieveX under the window object, and the result is definitely x under the window object. We bound the module object to this of retrieveX, and the problem is solved, this is a module object no matter where it is called.

There are other bind () parameters, I believe that the first contact with bind () friends will see the above definition will be circled.

For example:

Function list () {return Array. prototype. slice. call (arguments);} var list1 = list (1, 2, 3); // [1, 2, 3] // create a function with preset initial parameters var leadingThirtysevenList = list. bind (undefined, [69,37], {a: 2}); var list2 = leadingThirtysevenList (); // [[69,37], {: 2}] var list3 = leadingThirtysevenList (1, 2, 3); // [[69,37], {a: 2}, 1, 2, 3]

The list function is very simple. Every input parameter is inserted into an array. We use bind () to set the initial value for the list function. because we do not need to change the point of this in the list, we directly pass undefined, starting from the second parameter, the value of the list function is to be passed in. The return values of list2 and list3 indicate everything.

I usually use bind () in combination with the setTimeout function, because when setTimeout is executed, this will point to the window object by default. Before using bind, I did this:

Function Coder (name) {var that = this; that. name = name; that. getName = function () {console. log (that. name)}; that. delayGetName = function () {setTimeout (that. getName, 1000) };} var me = new Coder ('jins') me. delayGetName () // delay one second to output Jins

Define a pointer that caches this on the top layer of the function, so that, no matter how it is called, that directs to the Coder instance, but it is always uncomfortable to define more variables.

Using bind () is much simpler:

Function Coder (name) {this. name = name; this. getName = function () {console. log (this. name)}; this. delayGetName = function () {setTimeout (this. getName. bind (this), 1000) };} var me = new Coder ('jins') me. delayGetName () // delay one second to output Jins

In this way, we can directly bind the setTimeout this to the outer this, which is definitely what we want!