JavaScript in this detailed __java

In JS development, often use this, I think it is necessary to summarize this. definition

This represents the object that is currently executing a method, or a global object if there is no current method (or the method does not belong to any other object). That is, this represents the reference that invokes the method object. This in the global scope

The overall inside of this, relatively good understanding, generally not error prone. First, look at the following code, what will output.

<script type= "Text/javascript" >
   console.log (this==window);
    Console.log (this);
</script>

The direct results are as follows:

This means that if there is no current method (or the method does not belong to any other object), this refers to the Global object window.
So you can draw a global variable, you can take the following ways

    var name= "Dqs";

     Console.log (name);
     Console.log (window[' name '));
     Console.log (window.name);
     Console.log (this[' name '));
     Console.log (this.name);

function inside of this

This in the function, depending on how the function is invoked, is not the same as the calling method, so the inside of this will be different. called directly as a function

Called directly as a function, this in the function represents the global object, or window.

<script type= "Text/javascript" >
function fn () {
        console.log (this);
     }
fn ();
</script>

The results are as follows:
called in the form of a global object method

Called in the form of a global object, this is also the global object, the window.

<script type= "Text/javascript" >
function fn () {
        console.log (this);
     }
fn ();
    Console.log (This.fn ());
     Console.log (Window.fn ());
</script>

called using the call or Apply function

With call or Apply function calls, this is the specified object.

<script type= "Text/javascript" >
var obj={name: ' Obj_dqs '};

     function fn () {
        console.log (this);
     }
     function fn2 () {
        this.name= ' Fn_dqs ';
     }
     Fn.call (obj)/At this time this represents obj
     Fn.call (fn2)//At this time this represents fn2
</script>

The results are as follows:
called in the form of a constructor function

When called in the form of a constructor, this is the object being created.

<script type= "Text/javascript" >
    var name= ' Window_dqs ';
     function fn () {
        this.name= ' Fn_dqs ';
        This.showname=function () {
            console.log (this.name);
        }
        Console.log (this);
     }
     var p=new fn ();
</script>

The results are shown below:
This in with

When we analyze this in the with (obj), we need to analyze its scope. If this is in the function, it represents obj and, if it is a global scope variable, represents the window

<script type= "Text/javascript" >
    var name= ' Window_dqs ';
     var obj={
        name: ' Obj_dqs ',
        showname:function () {
            console.log (this);
        };

     function ShowName () {
        console.log (this);
     }


    With (obj) {
        console.log (this);
        ShowName ();
    }
    ShowName ();

</script>

The output is as follows
Comprehensive Exercises

If it is clear to say the output, then this one can be said to be mastered. Example 1

<script type= "Text/javascript" >
    var name= ' Window_dqs ';
     var obj={
        name: ' Obj_dqs ',
        showname:function () {
            console.log (this.name);
        };

     function fn () {
        console.log (this);
     }
     function fn2 () {
        this.name= ' Fn_dqs ';
     }

     Obj.showname ();
     Obj.showName.apply (this);
     Obj.showName.apply (FN2);
</script>

The output results are as follows:
Example 2

<script type= "Text/javascript" >
 var name= ' Window_dqs ';
     function fn () {
        this.name= ' Fn_dqs ';
        This.showname=function () {
            console.log (this.name);
        }
        Console.log (this);
     }

     function fn2 () {
        this.name= ' Fn_pps ';
        This.showname=function () {
            console.log (this.name);
        }
        Console.log (this);
     }


     var p=new fn ();
     Fn2.apply (p);
     P.showname ();

     var obj={};
     Fn2.apply (obj);
     Obj.showname ();
     </script>

The output results are as follows:
Example 3

<script type= "Text/javascript" >
var name= ' Window_dqs ';
     var obj={
        name: ' Json_dqs ',
        showname:function () {
            console.log (this.name);
            return function () {
                console.log (this.name);
            }
    }} var p=obj.showname ();
    Obj.showname () ();
    P.call (obj);
</script>

The results are as follows