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

2, change the direction of this

var name = "windowsName";
var a = {
  name: "Cherry".func1: function () {
    console.log(this.name);
  },

  func2: function () {
    setTimeout(function () {
      this.func1();
    }, 100); }}; a.func2();// this.func1 is not a function
Copy the code

In the absence of the arrow function, an error is reported because the last object to call setTimeout is window, but func1 does not exist in window.

2.1 Use ES6’s arrow function

There is no this binding in the arrow function, and its value must be determined by looking at the scope chain. If the arrow function is contained by a non-arrow function, this binds to this of the nearest non-arrow function. Otherwise, this is undefined.

var name = "windowsName";
var a = {
  name: "Cherry".func1: function () {
    console.log(this.name);
  },

  func2: function () {
    setTimeout(() = > {
      this.func1();
    }, 100); }}; a.func2();// Cherry
Copy the code

2.2 Use inside functions_this = this

If you’re not using ES6, this is probably the easiest way to do it without any errors. You save the object that called the function in the variable _this, and then you use the _this in the function so that _this doesn’t change.

var name = "windowsName";
var a = {
  name: "Cherry".func1: function () {
    console.log(this.name);
  },

  func2: function () {
    var _this = this;
    setTimeout(function () {
      _this.func1();
    }, 100); }}; a.func2();// Cherry
Copy the code

In this example, in func2, we first set var _this = this; In this case, this is an object a that calls func2, in order to prevent setTimeout in Func2 from being called by window, which causes this in setTimeout to be window. We assign this(pointing to variable a) to a variable _this, so that in func2 we use _this to refer to object a.

2.3 Using call, apply, and bind

1. Use call

var a = {
  name: "Cherry".func1: function () {
    console.log(this.name);
  },

  func2: function () {
    setTimeout(
      function () {
        this.func1();
      }.call(a),
      100); }}; a.func2();// Cherry
Copy the code

2, use apply

var a = {
  name: "Cherry".func1: function () {
    console.log(this.name);
  },
  
  func2: function () {
    setTimeout(
      function () {
        this.func1();
      }.apply(a),
      100); }}; a.func2();// Cherry
Copy the code

3. Use bind

var a = {
  name: "Cherry".func1: function () {
    console.log(this.name);
  },
  
  func2: function () {
    setTimeout(
      function () {
        this.func1();
      }.bind(a)(),
      100); }}; a.func2();// Cherry
Copy the code

2.4 New Instantiates an object

3. Analyze call, apply and bind

3.1 The difference between call and apply

Both call and apply solve for changing the direction of this. The function is the same, but the way of passing the parameters is different.

In addition to the first argument, Call can accept a list of arguments, and apply only accepts an array of arguments.

The value of this specified when fun is run:

  • fun.call(thisArg, arg1, arg2, ...)
  • func.apply(thisArg, [argsArray])
var a = {
  value: 1};function getValue(name, age) {
  console.log(name);
  console.log(age);
  console.log(this.value);
}
getValue.call(a, "yck"."24"); // yck 24 1
getValue.apply(a, ["yck"."24"]); // yck 24 1
Copy the code

3.2 the bind

The bind() method creates a new function, sets its this keyword to the supplied value when called, and provides a given sequence of arguments before any supply when the new function is called.

var a = {
  name: "Cherry".fn: function (a, b) {
    console.log(a + b); }};var b = a.fn;
b.bind(a, 1.2) ();/ / 3
Copy the code

Related articles

  • 40 more of these questions. Keep going
  • This,this, again talking about this in javascript, super comprehensive
  • JavaScript in this
  • JavaScript digs deeper into this from the ECMAScript specification
  • Front-end basic advance (7) : a full range of interpretation of this
  • JavaScript basic heart method — this
  • 11 | this: from the Angle of JavaScript execution context clear this
  • Talk about the direction of this in react
  • React performance optimization
  • Reason the React event handler must use bind(this)
  • The React component’s method uses bind to bind to this.
  • React this. HandleClick = this. Handleclick.bind (this