Examples explain the similarities and differences of call, apply and Bind methods in JavaScript _javascript skills

Take an example, explain the Call,apply,bind method in JavaScript, for everyone's reference, the specific contents are as follows

<! DOCTYPE html>
 
 

Why What's call,apply,bind doing? Why do you want to learn this?

This is generally used to specify the environment, which is usually problematic before it is learned.

var a = {
  User: "Dream child",
  fn:function () {
    console.log (this.user);
  }
}
var b = A.fn;
b (); Undefined

We want to print the user in object A and print it out. Undefined what's going on? It is ok if we execute A.FN () directly.

var a = {
  User: "Dream child",
  fn:function () {
    console.log (this.user);
  }
}
A.fn (); Chasing the son of a dream

This is able to print because, here's this point is function A, then why does the above point to a? If we need to know the point of this issue, please see a thorough understanding of this point in JS, do not have to hard back this article.

Although this approach can achieve our goal, but sometimes we have to save this object to another variable, then we can use the following methods.

1, call ()

var a = {
  User: "Dream child",
  fn:function () {
    console.log (this.user);//Chasing Dream Child
  }
}
var b = A.fn;
B.call (a);

In the call method, add the first argument to which environment to add B to, in simple terms, this will point to that object.
The call method can add multiple parameters in addition to the first parameter, as follows:

var a = {
  User: "Dream child",
  fn:function (e,ee) {
    console.log (this.user);//Chasing Dream son
    Console.log (e+ee);//3
  }
}
var b = A.fn;
B.call (a,1,2);

2, apply ()

The Apply method is somewhat similar to the call method, and it can also change the point of this

var a = {
  User: "Dream child",
  fn:function () {
    console.log (this.user);//Chasing Dream Child
  }
}
var b = A.fn;
B.apply (a);

Also apply can have more than one parameter, but the second argument must be an array, as follows:

var a = {
  User: "Dream child",
  fn:function (e,ee) {
    console.log (this.user); Console.log e+ee
    (//11);
  }
}
var b = A.fn;
B.apply (a,[10,1]);

Or

var a = {
  User: "Dream child",
  fn:function (e,ee) {
    console.log (this.user); Console.log e+ee
    (//520);
  }
}
var b = A.fn;
var arr = [500,20];
B.apply (A,arr);


Note If the first parameter of call and apply is NULL, then this refers to the Window object

var a = {
  User: "Dreamer",
  fn:function () {
    console.log (this);//window {external:object, Chrome:object, Document:document, A:object, Speechsynthesis:speechsynthesis ...}}
var b = A.fn;
B.apply (NULL);

3, bind ()

The Bind method is somewhat different from the call and apply methods, but it can be used to change the point of this, anyway.

Let's talk about their differences first.

var a = {
  User: "Dream child",
  fn:function () {
    console.log (this.user);
  }
}
var b = A.fn;
B.bind (a);

We found that the code was not printed, yes, this is the difference between bind and call, apply method, in fact the Bind method returns a modified function.

var a = {
  User: "Dream child",
  fn:function () {
    console.log (this.user);
  }
}
var b = A.fn;
var C = B.bind (a);
Console.log (c); function () {[native code]}

So let's do a function C now and see if we can print out the user in object A.

var a = {
  User: "Dream child",
  fn:function () {
    console.log (this.user);//Chasing Dream Child
  }
}
var b = A.fn;
var C = B.bind (a);
C ();

OK, also bind can have multiple arguments, and the parameters can be added again when they are executed, but note that the parameters are in the order of the formal parameters.

var a = {
  User: "Dream child",
  fn:function (e,d,f) {
    console.log (this.user);//Chasing Dream son
    Console.log (e,d,f); 1 2
  }
}
var b = A.fn;
var c = b.bind (a,10);
C (1,2);

Summary:call and apply are all changes in the context of this and immediately execute this function, the bind method can let the corresponding function when it is called, and can add the parameters at the time of execution, which is their difference, According to their own actual situation to choose to use.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.