Home > Developer > JavaScript
1. Pure functions
2. Object Method Invocation
3. Calling the constructor with new
4. Intrinsic functions
5. Using call/apply
6. Event Binding
1. Pure functions
var name = ' This is window '; Defines the Name property of the 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 (); Run result analysis: this in the pure function points to the global object, which is window.
2. Object Method Invocation
var name = ' This is window '; Define window's Name property to see if THIS.name will be called to var testobj = { Name: ' This is Testobj ', getname:function () { Console.log (this); Console output: Testobj //this points to Testobj object console.log (this.name); Console output: This is Testobj }} testobj.getname (); Run result Analysis: The called method points to the object that called the method.
3. Calling the constructor with new
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. Intrinsic functions
var name = "This is window"; Define the window's Name property to see if THIS.name will be called to 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 the window //console.log (self); This can be obtained by pointing to the Testobj object } handle ();} } testobj.getname ();Run result analysis: this in the intrinsic function still points to the global object, which is window. This is generally considered a design error in JavaScript because no one wants the this in the inner function to point to the global object. The general way to do this is to save this as a variable, which is generally agreed to that or self, as shown in the preceding code.
5. Using call/apply
var name = ' This is window '; Define window's Name property to see if THIS.name will be called to var testObj1 = { Name: ' This is TestObj1 ', getname:function () { Console.log (this); Console output: TestObj2 //this points to TestObj2 object console.log (this.name); Console output: This is TestObj2 }} var testObj2 = { Note:apply and call are similar, except that the 2nd parameter of the two is different:
[1] Call (Thisarg [, ARG1,ARG2, ...]); The 2nd parameter uses a parameter list: ARG1,ARG2, ...
[2] Apply (Thisarg [, Argarray]); The 2nd parameter uses a parameter array: Argarray
Run result Analysis: the this in the function using call/apply points to the bound object.
6. Event Binding
The This in the event method should be the most confusing place, and most of the errors originate from this.
binding on the page element <script type= "Text/javascript" > Function Btclick () {console.log (this); Console output: Window//this points to the Global object--window object} </script> <body> <button id= "btn" onclick= "Btclick ( ); "> Click </button> </body>//js in the bind 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 (); Default Click </script>//js in Bind mode (2) <body> <button id= "BTN" > click </button> </body> <script t Ype= "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>//js in Bind mode (3) <body> <button id= "BTN" > click </button> </body> <script type= "Text/java Script "> 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) when handling the event. document.getElementById ("Btn"). Attachevent (' onclick ', btclick); IE, console output: Window//this points to a Global object--window object </script>
Run result analysis: The above 2 kinds of common event binding methods, the event binding on the page element (onclick= "Btclick ();" ), this is the global object, and in JS it is bound to the elment element of the binding event except for the Attachevent bound event method (this point is the global object).
Resources:
Http://www.qdfuns.com/notes/16738/aa32a299479386c9c1fc254ef0dc6fcb.html
The problem with this point in JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
