This, apply, call, bind

This point

The “this” keyword allows you to decide which object should be the focus when calling a function or method.

In JavaScript, this can be a global object, a current object, or any object, depending on how the function is called. The object bound to this is the context in which the function is executed.

In ES5, the orientation of this always adheres to the same principle: This always points to the object that called it last. It is the difference in the object that calls function that leads to the difference in the orientation of this

   // e.g.1
    var test = {
      a: 5.b: 6.sum: function (a, b) {
        function getA(a) {
          this.a = a;    // Add a global variable a to window
          return this.a; // this = window
        }

        function getB(b) {
          this.b = b;    // Add a global variable b to window
          return this.b; // this = window
        }
        returngetA(a) + getB(b); }}console.log(test.sum(4.3));  / / 7
    console.log(a);     // 4 (print result as window.a)
    console.log(b);     // 3 (printed as window.b)
Copy the code

    // e.g.2
    var user = {
      name: 'Echoyya'.age: 27.greet() {
        console.log(this.name)
      },
      bf: {
        name: 'KK.unlock'.greet() {
          console.log(this.name)
        }
      }
    }

    user.greet()      // Echoyya
    user.bf.greet()   // KK.unlock
Copy the code

If the greet function is not a function of the user object, it is a separate function.

    function greet () {
      console.log(this.name)
    }
    var user = { name: 'Echoyya' }
Copy the code

How to call this to user (greet)? You can no longer use user.greet() because there is no greet method for user.

There are ways to change the direction of this

How do I change the direction of this

(1) Use the arrow function in ES6

The this in the arrow function always refers to this when the function is defined, not when it is executed. Arrow functions do not have a this binding, and its value must be determined by searching the scope chain. If the arrow function is contained by a non-arrow function, this is bound to the nearest non-arrow function’s this; otherwise, this is undefined.

For this reason, arrow functions cannot be used in constructors

    var name = "windowsName";

    var obj = {
      name: "Echoyya".func1: function () {
        console.log(this.name)
      },
      func2: () = > {
          console.log(this.name)
        }
    };

    obj.func1() // Echoyya

    obj.func2() // windowsName
Copy the code

(2) Use _this = this inside the function

If you’re not using ES6, this is probably the easiest and error-proof way to do this: first store the object calling the function in the _this variable, and then use that _this throughout the function.

Var _this = this, var _this = this, var _this = this, var _this = this, var _this = this Assign this(pointing to the variable obj) to a variable _this, so that using _this in func refers to the object obj

var name = "windowsName";

var obj = {
  name: "Echoyya".func: function () {
    var _this = this;
    setTimeout(function () {
      console.log(_this.name)
    }, 1000); }}; obj.func()// Echoyya
Copy the code

(3) Use call, apply, bind methods

The call, apply, and bind methods are a method that each function has, allowing you to specify a context for the function when it is called. You can change the this point

Call and apply

1. The call method, whose first argument is used as the context in which the function is called. That is, this points to the first argument passed to call.
2. When passing arguments to a function called with.call, you need to pass them one by one after specifying the context (the first argument).
3. Fun. call(thisArg [, arg1[, arg2[,…]]])

From the perspective of function application, we know the use of call and apply. What is the difference between the two methods? In fact, there is only one difference.

1. The call method takes a list of arguments, the first of which points to this, and the rest of which are passed to the function as parameters when it executes.

• Syntax: fn. Call (this, arg1, arg2…) ;

2. The difference with Apply is that except for the first parameter referred to as this, all parameters are wrapped in an array and passed as parameters when the function is executed.

• Fn. apply(this, [arg1, arg2… );

Other than that, both methods have exactly the same effect:

var o = {
    a: 1
};

function fn(b, c) {
    console.log(this.a + b + c);
};
fn.call(o, 2.3);     / / 6
fn.apply(o, [2.3]);  / / 6
Copy the code

About the bind

Bind is a separate word because it’s not quite the same as call or apply. Call and apply change this immediately, while bind does not change this immediately, but returns a new binding function that needs to be executed again.

var o = {
    a: 1
};

function fn(b, c) {
    console.log(this.a + b + c);
};

var fn2 = fn.bind(o, 2.3);

fn2();   / / 6
Copy the code

var name = 'windowsName'

function greet () {
  console.log(this.name)
}

var user = { name: 'Echoyya' }

greet()          // windowsName
greet.bind()()   // windowsName (in non-strict mode, default to window)
greet.bind(user)()   // Echoyya
Copy the code

var obj = {
  name: "Echoyya".func: function () {
    setTimeout(function () {
      console.log(this.name)
    }.bind(obj)(), 100); }}; obj.func()// Echoyya
Copy the code

Call, apply, bind

Call, apply, and bind can all change the direction of this, but these three functions are slightly different.

var test = {
  a: 5.b: 6.sum: function (a, b) {
    var self = this;

    function getA() {
      return self.a;
    }

    function getB() {
      return self.b;
    }
    console.log(a, b);    // call, apply, bind pass in parameters
    returngetA() + getB(); }}var obj = {
  a: 2.b: 3
};

console.log(test.sum.call(obj, 4.5));    // self = this = obj
console.log(test.sum.apply(obj, [6.7])); Self = this = obj
console.log(test.sum.bind(obj, 8.9) ());Self = this = obj
Copy the code

Difference between Apply and call

• .apply and.call are essentially the same; they differ only in the parameters passed in.

• When passing arguments to a function called with.call, you need to pass in (argument list) one by one after specifying the context (first argument).

• When passing parameters to a function called with.apply, you can pass them in arrays and.apply will expand them automatically in the function.

What’s the difference between call, apply, and bind? Can the method that bind returns change the this pointer?

1. Unlike call, where apply is a function application, specifying this also executes the method, bind simply binds this and returns a new method.

2. Try printing the new returned function fn2, and you can see that it is not a normal function, but a bound function for short:

• TargetFunction refers to the function before bind;

• BoundThis is the binding this points to;

• BoundArgs is the other parameter passed in.

3. When we perform FN2, it’s kind of like

TargetFunction. Apply (BoundThis BoundArgs). It can be concluded that when the bind function is executed, the this reference and parameter are already identified and cannot be changed when the bind method is executed.

4. If bind is executed multiple times, the function this points to the same object as the first bind.

var o1 = { a: 1 };
var o2 = { a: 2 };

function fn(b, c) {
    console.log(this.a + b + c);
};

var fn1 = fn.bind(o1, 2.3);

// Try passing the parameter again
fn1(4.4);           / / 6

// Try to change this
fn1.call(o2);        / / 6

// Try bind again
fn1.bind(o2, 1.1) ()/ / 6
Copy the code

Fn1 is essentially window.fn1(). If this can be changed, then this would have to refer to window, and the bind method wouldn’t make much sense.