Analysis and application of call, apply and bind methods in JS

Time:2021-7-27

call

  • Function of call () method: specify this of the function, execute the function and pass parameters

  • Parameters:

    fn.call(thisArg,arg1,arg2,ar3,……)

    Thisarg specifies the object to which this points. If null or undefined is specified, the internal this points to window

    Arg1, arg2, Ar3,… Parameter list

    The return value is the return value of the function itself
    在这里插入图片描述

  • Similar to the apply () method, the only difference is that the call () method accepts a list of several parameters, while the apply () method accepts an array containing multiple parameters.

  • Apply: no method for borrowing objects

    It is more suitable for manipulating class array objects with array methods

// call
   //Class array object, it has no methods on the prototype object prototype of array array, such as push, splice, etc
    var o = {
        0:11,
        1:22,
        2:33,
        3:44,
        length:4
    };
    console.log(o);
    //When adding a data item
    o["4"] = 55;
    o.length = 5;
    console.log(o);// You need to manually add 1 to the length in the class array object

    //Call () method to change the direction of this
    Array.prototype.push.call(o,99);
    console.log(o);
    console.log(o.length);
    console.log(o[5]);

在这里插入图片描述

apply

  • Function of the apply () method: specify this of the function, execute the function and pass parameters

  • Parameters: FN. Apply (thisarg, [arsarray])

    The first parameter specifies the object to which this points, and the second parameter is provided in the form of an array (or an array like object).
    在这里插入图片描述

  • Application: you can specify this of the function and pass parameters through array

    It is applicable to the operation of breaking up an array

//Apply scatter array
          var arr = [2,3,8,90,1];
          console.log(1,2,3);
          console.log.apply(console,arr);

A hash consisting of a hash
打散数组
You can let the array use math’s max method

var arr = [2,3,8,90,1];
  //Some methods in built-in JS 
  console.log(Math.max(1,78,2,3));    
  //Use the apply method to pass the array to the second parameter of max
  console.log(Math.max.apply(Math,arr));
  //The first parameter, this, points to or points to math itself. Math and null can be written here

bind

  • Function of bind() method: specify this of the function. The function cannot be executed, but parameters can be passed

  • Parameters: fn.bind (thisarg, arg1, arg2, Ar3,…)

    The first parameter specifies the object to which this points. The second parameter and beyond is the list of function parameters

    Return value: returns anewFunction with this specified (i.e. binding function)
    在这里插入图片描述

  • Application: when this is specified, the function does not need to be executed immediately

    Applicable to event functions (timer, delayer)

//bind
  //Modify this inside the timer function
   var o = {
       name:"lili",
       age:12,
       years:function(){
           setInterval(function(){
               console.log(this.age);// This in the timer points to the window object
           //The window object does not have an age, so an error is output
           },1000)
       }
   };
   o.years();//  Window object has no age, output undefined

Change this in the timer:

years:function(){
         setInterval(function(){
              console.log(this.age);// This in the timer points to the window object
          //The window object does not have an age, so an error is output
          }. bind (this), 1000) // change this to point to o
      }

Change this in the event function:

//bind
  //Modify this inside the timer function
  var o = {
      name:"lili",
      age:12,
      years:function(){
          setInterval(function(){
              console.log(this.age);// This in the timer points to the window object
          //The window object does not have an age, so an error is output
          }. bind (this), 1000) // change this point
      }
  };
  o.years();//  Window object has no age, output undefined
  //Change this in the timer

  //Change this point in the event function
  document.onclick = function(){
      console.log(this);
  };

This of document points to
在这里插入图片描述
Change this point in the document to o:

document.onclick = function () {
                    console.log(this);
            }.bind(o);// Point o

在这里插入图片描述

summary

The call and apply features are the same

  • Are used to call functions and are called immediately
  • While calling the function, specify the point of this inside the function through the first parameter
  • When calling, the parameters must be passed in the form of parameter list, that is, they can be passed in sequence separated by commas
  • When calling apply, the parameter must be an array. During execution, the elements in the array will be taken out one by one and passed one by one with the parameters
  • If the first parameter specifies null or undefined, the internal this points to window
  • Bind can be used to specify the internal point of this, and then generate a new function that changes the point of this
  • The biggest difference between bind and call and apply is that bind will not call
  • Bind supports transfer functions. There are two places to transfer
    ① While binding, it is passed in the form of parameter list;
    ② When called, it is passed in the form of parameter list.
  • When passing parameters, the parameters passed during bind and the parameters passed during call will be combined and passed into the function

在这里插入图片描述
在这里插入图片描述

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]