Understanding the Function.prototype.bind method in javascript

When we first learn Javascript, we may not need to worry about function binding, but when we need to maintain the context object this in another function, we will encounter corresponding problems. I have seen many people deal with this All these problems are to first assign this to a variable (such as self, _this, that, etc.), especially var that = this is the one I see most, so that you can use it after changing the environment. These are all possible, but there is a better and more proprietary method, which is to use Function.prototype.bind, which is explained in detail below.

Part One: Problems that need to be solved

First look at the code below

var myObj = {
 
  specialFunction: function () {
 
  },
 
  anotherSpecialFunction: function () {
 
  },
 
  getAsyncData: function (cb) {
    cb();
  },
 
  render: function () {
this.getAsyncData(function () {
      this.specialFunction();
      this.anotherSpecialFunction();
    });
  }
};
 
myObj.render();

Here I hope to create an object, Contains the first two ordinary methods; the third method can pass a function, and the passed-in function will be executed immediately; the last method will call the getAsyncData method of the myObj object, using this here, and then passing in the getAsyncData method A function that continues to call the first two methods of this object and still uses this. At this time, many people can actually see the problem. Enter the above code into the console and get the following result:

TypeError: this.specialFunction is not a function

Part 2: Problem Analysis

This in the render method of the object does point to the myObj object, so we can call the function in this object through this.getAsyncData , but when we pass a function as a parameter, this here points to the global environment window. Because there are no first two methods in the object in the global environment, an error is reported.

Part 3: Several ways to solve the problem

So what we need to do is to correctly call the first two methods in the object. The method used by many people is to first call the object in the environment Get this and assign it to another variable, then you can call it in the subsequent environment, as shown below:

render: function () {
  var that = this;
  this.getAsyncData(function () {
    that.specialFunction();
    that.anotherSpecialFunction();
  });
}

Although this method is feasible, use Function. prototype.bind() will make the code clearer and easier to understand, as shown below:

render: function () {
 
  this.getAsyncData(function () {
 
    this.specialFunction();
 
    this.anotherSpecialFunction();
 
  }.bind(this));
 
}

Here we have successfully bound this to the environment.

The following is another simple example:

var foo = {
  x: 3
}
 
var bar = function(){
  console.log(this.x);
}
 
bar(); // undefined
 
var boundFunc = bar.bind(foo);
 
boundFunc(); // 3

The following example is also common:

this.x = 9;  // this refers to global "window" object here in the browser
var module = {
 x: 81,
 getX: function() { return this.x; }
};
 
module.getX(); // 81
 
var retrieveX = module.getX;
retrieveX(); 
// returns 9 - The function gets invoked at the global scope
 
// Create a new function with 'this' bound to module
// New programmers might confuse the
// global var x with module's property x
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

Part 4: Browser support

But this method is not supported in IE8 and below, so we can use the method provided by MDN to make IE support lower versions. bind() method:

if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
  if (typeof this !== "function") {
   // closest thing possible to the ECMAScript 5 internal IsCallable function
   throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
  }
 
  var aArgs = Array.prototype.slice.call(arguments, 1),
    fToBind = this,
    fNOP = function () {},
    fBound = function () {
     return fToBind.apply(this instanceof fNOP && oThis
                 ? this
                 : oThis,
                aArgs.concat(Array.prototype.slice.call(arguments)));
    };
 
  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();
 
  return fBound;
 };
}

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will join the PHP Chinese website.

For more related articles on how to understand Function.prototype.bind in javascript, please pay attention to the PHP Chinese website!