Mar 30, 2020

Javascript runtime mechanism of this detailed introduction

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.