Of Stack

Javascript runtime mechanism of this detailed introduction

  • 2020-03-30 01:38:59
  • OfStack

This is an important keyword in object-oriented languages, and understanding and mastering its use is critical to the robustness and elegance of our code. Javascript this is different from Java, C# and other pure object-oriented languages, which makes this more confusing and confusing.

This is used in the following situations:
1. Pure functions
2. Object method invocation
3. Call the constructor with new
4. Internal functions
5. Use call/apply
6. Event binding

1. Pure functions 


var name = 'this is window';  //Defines the name property of the window & NBSP;
function getName(){  
       console.log(this);    // Console output : Window  //this Points to a global object --window object   
       console.log(this.name);  //Console output: this is Windows & NBSP; /  
}  

  
getName(); 

Run the result analysis: the this in the pure function all points to the global object, which is the window.

2. Object method invocation 


var name = 'this is window';  //Define the name property of the window to see if this.name is called to & NBSP;
var testObj = {  
    name:'this is testObj',  
    getName:function(){  
        console.log(this);  // Console output :testObj   //this Points to the testObj object   
        console.log(this.name);  //Console output: this is testObj 
    }  
}  

testObj.getName(); 

Run result analysis: this in the called method points to the object that called the method.

3.   Call the constructor with new 


function getObj(){  
    console.log(this);    // Console output : getObj{}  //this Points to the newly created getObj object   
}  

new getObj(); 

Run result analysis: this in the new constructor points to the newly generated object.

4. Internal functions 


var name = "this is window";  //Define the name property of the window to see if this.name is called to & NBSP;
var testObj = {  
    name : "this is testObj",  
    getName:function(){  
        //var self = this;   // Temporary storage this object   
        var handle = function(){  
            console.log(this);   // Console output : Window  //this Points to a global object --window object   
            console.log(this.name);  //Console output: this is Windows & NBSP;    
            //console.log(self);  // That's what you get this The point to testObj object   
        }  
        handle();  
    }  
}  

testObj.getName();

Run the result analysis: the this in the inner function still points to the global object, the window. This is generally considered a JavaScript design error because no one wants this in an internal function to point to a global object. The usual treatment is to save this as a variable, usually that or self, as shown in the code above.

5. Use call/apply 


var name = 'this is window';  //Define the name property of the window to see if this.name is called to & NBSP;
var testObj1 = {  
    name : 'this is testObj1',  
    getName:function(){  
        console.log(this);   // Console output : testObj2  //this Points to the testObj2 object   
        console.log(this.name);  //Console output: this is testObj2& NBSP;    
    }  
}  

var testObj2 = {  
    name: 'this is testObj2'  
}  

testObj1.getName.apply(testObj2);  
testObj1.getName.call(testObj2); 

Note: apply is similar to call except that the second parameter is different:
[1] call(thisArg [, arg1, arg2...]);   // the second argument USES the argument list: arg1, arg2...  
[2] apply(thisArg [, argArray]);         // the second parameter USES an array of parameters: argArray
Run result analysis: use call/apply ; The "this" in the "this" function points to the bound object.

6. Event binding
This should be the most confusing part of the event method, and that's where most of the errors come from. 


//Bind & NBSP on the page Element;
  <script type="text/javascript">  
     function btClick(){  
        console.log(this);  // Console output : Window  //this Points to a global object --window object   
    }  
  </script>  
  <body>  
    <button id="btn" onclick="btClick();" > Click on the </button>  
  </body>  



//Js binding mode (1) & NBSP;
  <body>  
    <button id="btn"> Click on the </button>  
  </body>  
  <script type="text/javascript">  
     function btClick(){  
        console.log(this);  // Console output :<button id="btn"> Click on the </button>  //this Points to the Element The button object   
     }  

     document.getElementById("btn").onclick = btClick;  
     document.getElementById("btn").onclick;    
  </script>  



//Js binding mode (2) & NBSP;
<body>  
   <button id="btn"> Click on the </button>  
 </body>  
 <script type="text/javascript">  
    document.getElementById("btn").onclick = function(){  
     console.log(this);  // Console output :<button id="btn"> Click on the </button>  //this Points to the Element The button object   
    }  
    document.getElementById("btn").onclick;  
 </script>  



//Js binding mode (3) & NBSP;
<body>  
   <button id="btn"> Click on the </button>  
 </body>  
 <script type="text/javascript">  
    function btClick(){  
        console.log(this);    
     }  

    document.getElementById("btn").addEventListener('click',btClick); // Console output :<button id="btn"> Click on the </button>  //this Points to the Element Button object to function ( methods ) Used in event handling.   
    document.getElementById("btn").attachEvent('onclick',btClick);  //IE use , Console output : Window  //this Points to a global object --window object   
 </script> 

Run result analysis: the above two common methods of event binding, on the page Element for event binding (onclick="btClick();" ), this refers to the global object; In js, this points to the Elment element that binds the event, in addition to the attachevent-bound event method.

Related articles: