Home > Article > Web Front-end > This detailed introduction to the javascript operating mechanism_Basic knowledge

This detailed introduction to the javascript operating mechanism_Basic knowledge

WBOYOriginal: 2016-05-16 17:01:181312browse

This is an important keyword in object-oriented languages. Understanding and mastering the use of this keyword is crucial to the robustness and beauty of our code. The this of JavaScript is different from pure object-oriented languages such as Java and C#, which makes this even more confusing and confusing.

This is used in situations:
1. Pure function
2. Object method call
3. Use new to call constructor
4. Internal function
5. Use call / apply
6. Event binding

1. Pure function

Copy code The code is as follows:

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

 
getName(); 

Analysis of running results: this in pure functions all points to the global object, that is, window.

2. Object method call

Copy code The code is as follows:

var name = 'this is window'; //Define the name attribute of window to see if this.name will be called 
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(); 

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

3. Use new to call the constructor

Copy code The code is as follows:

function getObj(){ 
 console.log( this); //Console output: getObj{} //The newly created getObj object pointed to by this 
} 

new getObj(); 

Analysis of running results: this in the new constructor points to the newly generated object.

4. Internal functions

Copy code The code is as follows:

var name = "this is window"; //Definition The name attribute of window, see if this.name will be called 
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--window object 
 console. log(this.name); //Console output: this is window 
 //console.log(self); //The this you can get points to the testObj object 
 handle() ; 
 } 
} 

testObj.getName(); 

Analysis of running results: this in the internal function still points to the global object, that is, window. This is generally considered a design error in the JavaScript language, because no one wants this in internal functions to point to the global object. The general processing method is to save this as a variable, generally agreed to be that or self, as shown in the above code.

5. Use call / apply

Copy the code The code is as follows:

var name = 'this is window'; //Define the name attribute of window to see if this.name will be called 
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 is similar to call, except that the second parameter of the two is different:
[1] call( thisArg [, arg1, arg2,... ] ); // The second parameter uses the parameter list: arg1 , arg2,...
[2] apply(thisArg [, argArray] ); //The second parameter uses the parameter array: argArray
Running result analysis: This in the function using call / apply points to the binding determined object.

6. Event Binding
This in the event method should be the most confusing place, and most errors originate from this.

Copy code The code is as follows:

//Bind on page Element
< ;script type="text/javascript">
function btClick(){
console.log(this); //Console output: Window //this points to the global object--window object
}

Copy code The code is as follows:

//Binding method in js (1)

Copy code The code is as follows:

//Binding method in js (2)

Copy code The code is as follows:

//Binding method in js (3)