Javascript Study Notes - Functions (2): The working mechanism of this_Basic knowledge

In global scope

this;
When this is used in the global scope, it points to the global object.
Here is a detailed introduction to global objects:

Global object is an object that has been created before entering any execution context;
There is only one copy of this object, and its properties can be accessed anywhere in the program. The life cycle of the global object ends at the moment the program exits.
In the initial creation phase of the global object, Math, String, Date, parseInt are used as its own attributes, and other attributes are initialized. It can also have other additionally created objects as attributes (which can point to the global object itself). For example, in the DOM, the global object's window property can reference the global object itself.
So typing window in the console is the same as this.window.

When calling a function

foo();
Here, this also points to the global object.

When calling a method

test.foo();

In this example, this will point to the test object.

When calling a constructor

new foo();

When a function is called with the keyword new, we call it a constructor. At this time, within the function, this points to the newly created object.

When explicitly set

function foo(a, b, c) {}//

var bar = {};
foo.apply(bar, [1, 2, 3]); // array will expand to the below
foo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3

When using the apply and call methods of Function.prototype, the value of this is explicitly set as the first parameter of the method.
So, unlike the rules when calling a function, in the above example this refers to bar.

Here are the call and apply methods:

call method :

Syntax: call([thisObj[,arg1[, arg2[, [,.argN]]]]])
Definition: Call a method of an object to replace the current object with another object.

apply method :

Syntax: apply([thisObj[,argArray]])
Definition: Apply a method of an object to replace the current object with another object.
One thing we should note here is that when an object is declared literally, this cannot be used to point to the object itself. As follows:

var obj = {me: this}

Here, this will not point to obj, and the application of this is limited to the above five situations.

Summary

Although the above situation makes sense most of the time, this in the second situation (i.e. when calling a function) is actually rarely useful, which is considered another mistake in Javascript design.

Foo.method = function() {
  function test() {
    // this is set to the global object
  }
  test();
}

According to what we said above, this here will point to the global object, not the Foo function.
In order to get access to Foo in test, we need to create a local variable inside method pointing to Foo.

Foo.method = function() {
  var that = this;
  function test() {
    // Use that instead of this here
  }
  test();
}

that is just a normal variable name, but it is often used to point to external this.
There is another interesting place related to function aliases, that is, when assigning a method to a variable.

var test = someObject.methodTest;
test();

In the above example, test will be treated as an ordinary function, so according to the second case (that is, when calling a function), its internal this will point to the global variable instead of someObject.
Although this late binding may seem like a bad decision at first, it is actually the basis of how prototypal inheritance works.

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

At this point, when method is called, it will point to the instance object of Bar.