What do call, apply, and bind do in JavaScript? Why use them?-JS Tutorial-php.cn

What do call, apply, and bind do in JavaScript? Why use them?

伊谢尔伦

Release： 2017-07-20 14:15:03

Original

1324 people have browsed it

What do call, apply, and bind do? Why should we learn this?

is generally used to specify the environment of this. Before you learn it, you will usually have these problems.

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
b(); //undefined

Copy after login

We want to print the user in object a but why it prints out undefined? It is ok if we execute a.fn() directly.

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
a.fn(); //追梦子

Copy after login

You can print here because this here points to function a, so why doesn’t the above point to a? If we need to understand the pointing problem of this, please see the thorough understanding of this pointing in js

Although this method can achieve our purpose, sometimes we have to save this object to another In a variable, you can use the following method.

1. call()

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
b.call(a);

Copy after login

By calling the method, Add the environment to which b is added to the first parameter. Simply put, this will point to that object.

In addition to the first parameter, the call method can also add multiple parameters, as follows:

var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //3
  }
}
var b = a.fn;
b.call(a,1,2);

Copy after login

2. apply()

The apply method is somewhat similar to the call method. It can also change the pointer of this

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
b.apply(a);

Copy after login

Similarly, apply can also have multiple parameters, but the difference is that the second parameter must be an array, as follows:

var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //11
  }
}
var b = a.fn;
b.apply(a,[10,1]);

Copy after login

var a = {
  user:"追梦子",
  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);


//注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

Copy after login

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
  }
}
var b = a.fn;
b.apply(null);

Copy after login

3. bind()

The bind method is somewhat different from the call and apply methods, but no matter what Said that they can all be used to change the pointer of this.

Let’s first talk about their differences.

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
b.bind(a);

Copy after login

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

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }

Copy after login

Then let’s execute function c now to see if we can print out the user in object a

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
var c = b.bind(a);
c();

Copy after login

ok, bind can also have multiple parameters, and the parameters can be added again when executing, but it should be noted that the parameters are in the order of the formal parameters.

var a = {
  user:"追梦子",
  fn:function(e,d,f){
    console.log(this.user); //追梦子
    console.log(e,d,f); //10 1 2
  }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

Copy after login

Summary: call and apply both change this in the context and execute the function immediately. The bind method allows the corresponding function to decide when It depends on when to call it, and parameters can be added during execution. This is their difference. You can choose to use it according to your actual situation.

The above is the detailed content of What do call, apply, and bind do in JavaScript? Why use them?. For more information, please follow other related articles on the PHP Chinese website!