[Effective JavaScript note] 25th: Using the Bind method to extract a method with a definite receiver

js method and attribute value is a function, like a thing two kinds of address, such as potatoes, also called potatoes, a kind. As such, it is possible to extract the object's method as a function and then pass the extracted function directly to the higher order function as a callback function.

What is the higher order function?

Play a set of dolls game No, no play, nothing, I have not played.
That's roughly what it looks like.

Uh, well, that's the real thing.

is a function of a multi-level function, with a function as a parameter or a return value. A bit around, nothing to look at the above figure on the understanding. Want to know how to implement a simple please click here.
Well, the function is taken out, and the parameters of the higher-order function are passed in.
It is easy to forget to bind the passed in function to the current object, free accustomed to, no way, freedom is very important, but there is no bound object, you can not do anything. For example, without a girlfriend, you have to rely on the hands of the dead.

An example

Take a look at the following code to refresh your spirits.

var you={    gf:[],    add:function (s) {        this.gF.push (s);    },    all:function () {        return This.gF.join ("-");    }}

For example, you don't want to have one girlfriend at a time, and you want to have multiple contacts. ES5 's foreach method, which repeatedly calls the Add method (intercourse) on each source array (multiple girlfriends) element, can add multiple girls to your harem.

var girls=["Xi Shi", "Wang Zhaojun", "Mink Cicada", "Yang"];//according to the history of the appearance of the order, hehe Girls.foreach (you.add);

Think of the four beauties, come out and see.

You.all ();//error:cannot Read property ' push ' of undefined

There are people everywhere.
Because the recipient of You.add is not you (object). The receiver of the function depends on how it is called, and it is not called, but it is passed to the higher-order function, foreach. But the implementation of foreach uses global objects, and this time you add a girlfriend to the World (Window object) to find the GF attribute, because this GF is not undefined, so there is no push method, this error.
The problem has been found, where do the beauties go?

var girls=["Xi Shi", "Wang Zhaojun", "Mink Cicada", "Yang"];//according to the history of the appearance of the order, hehe Girls.foreach (you.add,you); You.all ();//"Xi Shi, Wang Zhaojun, sable cicada, Yang"

The perfect operation, is not to think of all beautiful.

anonymous functions

But not every higher-order function is as empathetic as foreach, providing a recipient of its callback function. What if you encounter a function that does not understand the amorous feelings? We can create a function that invokes an object method to run. Here's how.

var girls=["Xi Shi", "Wang Zhaojun", "Mink Cicada", "Yang"];//according to the history of the appearance of the order, hehe Girls.foreach (function (s) {    you.add (s);}); You.all ();//"Xi Shi, Wang Zhaojun, Diao cicada, Yang Yang"

Well, that's the way it's going to work out.

Bind method

NO, there is something to say, now bind method full-time, it is in the ES5 standard library only function method. The main function is to assign an object to the function as its receiver, and you can also understand that it is the specified object in the function. Now look at the above situation, how the Bind method solves:

var girls=["Xi Shi", "Wang Zhaojun", "Mink Cicada", "Yang"];//according to the history of the appearance of the order, hehe Girls.foreach (You.add.bind (You)); You.all ();//"Xi Shi, Wang Zhaojun, Marten Cicada, Yang"

How, is not very cow break. What's that bind all about? Here You.add.bind (you) generated a completely new function, this function behavior and you.add is consistent, but it will be dead, let go of the ground is you, the original function You.add receiver remains unchanged.

You.add===you.add.bind (you);//false

This allows you to share functions on many occasions. In particular, there is a prototype method with this keyword. As long as you use BIND, you never have to worry about this point. Do not store this with variables outside the scope.

var obj={    txt: ' Hello ',    sayhello:function () {       console.log (this.txt);    }} Document.body.onclick=obj.syahello.bind (obj);//"Hello"

Event bindings no longer have to worry about it.
The Bind method requires a compatible notation before ES5, please click to see more details.
The following is the book on the tip of the content, remember a little bit to benefit a lot of OH.

Tips

• Note that extracting a method does not bind the receiver of the method to the object of the method

• When passing an object method to a higher-order function, use an anonymous function to invoke the method on the appropriate receiver

• Use the Bind method to create a function bound to the appropriate receiver

Appendix: This time there is no appendix, the contents of this section, before all, did not introduce new knowledge points.

[Effective JavaScript note] 25th: Using the Bind method to extract a method with a definite receiver