introduce

Call function apply function bind function

role

Both are used to change the this direction of the function

usage

  • Call the function

You can take a number of arguments but the first argument must be the object to which this refers and the arguments after that can be separated by the argument comma

  • Code sample
let obj = {
    name: 'jack',
    age: 12,
}
function show(a, b) {
    console.log(this.name); // jack
    console.log(a); // mary
    console.log(b); // bob
}
show.call(obj, 'mary', 'bob');
Copy the code
  • The apply function

You take two arguments and the first argument is the object that this points to and the second argument is an array which is apply and all of the arguments have to go into the array

  • Code sample
let obj = {
    name: 'jack',
    age: 12,
}
function show(a, b) {
    console.log(this.name); // jack
    console.log(a); // mary
    console.log(b); // bob
}
show.call(obj, ['mary', 'bob']);
Copy the code
  • The bind function

The same way that call receives arguments but it returns a new function that will only be executed if it is called

  • Code sample
let obj = { name: 'jack', age: 12, } function show(a, b) { console.log(this.name); // jack console.log(a); // mary console.log(b); // bob } let show1 = show.bind(obj, 'mary', 'bob'); Show1 (); show1();Copy the code

A handwritten implementation of the call function

Code sample

Function.prototype.mycall = function(o){ if(typeof o ! = = 'object' | | o = = = null) {throw new Error (' please incoming object parameters'); } if(typeof this ! == 'function'){throw new Error(' if a function'); } let s1 = Symbol(); o.s1 = this; let args = [...arguments].slice(1); let result = o.s1(... args); delete o.s1; return result; }Copy the code

Analysis of the

  • 1 the direction of this problem

In this case, we add an s1 attribute to the object we pass in. Because the value of the attribute may duplicate other attributes in the object we pass in, we use Symbol to give the object a unique attribute and assign this to the attribute So in this case, the “this” refers to whoever called the function and when we call the myCall method the “this” refers to whoever

let obj = {
    name: 'jack',
    age: 12,
}
function show(a, b) {
    console.log(this.name); // jack
    console.log(a); // mary
    console.log(b); // bob
}
show.mycall(obj, 'mary', 'bob');
Copy the code

If this code is the show function calling mycall and this refers to the show function, then when we execute o.s1() we are actually calling show and because o is the object calling this in show, its this refers to O

  • 2 result(Function return value problem)

And then maybe the show function has a return value so we use the result value to receive and return that return value

  • 3 About objectss1Attribute problem

Finally, we delete the s1 property of O because o itself does not have this property and we imposed it on it so we have to delete it when we finally use it

Handwritten implementation of the Apply function

Since it’s the same idea as the call function, but with a little difference in passing arguments, I’m going to write it here without analyzing the code examples

Function.prototype.mycall = function(o){ if(typeof o ! = = 'object' | | o = = = null) {throw new Error (' please incoming object parameters'); } if(typeof this ! == 'function'){throw new Error(' if a function'); } if(! Array.isarray (arguments[1])){throw new Error(' second argument please pass an Array ')} let s1 = Symbol(); o.s1 = this; let result = o.s1(... arguments[1]);; delete o.s1; return result; }Copy the code

You can’t cut from the first item as you did above because in apply the second parameter must be an array and then it will be ignored if the second parameter is not an array and an error will be reported