Usage of call (), apply (), bind () in javascript, applybind

Usage of call (), apply (), bind () in javascript, applybind

Call (thisObj, arg1, arg2. ..), apply (thisObj, [obj1, obj2...]) are the non-inherited methods included in each function.

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

The functions are the same. Simply put, it is to change the this point in the object currently using this method, pointing to the difference between the thisObj object in the call method (the first parameter is the same) that is, the parameters passed in the call method are listed one by one, and the parameter 2 in the apply method is an array

The examples are more intuitive:

Window. color = 'red'; var o = {color: "blue"}; function sayColor () {alert (this. color) ;}; sayColor (); // red (global function, this is window) sayColor. call (this); // red (call method, the specified object is this, here this is window, no meaning) sayColor. call (window); // red (call the call method and specify the object as window.) sayColor. call (o); // blue (call method, the specified object is o, so this refers to the object o, which points to o from the original window) sayColor. apply (o); // blue (call method, the specified object is o, so this refers to the object o, which points to o from the original window)

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

Example:

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

From the example, we can see that function a is bound to object o and a new function g is returned. When function a is called, function a is called as the method of object o.
Bind () is used to bind a function to an object and return a new function. All parameters passed in the new function will be passed in to the bound function.

Let's take a look at their differences.

In JS, these three are all used to change the point of this object of the function. What are their differences.
Before talking about the difference, let's summarize the similarities of the three:
1. They are all used to change the point of this object of the function.
2. The first parameter is the object to which this points.
3. You can use subsequent parameters to pass parameters.
So where are their differences? Let's look at an example first.
Var xw = {
Name: "Xiao Wang ",
Gender: "male ",
Age: 24,
Say: function (){
Alert (this. name + "," + this. gender + ", this year" + this. age );
}
}
Var xh = {
Name: "Xiaohong ",
Gender: "female ",
Age: 18
}
Xw. say ();
There is nothing to say. It must be Mr. Wang, male, 24 this year.

So how can we use the xw's say method to display xh data.

The call can be as follows:

Copy codeThe Code is as follows:
Xw. say. call (xh );

Apply can be like this:

Copy codeThe Code is as follows:
Xw. say. apply (xh );

For bind, the following is required:

Copy codeThe Code is as follows:
Xw. say. bind (xh )();

If you write xw. say. bind (xh) directly, there will be no results. Do you see the difference? Both call and apply are direct calls to functions, while the bind method returns a function. Therefore, you need to () to call the function later.
So what is the difference between call and apply? Let's rewrite the example a little.

Var xw = {name: "", gender: "male", age: 24, say: function (school, grade) {alert (this. name + "," + this. gender + ", this year" + this. age + ", on" + school + "+ grade) ;}} var xh = {name:" Xiaohong ", gender:" female ", age: 18}

We can see that there are two more parameters for the say method. We use the call/apply parameter to pass the parameter.
This is the case for call.

Copy codeThe Code is as follows:
Xw. say. call (xh, "Experimental Primary School", "sixth grade ");

This is the case for apply.

Copy codeThe Code is as follows:
Xw. say. apply (xh, ["Experimental Primary School", "sixth grade Zhengzhou psoriasis Hospital"]);

Do you see the difference? The parameters after the call correspond one to one with the say method, while the second parameter of apply is an array. The elements in the array correspond to the say method, this is the biggest difference between the two.
So how does the bind pass the parameter? It can pass parameters like a call.

Copy codeThe Code is as follows:
Xw. say. bind (xh, "Experimental Primary School", "sixth grade ")();

However, because the bind returns a function, we can still pass the parameter when calling it.

Copy codeThe Code is as follows:
Xw. say. bind (xh) ("Experimental Primary School", "sixth grade ");

The above is all the content of this article,