This is an important keyword in the object -oriented language. Understanding and mastering the use of this keyword is essential for the robustness and beauty of our code. JavaScript's this is different from the objective -oriented language such as Java and C#, which makes this more confusing and confusing.
What this uses:
1. Pure function
2. Object method call
3. Use NEW to call the constructor
4. Internal functions
5. Use Call / Apply
6. Event binding
1. Pure function
Copy code code as follows:
var name = 'this is window'; // Define the name property of Window
function getName () {
console.log (this); // Console output: Window // this point to the global object-Window object
console.log (this.Name); // Console output: this is window /
}
getName ();
Analysis of running results: This in pure functions points to global objects, Window.
2. Object method call
Copy code code as follows:
var name = 'this is window'; // Define the name attribute of Window, see if this.Name will be called to
var testobj = {
name: 'This is testobj',
getName: Function () {
console.log (this); // Console output: testObj // this point to TestObj object
console.log (this.Name); // Console output: this is testobj
}
}
testobj.getName ();
Run results analysis: This is pointed to the object that calls the method.
3. Use NEW to call the constructor
Copy code code as follows:
function getObj () {
console.log (this); // Console output: GetObj {} // this newly created GetObj object
}
new getObj ();
Run results analysis: This in the new constructor points to the newly generated object.
4. Internal functions
Copy code code as follows:
var name = "this is window"; // Define the name attribute of Window, see if this.Name will be called to
var testobj = {
name: "This is testobj",
getName: Function () {
// var seelf = this; // temporarily save the THIS object
var ahandle = function () {{)
console.log (this); // Console output: Window // this point to the global object-Window object
console.log (this.Name); // Console output: this is window
//console.log (set); // This way this can be obtained is to point to TestObj object
}
handle ();
}
}
testobj.getName ();
Run results analysis: This in the internal function still points to the global object, Window. It is generally considered to be a design error in the JavaScript language, because no one wants to point This in the internal function to the global object. The general processing method is to save THIS as a variable, and it is generally agreed to be that or self, as shown in the above code.
5. Use Call / Apply
Copy code code as follows:
var name = 'this is window'; // Define the name attribute of Window, see if this.Name will be called to
var testobj1 = {
name: 'This is testobj1',
getName: Function () {
console.log (this); // Console output: testObj2 // this point 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, but the second parameters of the two are different:
[1] Call (thisarg [, arg1, arg2, ...]); // The second parameter uses parameter list: ARG1, ARG2, ...
[2] Apply (thisarg [, argarray]); // The second parameter uses parameter arrays: argarray
Analysis of running results: This uses this in the Call / Apply function to point to the binding object.
6. Event binding
This method in the event method should be the most suspicious place, most of the errors originated from this.
Copy code code as follows:
// Page for binding on Element
<script type = "text/javascript">
function btclick () {
console.log (this); // Console output: Window // this point to the global object-Window object
}
</script>
<body>
<button id = "btn" onClick = "btclick ();"> Click </button>
</body>
Copy code code as follows:
// JS binding method (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 point to the Element button object
}
document.GetelementByid ("BTN"). Onclick = btclick;
document.GetelementByid ("BTN"). Onclick;
</script>
Copy code code as follows:
// JS binding method (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 point to the Element button object
}
document.GetelementByid ("BTN"). Onclick;
</script>
Copy code code as follows:
// JS binding method (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 is the Element button object (method (method (method method (method method (method ) When it is used in event handling.
document.GetelementByid ("BTN"). Attachevent ('Onclick', BTCLICK); // IE use, console output: Window // this point to the global object-Window object
</script>
Analysis of running results: The above two common events binding methods, event binding on the page Element In addition to the binding event method, this points to the Elment element of the binding event.