This is an important keyword in object-oriented languages, and understanding and mastering the use of this keyword is critical to the robustness and elegance of our code. And JavaScript this is different from Java, C # and other pure object-oriented language, which makes this more confusing, confusing.
This is the case to use:
1. Pure function
2. Object Method Invocation
3. Call constructor using new
4. Internal function
5. Use of call/apply
6. Event Binding
1. Pure function
Copy Code code as follows:
var name = ' This is window '; Define the window's Name property
function GetName () {
Console.log (this); Console output: Window//this is pointing to a global object--window object
Console.log (this.name); Console output: This is window/
}
GetName ();
Run result analysis: this in the pure function points to the Global object, window.
2. Object Method Invocation
Copy Code code as follows:
var name = ' This is window '; Define the window's Name property to see if THIS.name will call the
var testobj = {
Name: ' This is Testobj ',
Getname:function () {
Console.log (this); Console output: Testobj//this is pointing to 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 constructor using new
Copy Code code as follows:
function Getobj () {
Console.log (this); Console output: getobj{}//this point to the newly created Getobj object
}
New Getobj ();
Run result analysis: This in the new constructor points to the newly generated object.
4. Internal function
Copy Code code as follows:
var name = "This is window"; Define the window's Name property to see if THIS.name will call 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 is pointing to a global object--window object
Console.log (this.name); Console output: This is window
Console.log (self); This is where you can get this to point to the Testobj object
}
Handle ();
}
}
Testobj.getname ();
Run result analysis: this in the internal function still points to the global object, that is, window. This is generally considered a design error for JavaScript language, because no one wants this to point to the global object in the internal function. The general approach is to save this as a variable, generally as that or self, as shown in the preceding code.
5. Use of call/apply
Copy Code code as follows:
var name = ' This is window '; Define the window's Name property to see if THIS.name will call the
var testObj1 = {
Name: ' This is testObj1 ',
Getname:function () {
Console.log (this); Console output: TestObj2//this is pointing 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 is similar to call, except that the 2nd parameter of the two is different:
[1] Call (Thisarg [, ARG1,ARG2, ...]); The 2nd parameter uses the parameter list: ARG1,ARG2, ...
[2] Apply (Thisarg [, Argarray]); The 2nd parameter uses a parameter array: Argarray
Run 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 this.
Copy Code code as follows:
Binding on page element
<script type= "Text/javascript" >
function Btclick () {
Console.log (this); Console output: Window//this is pointing to a global object--window object
}
</script>
<body>
<button id= "btn" onclick= "Btclick ();" > Click </button>
</body>
Copy Code code as follows:
JS in the binding mode (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 in the binding mode (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 in the binding mode (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 Point to the Element button object to use the function (method) for event handling.
document.getElementById ("Btn"). Attachevent (' onclick ', btclick); IE use, console output: Window//this is pointing to the Global object--window object
</script>
Operation Result Analysis: Above 2 kinds of common event binding methods, on the page element on the event binding (onclick= "Btclick ();" , this points to a global object, and in JS it is bound, except for the Attachevent bound event method, which points to the elment element of the bound event.
