Understand the methods in javascript

When learning 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 problem by first assigning this to a variable (such as self, _this, that, etc.), especially var that = this is the most I have seen, so that you can use it after you change the environment. These are all OK, but there is another better and more proprietary method, which is to use them. The following is a detailed explanation.

Part 1: Problems that need to be solved

First look at the following code

var myObj = {

  specialFunction: function () {

  },

  anotherSpecialFunction: function () {

  },

  getAsyncData: function (cb) {
    cb();
  },

  render: function () {
(function () {
      ();
      ();
    });
  }
};

();

Here I hope to create an object, including the first two ordinary methods; the third method can pass a function, and the passed function is executed immediately; the last method will call the getAsyncData method of the myObj object, this is used here, and a function is passed into the getAsyncData method. This function continues to call the first two methods of this object, and still uses this. At this time, many people can actually see the problem, input the above code into the console, and get the following result:

TypeError:  is not a function

Part 2: Problem Analysis

This in the render method in the object does point to the myObj object, so we can call the function in this object by doing it, but when we pass the 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, so an error will be reported.

Part 3: Several Ways to Solve Problems

So what we need to do is to correctly call the first two methods in the object. The method many people use is to first obtain this in the object's environment and assign it to another variable. At this time, it can be called in the subsequent environment, as shown below:

  render: function () {
    var that = this;
    (function () {
      ();
      ();
    });
  }  

Although this approach is feasible, using() will make the code clearer and easier to understand, as shown below:

render: function () {

  (function () {

    ();

    ();

  }.bind(this));

}

Here we successfully bind this to the environment.

Here is another simple example:

var foo = {
  x: 3
}

var bar = function(){
  ();
}

bar(); // undefined

var boundFunc = (foo);

boundFunc(); // 3

The following examples are also common:

 = 9;  // this refers to global "window" object here in the browser
var module = {
 x: 81,
 getX: function() { return ; }
};

(); // 81

var retrieveX = ;
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 = (module);
boundGetX(); // 81

Part 4: Browser Support

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

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,
                ((arguments)));
    };

   = ;
   = new fNOP();

  return fBound;
 };
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.