Direction of this in JavaScript

Keywords: Javascript Attribute Java IE

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. And this of javascript is different from pure object-oriented languages such as Java and C#, which makes this more complicated and confusing.
The use of this:

1. pure function
2. Object method calls
3. Call the constructor with new
4. Internal function
5. Use call / apply
6. Event binding

1. pure function

var name = 'this is window';  //Definition window Of name attribute 
function getName(){ 
       console.log(this);    //console output: Window  //this points to the global object -- the window object. 
       console.log(this.name);  //console output: this is window  / 
} 
getName();

Running result analysis: this in pure function points to the global object, namely window.

2. Object method calls

var name = 'this is window';  //Definition window Of name attribute,see this.name Whether it will be invoked to the ___________ 
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();

Running result analysis: this in the invoked method points to the object that invokes 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();

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

4. Internal function

var name = "this is window";  //Definition window Of name attribute,see this.name Whether it will be invoked to the ___________ 
var testObj = { 
    name : "this is testObj", 
    getName:function(){ 
        //var self = this;   //Temporarily save this object 
        var handle = function(){ 
            console.log(this);   //console output: Window  //this points to the global object -- the window object. 
            console.log(this.name);  //console output: this is window   
            //console.log(self);  //this can be obtained by pointing to the testObj object 
        } 
        handle(); 
    } 
} 
testObj.getName();

Running 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 nobody wants this in an internal function to point to a global object. The general approach is to save this as a variable, which is generally agreed to be that or self, as shown in the above code.

5. Use call / apply

var name = 'this is window';  //Definition window Of name attribute,see this.name Whether it will be invoked to the ___________ 
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   
    } 
} 

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

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

Note: apply and call are similar, but the second parameter of them is different:
[1] call (thisArg [, arg1, arg2,... ]) The second parameter uses a list of parameters: arg1, arg2,....
[2] apply(thisArg [, argArray]); // The second parameter uses an array of parameters: argArray
Running result analysis: Use this in the call / apply function to point to the bound object.

6. Event binding
this in the event method should be the most confusing place, and most of the errors come from it.

//page Element Upper binding 
  <script type="text/javascript"> 
     function btClick(){ 
        console.log(this);  //console output: Window  //this points to the global object -- the window object. 
    } 
  </script> 
  <body> 
    <button id="btn" onclick="btClick();" >click</button> 
  </body> 
//js Middle Binding (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 points to the Element button object 
     } 

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

//js Middle Binding (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 points to the Element button object 
    } 
    document.getElementById("btn").onclick(); 
 </script> 

//js Middle Binding (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 refers to the use of functions (methods) in event handling by Element button objects. 
    document.getElementById("btn").attachEvent('onclick',btClick);  //IE Use,console output: Window  //this points to the global object -- the window object. 
 </script>

Running result analysis: The above two common event binding methods bind events on the page Element (onclick="btClick();"), this points to the global object; while in js, this points to the binding event Elment element besides the attachEvent binding event method (this points to the global object).

Reference material:

http://www.qdfuns.com/notes/16738/aa32a299479386c9c1fc254ef0dc6fcb.html

Posted by hehachris on Thu, 21 Mar 2019 01:51:52 -0700

Programmer Group

Direction of this in JavaScript

Hot Keywords