Today we are going to talk about the functions and differences of call, apply, and bind

call

Introduce the function of big Brother call

Call, apply, and bind are all used to change the direction of this in a function, so they all do the same thing. Let’s start with call

function fn() {
        console.log(arguments)
        console.log(this)
    }

    var obj = {
        f: fn
    }
Copy the code

If you run fn.call(obj, 4, 4, 4), this should point to the first parameter in parentheses after call. We need to make sure that this function is not an arrow function. The arrow function “this” points to its superior. — arrow function > call(apply,bind) >” point “then the parentheses except the first argument are passed in =====

“When the first argument is executed in a function, any argument pointing to the back of this is passed to the preceding function.”

Fn. call(obj, 4, 4, 4) returns 4, 4, 4 and obj!

Encapsulate a call of our own

Call, apply, bind, Function, call, apply, bind, call, apply, bind Since it’s in the prototype of Function, why don’t we? Hey, hey, hey! Encapsulate one? Seal it! Dubious!

Before encapsulation, add a little episode in ES6… Is the residual operator

let a = ['apple'.'banana'.'orange']; console.log(... a); //apple, banana, orangeCopy the code

That’s how it works!!

Start encapsulating!!

    Function.prototype.myCall = function(context, ... ary) { var key = Symbol() context[key] = this context[key](... ary) delete context[key] } fn.myCall(obj, 6, 6, 6)Copy the code

So that’s all we need to do. The context is its parameter, which is where we want this to point to… Ary is the argument that is deconstructed except for the first term

QQQ () : QQQ () : QQQ () : QQQ () : QQQ () : QQQ () : QQQ () : QQQ () : QQQ () : QQQ () : QQQ () : QQQ () Delete context[key] because then we’ll add a new property to the argument obj so we’ll delete it in order not to change it

It may seem like a waste of time to encapsulate a function that has the same functionality as Call, but we should also encapsulate a function that can be done with Call. Exercise your brain, too!

apply

Then we’ll introduce dick

The second argument is a set (array or class array),

fn.apply(obj, [6, 6, 6])

Just like call, the following parameter must be an array or an array of classes. This means that the array or an array of classes is automatically separated when passed in. So this is where Mr. Ao is introduced ha ha ha ha!

bind

Let’s introduce the youngest one

Are these three brothers triplets? Bind is used exactly the same way as call, except that instead of calling the function immediately, it returns a new function that, when executed, changes this to the specified object

Here’s a quick example:

var fn2 = fn.bind(obj, 6, 6, 6)
    fn2()
Copy the code

Let fn execute and change fn’s “this” to “obj” and pass fn 6, 6, and 6 to “this”

Let’s wrap up our own bind, okay?

Dubious! Come on! F sub n, let’s still use the above Austrian, let’s not write

    Function.prototype.myBind = function(context, ... arg) { var _this = thisreturn function(... ary) { _this.call(context, ... arg) } }Copy the code

Notice that ovar _this=this is the fn function that stores the return value of the call and then adds one more function to it so that it can run and then it can point this to the first parameter

There’s an easy way to do this:

Function.prototype.myBind=function(context,... arg){return(... ary)=>{ this.call(context,... arg,... ary) } }Copy the code

Instead of the arrow function, this will find it

At the end

Got it? I’ll run if I don’t. But Apply is already in trouble with me again, asking me why I don’t package a function for him with a 40m broadsword!!

I mean, what are we looking at here?