🎯 summary

  1. The same
    • Can change the interior of the target functionthisThe point to
    • The first argument to the method specifies the this value inside the function when it executes
    • Supports passing any parameter to the target function
    • If you do not pass undefined or null to the first parameter of the method, then in normal JavaScript mode, the object function inside this points towindowObject, in strict mode, points to separatelyundefined,null.
  2. The difference between
    • apply()Method acceptabilitytwoParameter, andcall() å’Œ bind()Method can receivemultipleParameters.
    • apply()When a method passes an argument to the target function, it simply passesParameters of the arrayorThe arguments objectAs the second argument to the method, andcall() å’Œ bind()Method needs to pass the parameterList one by oneAfter an argument to the method.
    • callcall() å’Œ apply()Methods whenimmediatelyExecute the target function, andbind()Method does not, and will return oneThe new functionA copy of the target function in which this points to the first argument of bind(), after which the target function is executed.
    • onlybind()Method implementsThe function is currified, so you can pass parameters to the target function twice.

Call () method

  1. Calling the call() method immediately executes the target function and changes the reference to this inside the function. The this pointer is determined by the first argument to the method, and any of the following arguments are passed in as the corresponding arguments to the target function.

  2. For the last point of similarity in the opening summary, here is an example:

    /* Normal mode */

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

Sum = sum; sum = sum; sum = sum
obj.sum.call()  / / print window
obj.sum.call(undefined.1.2)  / / print window
obj.sum.call(null.1.2)  / / print window
Copy the code
    /* Strict mode */
'use strict'

Sum = sum; sum = sum; sum = sum
obj.sum.call()  / / print undefined
obj.sum.call(undefined.1.2)  / / print undefined
obj.sum.call(null.1.2)  / / print null
Copy the code

Analog implementation

  1. The key point

    • 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 object function is executed as a method on the context object, so the this inside the object function refers to the context object.
    • Removes the target function from the context object
    • Use extension operators.Process the arguments passed to the target function

  2. In the simulated implementation of call(), apply() and bind() methods, when the first parameter is not passed or undefined or NULL is passed, the processing is unified in the normal and strict MODES of JS, that is, the this inside the target function points to the window object.

  3. The following code

    Function.prototype.myCall = function (context, ... args) {
  if (context === undefined || context === null) {
    context = window
  }
  // The following behavior core code
  context.fn = this
  constresult = 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
Copy the code

The apply () method

Calling apply() immediately executes the target function and changes the reference to this inside the function. The this pointer is determined by the first argument to the method, and the second argument is an array of arguments or arguments object. The arguments represented by each array element or arguments object are passed in as arguments to the target function.

Analog implementation

  1. The key point

    • myApply()The method is added to the Function prototype object, and when the target Function calls the method, this inside the myApply() method points to the target Function.
    • The object function is executed as a method on the context object, so the this inside the object function refers to the context object.
    • Removes the target function from the context object
    • Use extension operators.Process the arguments passed to the target function

  2. The following code

    Function.prototype.myApply = function (context, args) {
  if (context === undefined || context === null) {
    context = window
  }
  // The following behavior core code
  context.fn = this
  constresult = 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
Copy the code

The bind () method

  1. callbind()Method will return oneThe new functionCopy of the object function, inside the functionthisPoints to the first parameter of the method, followed byList one by oneAny of the parameters of the object function are passed in one – to – one correspondence. Then executing the new function is equivalent to executing the target function.
  2. bind()Method implementsThe function is currified, so you can pass parameters to the target function twice, with the first argument listed after the first argument to the bind() method and the second argument listed in the new function.

Analog implementation

  1. The key point

    • myBind()The method is added to the Function prototype object, and when the target Function calls the method, this inside the myBind() method points to the target Function.
    • The object function is executed as a method on the context object, so the this inside the object function refers to the context object.
    • Removes the target function from the context object
    • Use extension operators.Process the initial and subsequent parameters passed to the objective function.

  2. The following code

    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
    constresult = 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
Copy the code

📚

  • The reference to this in JavaScript