preface

According to? Call,apply,bind Why do you want to learn this?

The environment used to specify this, before learning, usually has these problems.

var a = {
    user:"Wang Mou",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b(); //undefined
Copy the code

We want to print the user in object A and we want to print undefined. It works if we just execute a.fein ().

var a = {
    user:"Wang Mou",
    fn:function(){ console.log(this.user); } } a.fn(); / / Wang MouCopy the code

It prints because this is pointing to function A, so why doesn’t this point to function A?

Although this method works for our purposes, sometimes we have to save the object to another variable, so we can use the following method.

1, call ()

var a = {
    user:"Wang Mou",
    fn:function(){ console.log(this.user); }} var b = a.f; b.call(a);Copy the code

In the call method, you add the first parameter to the environment to which you want to add b. In short, this points to that object.

The call method can add multiple arguments in addition to the first one, as follows:

var a = {
    user:"Wang Mou",
    fn:function(e1,e2){ console.log(this.user); / / Wang Mou console. The log (e1 + e2); //3 } } var b = a.fn; The biggest all (a, 1, 2);Copy the code

2, the apply ()

The Apply method is similar to the call method in that it can also change the direction of this

var a = {
    user:"Wang Mou",
    fn:function(){ console.log(this.user); }} var b = a.f; b.apply(a);Copy the code

Apply can also have multiple arguments, but the difference is that the second argument must be an array, as follows:

var a = {
    user:"Wang Mou",
    fn:function(e1,e2){ console.log(this.user); / / Wang Mou console. The log (e1 + e2); //11 } } var b = a.fn; B.a pply (a, [10, 1]);Copy the code

or

var a = {
    user:"Wang Mou",
    fn:function(e1,e2){ console.log(this.user); / / Wang Mou console. The log (e1 + e2); //520 } } var b = a.fn; Var arr = [500]; b.apply(a,arr);Copy the code

Note that if the first argument to call and apply is written to NULL, this refers to the window object

var a = {
    user:"Wang Mou",
    fn:function(){ console.log(this); //Window {external: Object, Chrome: Object, document: document, a: Object, speechSynthesis: speechSynthesis... } } } var b = a.fn; b.apply(null);Copy the code

3, the bind ()

The bind method is a bit different from the call and apply methods, but either way they can be used to redirect this.

Let’s start with the differences.

var a = {
    user:"Wang Mou",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);
Copy the code

We find that the code is not printed. Yes, this is the difference between bind and call and apply. Bind actually returns a modified function.

var a = {
    user:"Wang Mou",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }
Copy the code

So let’s now execute function C and see if we can print out the user in object A

var a = {
    user:"Wang Mou",
    fn:function(){ console.log(this.user); }} var b = a.f; var c = b.bind(a); c();Copy the code

Ok, bind can also have multiple arguments, and the arguments can be added as they are executed, but note that the arguments are in the order of the parameters.

var a = {
    user:"Wang Mou",
    fn:function(e,d,f){ console.log(this.user); / / Wang Mou console. The log (e, d, f); //10 1 2 } } var b = a.fn; var c = b.bind(a,10); C (1, 2);Copy the code

conclusion

Bind returns the corresponding function for later call; Apply, call is called immediately.

  • This is true for Call
fun.call(xh,"Wang Mou"."Hangzhou");
Copy the code
  • This is true for Apply
fun.apply(xh,["Wang Mou"."Hangzhou"]);
Copy the code
  • So how does bind pass in parameters? It can pass arguments like call.
fun.bind(xh,"Wang Mou"."Hangzhou") ();Copy the code

But since bind still returns a function, we can pass arguments at call time.

fun.bind(xh)("Wang Mou"."Hangzhou");
Copy the code