In-depth analysis of apply, call, bind in JS, applybind

In-depth analysis of apply, call, bind in JS, applybind

In Javascript, Function is an object. This in the Function object is determined by the method in which the Function is called. Using apply, call and bind can change the point of this in the function object. before talking about the difference, we should 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.

Call method:

Syntax: call ([thisObj [, arg1 [, arg2 [, [,. argN])
Definition: call a method of an object to replace the current object with another object.
Note: The call method can be used to call a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by thisObj.
If the thisObj parameter is not provided, the Global object is used as thisObj.

Apply:

Syntax: apply (thisObj, array parameter)
Definition: apply a method of an object and replace the current object with another object.
Note: If the parameter is not of the array type, a TypeError is reported.

Bind:

EcmaScript5 extends the bind method (which is not supported by IE6, 7, and 8). bind is similar to call. For example, acceptable parameters are divided into two parts, the first parameter is used as the this object in the context of the function during execution. There are two differences:
① The return value of bind is a function; ② there are also differences in the use of parameters following bind;

Let's take a look at Example 1:

 

function add(a, b) {  alert(a + b);}function sub(a, b) {  alert(a - b);}

For call, it can be used as follows:
Add. call (sub, 3, 1); Result 4

For, apply, this can be used;
Add. apply (sub, [3, 1]); the result is 4.

For bind, it can be used as follows:
Add. bind (sub) (3, 1); Result 4

The output results are the same, but the parameter passing usage is different;

Let's look at Example 2:

Function jone (name, age, work) {this. name = name; this. age = age; this. work = work; this. say = function (msg) {alert (msg + ", my name is" + this. name + ", I am this year" + this. age + "years old, I am" + this. work)} var jack = {name: "jack", age: '24', work: "student"} var pet = new jone (); pet. say. apply (jack, ["welcome"]) console. log (this. name)

For call, you need:
Pet. say. call (jack, "Welcome! ")

For apply, you need:
Pet. say. apply (jack, ["Welcome! "])

For bind, you need:
Pet. say. bind (jack, "welcome ")()

Output console. log (this. name) and find that this. name is jack, and the context of this has changed;

The above in-depth analysis of apply, call, and bind in JS is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for the customer's house.