Summarize the orientation of this in various situations according to the MDN documentation and related blogs. There are three basic rules:

  • The this in the function refers to the object calling it
  • This of the arrow function refers to the this of the external context when it is defined
  • The call, bind, apply function calls this with the first argument

Global context

In the global state, this points to the global object, the browser to the Window, and node to globalThis

console.log(this= = =window) // true
Copy the code

This in the function

The this in the function refers to the last object that called it. If there is no object before the function, the function is considered a global object

var a = 1;
var b = {
  a: 2};function print() {
  console.log(this.a);
}
print() // 1 points to window
b.x=print
b.x(); // 2 points to b
Copy the code

The function called this with the call, bind, and apply functions points to the first argument

  • apply(obj,args)
var a = 1;
var b = {
  a: 2};function print(x,y) {
  console.log(this.a+x+y);
}
print.apply(b,[3.5]) // 10 this points to b
Copy the code
  • call(obj,… args)
var a = 1;
var b = {
  a: 2};function print(x,y) {
  console.log(this.a+x+y);
}
print.apply(b,3.5) // 10 this points to b
Copy the code
  • bind(obj,… args)

The function’s this is permanently changed using the bind function and always refers to the bound object, regardless of how it is called. Functions that have already been bind will not bind to other objects.

    var b = {
      a: 2};var c = {
      a: 3};function print() {
      console.log(this.a);
    }
    c.say = print.bind(b);
    c.say() // 2 this is bound to b
    b.say= c.say.bind(c)
    b.say() // 2 The second bind will not take effect
Copy the code

This in the arrow function

The arrow function does not have its own this; its this inherits from the outer function and points to the this of the created outer function. You cannot change the arrow function’s this directly (such as bind, etc.), but you can change the arrow function’s this indirectly by changing the external function’s this

  • Create an arrow function globally
    let fn = () = > {
      console.log(this= = =window); // true
    };
    let a = {};
    fn();
    a.print = fn;
    a.print(); // true this always points to the window to which it was created
Copy the code
  • Object to create the arrow function
var obj = {
  bar: function() {
    var x = (() = > this);
    returnx; }};var fn = obj.bar();

// Call fn directly without setting this,
In general (that is, if arrow functions are not used) the default is global
console.log(fn() === obj); // true

// But note that if you only refer to obj's method without calling it
var fn2 = obj.bar;
// This points to window, since bar's this points to window, the arrow function inherits this from bar.
console.log(fn2()() == window); // true
Copy the code

Functions as properties of objects

  • When a function is an object property, the reference to this is still determined by the object calling the function
  • Functions are on the prototype chain of objects, and the concept still applies
var o = {
  f: function() {
    return this.a + this.b; }};var p = Object.create(o); // There is method f on the prototype of p
p.a = 1; 
p.b = 4;

console.log(p.f()); // 5 Although the method is in the prototype, the caller is still P
Copy the code

Function as constructor

When the function is called as a constructor, this points to the instantiated object.

function a(value) {
  this.value = value;
  this.fn = function () {
    console.log(this.value);
  };
}
let obj1 = new a(10);
obj1.fn();/ / 10
Copy the code

Remember: this refers to the object on which the function is called

This of the event handler function

AddEventListener Adds an event handler, or an inline event function, whose this points to the function that binds the event (this=== event.currenttarGet is always true), for example, adding a click listener to the parent element, clicking on the child element, this pointing to the parent element, Not the child element being clicked