This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Use of call,apply, and bind

call

The call() method calls a function with a specified value of this and one or more arguments given separately.

  • function.call(thisArg, arg1, arg2, …) .
  • ThisArg: Optional. The value of this used when function is run.
  • arg1, arg2, … : Specifies the parameter list

Return value: Change this and pass in the argument, immediately execute, return the value returned by the function

apply

The apply() method calls a function with a given value of this and provides the arguments in the form of an array (or array-like object).

  • function.apply(thisArg, argsArray)
  • ThisArg: Mandatory. The value of this used when function is run
  • ArgsArray: Optional. An array or array-like object whose array elements are passed as separate arguments to the func function.

Return value: Immediately executed, returns the value returned by the function

bind

The bind() method creates a new function. When bind() is called, this of the new function is specified as the first argument to bind(), and the remaining arguments are used as arguments to the new function.

  • function.bind(thisArg, arg1, arg2, …)
  • ThisArg: The value passed to the target function as the this argument when the binding function is called.
  • arg1, arg2, … When the target function is called, the parameters are preloaded into the parameter list of the bound function.

Return value: a copy of the original function with the specified value of this and the initial arguments

The call, the apply, bind the difference

  • The first argument is the object to be changed (this refers to the first argument), followed by arguments of the form arg1, arg2… In the form.

  • Apply: Basically the same as call(this refers to the first argument), except that the second argument is an array [arg1, arg2… .

  • Bind: Changing this scope returns a new function, which does not immediately execute.

Hand-written call

function myCall(context = window, ... Args) {const _context = Object(context) // change this to point to _context.fn = this; // Call this method, passing the rest of the arguments in _context.fn(... args); // Pass the result of this method to result let result = _context.fn(); // Delete this variable delete _context.fn; return result; } Function.prototype.myCall = myCall; // test this.a=1; const fn = function () { this.a = 2; console.log(this.a); }; fn.myCall(fn);Copy the code

Hand-written implementation Apply

The second argument is an array

Function.prototype.myApply = function (context = window, args = []) { const _context = Object(context) _context.fn = this; // this is the function that calls call const result = _context.fn(... args); delete _context.fn return result; } // test this.a = 1; const fn = function() { this.a = 2; console.log(this.a); } fn.myApply(fn);Copy the code

Handwriting implements a bind

Function.prototype.myBind = function(context, ... args) { const _this = this; return function Bind(... NewArgs) {// If called from new, If (this instanceof Bind) {return _this.myApply(this, [...args,...newArgs]); } // Return _this.myApply(context, [...args,...newArgs]); }; } / / the second method Function. The prototype. MyBind = Function (context,... args) { const _context = Object(context); return (... newArgs) => { return this.myApply(_context, [...args, ...newArgs]); }; }; //test let b = { num: 1, }; function f1() { console.log('====', this.num); } const f2 = f1.myBind(b); f2();Copy the code