Javascript detailed analysis

analyze

The bind() method will create a new function and become a bound function. When calling this binding function, the binding function will use the first parameter passed in when it was created as this, and pass the second parameter of the bind() method and the subsequent parameters plus the parameters of the binding function runtime itself as the parameters of the original function in order to call the original function.

In actual use, we often encounter such problems:

var name = "pig";
function Person(name){
   = name;
   = function(){
    setTimeout(function(){
      ("Hello,my name is "+);
    },100);
  }
}
var weiqi = new Person("Guardian flag");
();  
//Hello,my name is pig

The output is pig at this time, because this pointing is determined when running the function, not when defining the function. Since setTimeout is only thought in the global environment, this pointes to the window.

Previously, the solution to this problem was usually to cache this, for example:

var name = "pig";
function Person(name){
   = name;
   = function(){
    //Cache this here    var self = this;
    setTimeout(function(){
      // Here is a self that caches this      ("Hello,my name is "+);
    },100);
  }
}
var weiqi = new Person("Guardian flag");
();
//Hello,my name is Guardian flag

This solves this problem, which is very convenient because it allows Person's context to be accessed in the setTimeout function.

Now there is a better solution, you can use the bind() function, and the above example can be updated to:

var name = "pig";
function Person(name){
   = name;
   = function(){
    setTimeout(function(){
      ("Hello,my name is "+);
    }.bind(this),100);
    //Note that in the above line, add bind(this)  }
}
var weiqi = new Person("Guardian flag");
();
//Hello,my name is Guardian flag

The easiest way to use bind() is to create a function so that the function has the same value no matter how it is called. A common mistake that new JavaScript is to take a method out of an object and then call it, hoping that this in the method is the original object (such as passing this method into the callback function). If no special treatment is done, the original object will generally be lost. Create a binding function from the original function and the original object, which can solve this problem beautifully:

//Define global variable xvar x = "window";
//Define x inside modulevar module = {
  x:"module",
  getX:function(){
    ();
  }
}
(); 
//Return module, because getX() is called inside module
var getX = ;
getX();
//Return window, because this getX() is called in the global scope
//Bind getX() and set this value to modulevar boundGetX = (module);
boundGetX();
//Return module, after binding, this value will always be module

Browser support:

Unfortunately, it is not supported in IE8 and below, so if there is no alternative, there may be problems at runtime. The bind function was added only in the fifth edition of ECMA-262. It may not work on all browsers. You can add the following code to the script section so that unsupported browsers can also use the bind() function.

if (!) {
  = function (oThis) {
  if (typeof this !== "function") {
   // closest thing possible to the ECMAScript 5 internal IsCallable function
   throw new TypeError(" - what is trying to be bound is not callable");
  }

  var aArgs = (arguments, 1), 
    fToBind = this, 
    fNOP = function () {},
    fBound = function () {
     return (this instanceof fNOP && oThis
                 ? this
                 : oThis || window,
                ((arguments)));
    };

   = ;
   = new fNOP();

  return fBound;
 };
}

grammar

    (thisArg[, arg1[, arg2[, …]]])

parameter

thisArg, when the binding function is called, this parameter will be pointed as this when the original function runs. When the binding function is called using the new operator, this parameter is invalid.

arg1, arg2, …, When the binding function is called, these parameters plus the parameters of the binding function itself will be used as parameters of the original function runtime in order.

describe

The bind() function will create a new function (a bound function) with the same function body (the built-in Call property in the ECMAScript 5 specification). When the function (the original function of the bound function) is called, this value is bound to the first parameter of bind(), and the parameter cannot be rewritten. When the binding function is called, bind() also accepts preset parameters to the original function. A binding function can also create objects using the new operator: this behavior is like treating the original function as a constructor. The provided value is ignored and the parameters called by the colleague are provided to the simulation function.

Thank you for reading, I hope it can help you. Thank you for your support for this site!