Talking about the use of call (), apply (), bind () in JavaScript

Talking about the use of call (), apply (), bind () in JavaScript

The use of Apply/call/bind in JavaScript has been vague, just to see this article. There is a clearer understanding of the differences and connections between the three. Here's a record and share it with you.

Call (Thisobj,arg1,arg2 ...), apply (Thisobj,[obj1,obj2 ...]) These two methods are non-inherited methods that are included in each function

Call (thisobj[, args]) and apply (thisobj[, args))

function is the same, in simple terms is to change the current use of this method in the object of this point, point to the calling method of the Thisobj object the difference between the two (the first argument is the same) is the call method passed in the parameters are enumerated, and the parameter in the Apply method is an array

Or an example to illustrate the more intuitive:

?

1 2 3 4 5 6 7 8 9 10

Window.color= ' Red '; var o={color: "Blue"}; function Saycolor () {alert (this.color);}; Saycolor (); Red (global function, this is window) Saycolor.call (this);//red (Invoke Call method, specify object is this, here is window, no point) saycolor.call (window) ;//red (Invoke the call method, specifying that the object is window, meaningless) Saycolor.call (o); Blue (Calling the call method, specifying that the object is O, so this refers to Object o, where the original window points to O) saycolor.apply (o);//blue (call method is invoked, the specified object is O, so this refers to object o, This is pointed to by the original window O)

The bind () method in ECMAScript5 is similar to the first two methods, and the bind () method creates an instance of a function that is bound to the value passed to the bind () function

Example:

?

1 2 3 4 5 6

function A (Y) {return this.x+y;}; var o={x:1}; var g=a.bind (o); g (2);//3

You can see from the example that function a binds to the object o, and returns the new function g, when called G, the A function is called as the object O method.

Bind () This method binds a function to an object and returns a new function in which the parameters passed in are passed on to the bound function.

Let's look at their differences.

In JS, these three are used to change the function of this object to point to, they have what kind of difference.

Before you say the difference, let's summarize the similarities between the three:

1, are used to change the function of this object to point to.

2, the first argument is the object to point to.

3, all can use the subsequent parameters to pass the parameter.

So where are their differences, first look at an example.

var XW = {

Name: "Xiao Wang",

Gender: "Male",

Age:24,

Say:function () {

Alert (THIS.name + "," + This.gender + ", this year" + this.age);

}

}

var xh = {

Name: "Little Red",

Gender: "Female",

Age:18

}

Xw.say ();

There is nothing to say in itself, the show is definitely Xiao Wang, male, 24 this year.

So how to use the XW say method to display the XH data.

For call you can do this:

Copy code code as follows:

Xw.say.call (XH);

For apply, you can do this:

Copy code code as follows:

Xw.say.apply (XH);

And for bind, you need this:

Copy code code as follows:

Xw.say.bind (XH) ();

If you write directly to Xw.say.bind (XH) There will be no results, see the difference? Call and apply are both direct calls to functions, and the Bind method returns a function, so you need to () to invoke it later.

So what's the difference between call and apply? Let's rewrite the example a little bit.

?

1 2 3 4 5 6 7 8 9 10 11 12-13

var XW = {Name: "Xiao Wang", Gender: "Male", Age:24, Say:function (school,grade) {alert (THIS.name + "," + This.gender + ", This year "+ This.age +", in "+ School +" + grade); } var xh = {name: "Little Red", Gender: "Female", age:18}

You can see that the say method has two more parameters, we pass the parameters of the call/apply.

For call, that's it.

Copy code code as follows:

Xw.say.call (XH, "Experimental Primary School", "Six Grade");

And for apply, that's it.

Copy code code as follows:

Xw.say.apply (xh,["Experimental Primary School", "six grade Zhengzhou Psoriasis Hospital"]);

See the difference, the argument behind call is one by one corresponding to the Say method, and the second argument to apply is an array, and the elements in the array correspond to one by one of the Say method, which is the biggest difference.

So how does bind get involved? It can be passed as call.

Copy code code as follows:

Xw.say.bind (XH, "Experimental Primary School", "Six Grade") ();

But since BIND is still returning a function, we can also invoke the argument at the time of the call.

Copy code code as follows:

Xw.say.bind (XH) ("Experimental Primary School", "Six Grade");

The above mentioned is the entire content of this article, I hope you can enjoy,