A lot of times when we’re trying to peel code around this, we’re going to have a problem getting the value we want. Most of the time we don’t know exactly what this points to, so in some cases this doesn’t get the value we want. Recently I have learned the problem that this points to in the function, and sharing it here is also convenient for me to consolidate my learning in the future.

Normal functions and ES6 arrow functions, this refers to the problem

1. In ordinary functions this

  1. Always represents its direct caller, such as obj.fn, where the outermost “this” in fn refers to obj
  2. By default, there is no direct caller; this points to the window
  3. In strict mode (with ‘use strict’ set), this is undefined
  4. When bound using Call, apply, bind (new in ES5), this refers to the binding object

Note:

The call method takes a reference to this and a list of arguments. When the first parameter is null, undefined, the default point is window. For example: getcolor. call(obj, ‘yellow’, ‘blue’, ‘red’)

The apply method takes two arguments, the first a reference to this and the second an array of arguments. When the first parameter is null, undefined, the default point is window. Getcolor.apply (obj, [‘ yellow ‘, ‘blue’, ‘red’])

The bind method is similar to the call method in that the first argument is a reference to this and the second argument is the list of arguments received. The difference is that the bind method returns a function and uses a list of arguments that BIND receives. This method is not available in older browsers and you need to implement it manually

The above call, apply, and bind methods are new to ES5. If you want to know more about them, you can Google them.

ES6 arrow function this

Shorter functions, equivalent to anonymous functions, simplify the definition of functions

(1) The default refers to this of the object in the context in which it was defined. That is, the arrow function in ES6 points to the object in the context this points to, and occasionally without a context object this points to the window

(2) Even call, apply, bind, etc. cannot change the direction of the arrow function this

Some examples reinforce the impression

(1) Hello is a global function. It does not call its object directly and does not use strict mode. This refers to window

function hello() { 
   console.log(this);  // window 
}  
hello();

Copy the code

(2) Hello is a global function. It does not call its object directly, but specifies strict mode (‘ use strict ‘). This refers to undefined

function hello() { 
   'use strict';
   console.log(this);  // undefined
}  
hello();
Copy the code

(3) The direct caller of hello is obj, the first this points to obj, and the anonymous function in setTimeout has no direct caller, so this points to window

const obj = {
    num: 10,
   hello: function () {
    console.log(this);    // obj
    setTimeout(function () {
      console.log(this);    // window
    });
   }    
}
obj.hello();
Copy the code

(4) The direct caller to hello is obj, the first this points to obj, the setTimeout arrow function, this points to this of the nearest function, which is also obj

const obj = {
    num: 10,
   hello: function () {
    console.log(this);    // obj
    setTimeout(() => {
      console.log(this);    // obj
    });
   }    
}
obj.hello();
Copy the code

Diameter is a normal function, in which this refers to the object obj that calls it directly. Perimeter is an arrow function. This should point to the context function this, which does not have a function object. This defaults to a window, which does not have a radius property, and returns NaN.

const obj = {
  radius: 10,  
  diameter() {    
      return this.radius * 2
  },  
  perimeter: () => 2 * Math.PI * this.radius
}
console.log(obj.diameter())    // 20
console.log(obj.perimeter())    // NaN
Copy the code