Simply put, this is the object where the attribute or method is “currently” located. – Current (Since an attribute of an object can be assigned to another object, the current object of the attribute is mutable, i.e. the reference to this is mutable.)

The instance

function fun(){
    console.log(this.s);
}

var obj = {
    s:'1'.f:fun
}

var s = '2';

obj.f(); / / 1
fun(); / / 2
Copy the code

Surface interpretation:

In obj.f(), this refers to obj because the runtime environment is inside obj; When fun() is called in the global scope, this points to the global scope object window;

Function f() {return 'name: '+ this.name; } var A = {name: 'zhang ', describe: f}; Var B = {name: 'describe ', describe: f}; A.describe() // "name: Zhang SAN" B. Describe () // "name: Li Si"Copy the code

In the above code, the function f uses the this keyword inside, which points to different objects depending on which f is located. Whenever a function is assigned to another variable, the reference to this changes.

var A = {
  name: 'Joe'.describe: function () {
    return 'Name:'+ this.name; }};var name = 'bill';
var f = A.describe;
f() // "name: Li Si"
Copy the code

In the above code, a.describe is assigned to the variable F, and the internal this points to the object (in this case, the top-level object) where F runs.

Why did the orientation of this change? When did the orientation of this change

The JavaScript language has this design because of the data structure in memory

var obj = { foo: 5 };

The above code assigns an object to the variable obj. The JavaScript engine generates an object {foo: 5} in memory and assigns the object’s memory address to the variable obj. In other words, the variable obj is a reference. To read obj.foo later, the engine gets the memory address from obj and then reads the original object from that address, returning its foo property.

The original object is stored in a dictionary structure, with each attribute name corresponding to an attribute description object. For example, the foo property in the example above is actually stored in the following form.

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true}}Copy the code

Note that the value of the foo property is stored in the value property of the property description object.

The structure is clear, but the problem is that the value of an attribute can be a function.

var obj = { foo: function () {} };

At this point, the engine stores the function separately in memory and assigns the address of the function to the value property of foo.

{
  foo: {[[value]]: address of the function... }}Copy the code

Since a function is a single value, it can be executed in different environments (contexts).

var f = function () {};
var obj = { f: f };

// Execute separately
f()

// obj environment execution
obj.f()
Copy the code

In the code above, the variable x is used inside the function body. This variable is provided by the runtime environment.

Now the problem is that since functions can be executed in different runtime environments, there needs to be a mechanism to get the current runtime context from within the function body. So, here comes this, which is designed to refer to the current running environment of the function inside the function body.

Unfinished…