1. Implementation of call function

Function call, often used to assign this to the function binding and execute the function

Arguments: Accepts multiple arguments, the first of which is the this object to be specified

  • If no specified object is passed in, or the specified object isundefinedBy default, Windows is specified as the object to bind
var myObj = {
 name:'I'm a front-end bug developer siege lion'
}

function myFunc(name,age){
 console.log('argument.name===',name)
 console.log('this. Name: the age = ='.this.name,':',age)
}

Function.prototype.myCall = function(context){
 context = context || windows;
 context.fn = this;
 var args = [...arguments].splice(1.arguments.length- 1);
 varresult = context.fn(... args)delete context.fn;
 return result
}

myFunc.myCall(myObj,'Passerby a'.100)
Copy the code

The second edition

var myObj = {
 name:'I'm a front-end bug developer siege lion'
}

var name = 'global'

function myFunc(name,age){
 console.log('argument.name==',name)
 console.log('this.name:age=='.this.name,':',age)
}

Function.prototype.myCall = function(context){
 if(context && typeofcontext ! = ='object') {return Error('The first argument must be an object')
 }
 context = context || window;
 context.fn = this;
 var args = [...arguments].splice(1.arguments.length- 1);
 varresult = context.fn(... args)delete context.fn;
 return result
}

// muFunc. MyCall (myObj,' myObj ',100)
myFunc.myCall(123);

Copy the code

2. Implementation of apply function

Usage: The only difference with the call function is that apply takes two arguments

  1. The this object to bind
  2. Parameters of the array
var myObj = {
 name:'I'm a front-end bug developer siege lion'
}

var name = 'global name';

function myFunc(name,age){
 return {
     name: this.name,
     age:age,
     argName:name,
 }
}

Function.prototype.myBind = function(context,argArray){
 if(context && typeofcontext ! = ='object') {return Error('The first argument must be an object')
 }
 context = context || window;
 context.fn = this;
 var result;
 if(argArray){ result = context.fn(... argArray) }else{
     result = context.fn()
 }
 delete context.fn;
 return result
}

myFunc.myBind(myObj,['Kobe'.24]);
Copy the code

3. Implementation of bind function

Usage: Use to bind this object to the called function and return the function with this bound (only the reference to the function is returned, not executed).

Parameters: Takes multiple parameters, the first being the object to be bound to as this, and the rest being function parameters

Note:

  1. The function returned by the bind method can also continue to take arguments
  2. A function returned by the bind method that can be instantiated with new
    • Once instantiated by new, the previously bound this is invalidated
function myFunction(name,age){
    console.log(this.value,name,age)
    return {
        value:this.value,
        name:name,
        age:age
    }
}


Function.prototype.myBind = function(context){

    if(context && typeofcontext ! = ='object') {return Error('The first argument must be an object')}if(typeof this! = ='function') {return Error('Only functions can call myBind')
    }
    contex = context || window;
    var args = [...arguments].slice(1)
    var that = this;
   
    var fn = function(){
        that.call(this instanceof fn ? this: context,... args,... arguments) }return fn;
}

var fn1 = myFunction.myBind({value:'James'},'Kobe');
var result = new fn1('24')
console.log(result)
Copy the code

4. To summarize

The call, apply, and bind functions are used to bind the specified this object to the function, and the first argument of all three functions must be the this object to bind to. The default value is window if no object is passed, and an error is reported if no object is passed

Difference:

  • Call: The call function starts with the second argument and receives arguments as function parameters, which can be multiple
  • Apply: The only difference between apply and Call is that the second argument accepted by apply is an array in which all function parameters are contained
  • Bind: Unlike the first two functions, bind returns a bindingthisA reference to the function that follows. Instead of calling it directly. In addition, when calling the returned function, you can continue to pass parameters as parameters of the function (subsequent parameters will correspond to the parameter list of the function, in order). Most notably, the bind function returns a reference to a function that can be passednewInstantiated, the instantiated function loses the bind bind this.