Javascript learning notes on functions (2) : this works

Global scope

This;
When this is used in the global scope, it points to the global object.
Here are the details of global objects:

Global objects are objects that are created before entering any execution context;
There is only one copy of this object, its properties can be accessed anywhere in the program, and the global object's life cycle ends at the moment the program exits.
In the initial creation phase of the global object, Math, String, Date, parseInt and other properties are initialized as their own properties, and there can also be additional created objects as properties (which can point to the global object itself). For example, in the DOM, the window attribute of a global object can refer to the global object itself.
So typing window in the console is the same as typing this.window.

When a function is called

Foo ();
In this case, this also points to the global object.

When a method is called

Test. The foo ();

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

When a constructor is called

New foo ();

A function that is called with the keyword new is called a constructor. Inside the function, this points to the new 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 function.prototype's apply and call methods, the value of this is explicitly set to the first parameter of the method.
Therefore, unlike the rule when calling a function, this in the above example points to bar.

Here are the call and apply methods:

  Call method :

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

  The apply method :

Grammar: apply ([thisObj [argArray]])
Definition: a method that applies an object to replace the current object with another object.
One thing to note here is that this cannot be used to refer to the object itself in the literal declaration of the object. As follows:

var obj = {me: this}

Here, this does not point to obj, and this is only used in the five cases above.

conclusion

While the above scenario makes sense most of the time, the this in the second scenario (when calling a function) is actually less 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.
To get a way to point to Foo in test, we need to create a local variable inside method that points 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 the external this.
Another interesting thing about function aliases is when you assign a method to a variable.

var test = someObject.methodTest;
test();

In the above example, test would be treated as a normal function, so in the second case (that is, when a function is called), the internal this would point to a global variable instead of someObject.
Although this late binding may seem like a bad decision at first glance, it is actually the basis of the original type inheritance work.

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

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

new Bar().method();

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