So let me just briefly summarize

This is not fixed in JavaScript; it changes as the execution environment changes

  • In object methods, this represents the object to which the method belongs (this refers to the object on which the method was called)
  • If you use this alone to represent a Global object, in non-strict mode (node: Global; Browser: Window)
  • In function usage, this refers to the owner of the function (strictly: the function is not bound to this, so this is undefined).
  • In the event, this represents the element that received the event (in the HTML event handle, this refers to the HTML element that received the event)
  • Methods like call() and apply() can refer to this in any object. (Apply and call allow you to switch the context in which the function executes, i.e. the object bound to this, and refer to this in any object.)

The ultimate secret:

  1. If a function has this in it, but it is not called by a higher level object, then this refers to window. It is important to note that in the strict version of JS this does not refer to Window, but we are not going to discuss the strict version here, you can look it up on the Internet.

  2. If a function has this, and the function is called by a higher-level object, then this refers to the higher-level object.

  3. If a function has this, it contains multiple objects, and even though the function is called by the outermost object, this refers only to the object above it

Here are a few examples of the above three points:

Case 1:

Function a(){var user = "sunshine "; console.log(this.user); //undefined console.log(this); //Window } a();Copy the code

Example 2:

Function a(){var user = "sunshine "; console.log(this.user); / / undefined console. The log (this); //Window } window.a();Copy the code

Example 1 and Example 2 are the same: function A is invoked by the Window object:

Example 3:

Var o = {user:" sunny ", fn:function(){console.log(this.user); }} o.fin ();Copy the code

In example 3, this refers to object O, since the call to fn is done through o.fin (), it naturally refers to object O

Example 4:

Var o = {user:" sunny ", fn:function(){console.log(this.user); }} window.o.fein ();Copy the code

Example 3 and Example 4 are almost identical, but why does this not refer to window

Example 5:

var o = {
    a:8,
    b:{
        a:15,
        fn:function(){
            console.log(this.a); //15
        }
    }
}
o.b.fn();
Copy the code

Example 6:

var o = {
    a:8,
    b:{
        // a:15,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();
Copy the code

Even though object B has no property A, this points to object B, because this only points to the object above it, regardless of whether this has anything in it.

There is another special case

Example 7:

var o = {
    a:8,
    b:{
        a:15,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();
Copy the code

In this case, this refers to the window. Is that blindsided? It’s because you didn’t understand one sentence, which is equally important.

This always refers to the object is the last call it, is to see who is calling, when it executes example 7 although function fn were object referenced by b, but in the fn when assigned to the variable j did not perform so eventually points to the window, and this example 4 is not the same, example 4 is directly execute the fn.

“This” is exactly the same thing, but in different cases the direction will be different.

Constructor version of this:

Function Fn(){this.user = "sunshine "; } var a = new Fn(); console.log(a.user); // The sun is shiningCopy the code

The reason why object A can point to the user in function Fn is because the new keyword can change this to point to object A. Why I say a is an object, because using the new keyword is to create an instance of an object. To understand this, think of example 4, Here we use variable a creates an instance of Fn (equivalent to copy a copy of Fn to object inside a), at this time just created, and are not performed, and calls the function object a Fn, so this point to the nature is the object of a, so why there will be a of the object the user, because you have to copy a Fn function to the object a, Using the new keyword is equivalent to making a copy

When this hits return

Function fn(){this.user = 'sunshine '; return {}; } var a = new fn; console.log(a.user); //undefinedCopy the code
Function fn(){this.user = 'sunshine '; return function(){}; } var a = new fn; console.log(a.user); //undefinedCopy the code
Function fn(){this.user = 'sunshine '; return 15; } var a = new fn; console.log(a.user); // The sun is shiningCopy the code
Function fn(){this.user = 'sunshine '; return undefined; } var a = new fn; console.log(a.user); // The sun is shiningCopy the code

If the return value is an object, this refers to the returned object. If the return value is not an object, this refers to an instance of the function.

Function fn(){this.user = 'sunshine '; return undefined; } var a = new fn; console.log(a); //fn {user: "sunny "}Copy the code

Another point is that even though NULL is an object, this still refers to an instance of that function in this case, because NULL is the basic data type.

Function fn(){this.user = 'sunshine '; return null; } var a = new fn; console.log(a.user); // The sun is shiningCopy the code

The new operator changes the orientation of the function this

function fn(){ this.num = 1; } var a = new fn(); console.log(a.num); / / 1Copy the code

Why does this point to a? The new keyword first creates an empty object, and then automatically calls a function apply that points this to the empty object, so that this inside the function is replaced by the empty object.