call apply and bind Ultra detailed Methods of JS Function

call, apply and bind methods of catalog JS function 1. call () method 1, call () method simulation implementation 2. apply () method 1, apply () method simulation implementation
3. bind () method 1. Simulation implementation of bind () method 4. Summary

call, apply and bind Methods of JS Function

1. call () method

Call call() Method immediately executes the target function, changing the interior of the function this The direction of. The this point is determined by the first parameter of the method, and any parameter enumerated one by one later is passed as parameter 11 of the objective function.

/*  Normal mode  */

let obj = {
  sum(a, b) {
    console.log(this)
    return a + b
  }
}

//  Execute  sum  Functional  apply , bind  Method, printed  this  Same as below 
obj.sum.call()  //  Print  window
obj.sum.call(undefined, 1, 2)  //  Print  window
obj.sum.call(null, 1, 2)  //  Print  window

/*  Strict model  */
'use strict'

//  Execute  sum  Functional  apply , bind  Method, printed  this  Same as below 
obj.sum.call()  //  Print  undefined
obj.sum.call(undefined, 1, 2)  //  Print  undefined
obj.sum.call(null, 1, 2)  //  Print  null

1. Simulation implementation of call () method

Key points:

myCall() The method is added to the Function prototype object, and when the target function calls the method, the this inside the myCall () method points to the target function. The target function is executed as a method of the context object, whereby the this inside the target function will point to the context object. Delete the target function from the context object Using extension operators ... Processing the parameters passed into the target function

In the simulation implementation of call (), apply (), bind () methods, when the first parameter is not passed or undefined, null is passed, the this in the objective function points to the window object under the normal mode and strict mode of JS.

The code is as follows:

Function.prototype.myCall = function (context, ...args) {
  if (context === undefined || context === null) {
    context = window
  }
  //  The following behavior core code 
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

let obj1 = {
  basicNum: 1,
  sum(a, b) {
    console.log(this)
    return this.basicNum + a + b
  }
}
let obj2 = {
  basicNum: 9
}
console.log(obj1.sum.call(obj2, 2, 3))  // 14
console.log(obj1.sum.myCall(obj2, 2, 3))  // 14

2. apply () method

Call apply() Method immediately executes the target function, changing the interior of the function this The direction of. The this point is determined by the first parameter of the method, and the second parameter is an array of parameters or an arguments object, and the parameters represented by each array element or an arguments object are passed in correspondingly as parameter 11 of the target function.

1. Simulation implementation of apply () method

Key points:

myApply() The method is added to the Function prototype object, and when the target function calls the method, the this inside the myApply () method points to the target function. The target function is executed as a method of the context object, whereby the this inside the target function will point to the context object. Delete the target function from the context object Using extension operators ... Processing the parameters passed into the target function

The code is as follows:

Function.prototype.myApply = function (context, args) {
  if (context === undefined || context === null) {
    context = window
  }
  //  The following behavior core code 
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

console.log(obj1.sum.apply(obj2, [2, 3]))  // 14
console.log(obj1.sum.myApply(obj2, [2, 3]))  // 14

3. bind () method

Call bind() Method will return a new function-a copy of the target function, and the internal of the function this Point to the first parameter of the method, and any parameter listed one by one later will be passed as parameter 11 of the objective function. After that, executing the new function is equivalent to executing the target function. this 0 The method realizes the function Currization, so the parameters can be passed to the objective function twice. The first parameter is enumerated after the first parameter of bind () method, and the second parameter is enumerated in the new function.

1. Simulation implementation of bind () method

Key points:

myBind() The method is added to the Function prototype object, and when the target function calls the method, the this inside the myBind () method points to the target function. The target function is executed as a method of the context object, whereby the this inside the target function will point to the context object. Delete the target function from the context object Using extension operators ... Processes the initial parameters and subsequent parameters passed into the target function.

The code is as follows:

Function.prototype.myBind = function (context, ...initArgs) {
  if (context === undefined || context === null) {
    context = window
  }
  //  Cache  this  Value 
  const _this = this
  return function (...args) {
    //  The following behavior core code 
    context.fn = _this
    const result = context.fn(...initArgs, ...args)
    delete context.fn
    return result
  }
}

console.log(obj1.sum.bind(obj2, 2)(3))  // 14
console.log(obj1.sum.myBind(obj2, 2)(3))  // 14

4. Summary

Similarities and differences of the three methods:

Similarities:
Can change the direction of the internal this when the target function is executed
The first parameter of the method is used to specify the internal this value when the function is executed
Supports passing arbitrary parameters to the objective function
If undefined and null are not passed to the first parameter of the method, this in the target function points to window object in the normal mode of JavaScript, and points to undefined and null in the strict mode respectively.

Difference:
The apply () method can take two parameters, while the call () and bind () methods can take multiple parameters.
The apply () method passes arguments to the target function only by using an array of arguments or an arguments object as the second argument of the method, while the call () and bind () methods enumerate the arguments one by one after the first argument of the method.
When the call () and apply () methods are called, the target function is executed immediately, whereas the bind () method does not, and it returns a new function-a copy of the target function, the this inside of which points to the first parameter of the bind () method, after which executing the new function is equivalent to executing the target function.
Only the bind () method implements function Curritization, so you can pass parameters to the target function twice.

These are the details of call, apply and bind super-detailed methods of JS function. For more information about call, apply and bind methods of JS function, please pay attention to other related articles on this site!