Explain the pointing problem of this in JavaScript in detail

  • 2021-07-13 03:54:41
  • OfStack

this is an important keyword in object-oriented language. Understanding and mastering the use of this keyword is very important for the robustness and gracefulness of our code. this of javascript is different from pure object-oriented languages such as Java and C #, which makes this more confusing and confusing.

Use of this:

1. Pure functions

2. Object method calls

3. Call the constructor using new

4. Internal functions

5. Use call/apply

6. Event binding

1. Pure functions


var name = 'this is window'; // Definition window Adj. name Attribute  
function getName(){ 
 console.log(this); // Console output : Window //this Points to a global object --window Object  
 console.log(this.name); // Console output : this is window / 
} 
getName(); 

Analysis of running results: this in pure functions all point to global objects, that is, window.

2. Object method calls


var name = 'this is window'; // Definition window Adj. name Attribute , Look this.name Will be called to the  
var testObj = { 
 name:'this is testObj', 
 getName:function(){ 
 console.log(this); // Console output :testObj //this It points to testObj Object  
 console.log(this.name); // Console output : this is testObj 
 } 
} 
testObj.getName();

Analysis of running results: this in the called method points to the object calling the method.

3. Use new to call the constructor


function getObj(){ 
 console.log(this); // Console output : getObj{} //this Pointing 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"; // Definition window Adj. name Attribute , Look this.name Will be called to the  
var testObj = { 
 name : "this is testObj", 
 getName:function(){ 
 //var self = this; // Temporary preservation 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 window 
 //console.log(self); // What can be obtained in this way this That is, pointing testObj Object  
 } 
 handle(); 
 } 
} 
testObj.getName();

Run result analysis: this in the internal function still points to the global object, namely window. This is generally considered a design error in the JavaScript language, because no one wants this in an internal function to point to a global object. this is saved as a variable, and that or self is agreed as shown in the above code.

5. Use call/apply


var name = 'this is window'; // Definition window Adj. name Attribute , Look this.name Will be called to the  
var testObj1 = { 
 name : 'this is testObj1', 
 getName:function(){ 
 console.log(this); // Console output : testObj2 //this It points to testObj2 Object  
 console.log(this.name); // Console output : this is testObj2 
 } 
}
var testObj2 = { 
 name: 'this is testObj2' 
}
testObj1.getName.apply(testObj2); 
testObj1.getName.call(testObj2);

Note: apply and call are similar except that the second parameter is different:

[1] call (thisArg [, arg1, arg2,...]); //The second parameter uses a parameter list: arg1, arg2,...

[2] apply (thisArg [, argArray]); //The second parameter uses an array of parameters: argArray

Running result analysis: Use call/apply function inside this to point to the bound object.

6. Event binding

this in the event method should be the most confusing place, and most of the mistakes originate from it.


// Page Element Bind on  
 <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 </button> 
 </body> 
//js The binding mode in ( 1 )  
 <body> 
 <button id="btn"> Click </button> 
 </body> 
 <script type="text/javascript"> 
 function btClick(){ 
 console.log(this); // Console output :<button id="btn"> Click </button> //this It points to Element Button object  
 }
 document.getElementById("btn").onclick = btClick; 
 document.getElementById("btn").onclick(); // Default click 
 </script>
//js The binding mode in ( 2 )  
<body> 
 <button id="btn"> Click </button> 
 </body> 
 <script type="text/javascript"> 
 document.getElementById("btn").onclick = function(){ 
 console.log(this); // Console output :<button id="btn"> Click </button> //this It points to Element Button object  
 } 
 document.getElementById("btn").onclick(); 
 </script>
//js The binding mode in ( 3 )  
<body> 
 <button id="btn"> Click </button> 
 </body> 
 <script type="text/javascript"> 
 function btClick(){ 
 console.log(this); 
 }
 document.getElementById("btn").addEventListener('click',btClick); // Console output :<button id="btn"> Click </button> //this It points to Element Button object puts function ( Method ) Used in event handling.  
 document.getElementById("btn").attachEvent('onclick',btClick); //IE Use , Console output : Window //this Points to a global object --window Object  
 </script>

Analysis of running results: The above two commonly used event binding methods are event binding on the page Element (onclick= "btClick ();"), this points to global objects; When binding in js, this points to the Elment element that binds the event, except for the event method bound by attachEvent (this points to the global object).


Related articles: