Home > Developer > JavaScript
This in JavaScript points to the problem, javascriptthis
His is an important keyword in object-oriented language. Understanding and mastering this keyword is crucial to the robustness and beauty of our code. This in javascript is different from pure object-oriented languages such as Java and C #, which makes this even more confusing and confusing.
This usage:
1. Pure Functions
2. Object method call
3. Use new to call the constructor
4. Internal functions
5. Use call/apply
6. Event binding
1. Pure Functions
Var name = 'this is Windows'; // defines the name attribute 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 ();
Running result analysis: this in pure functions all points to the global object, that is, window.
2. Object method call
Var name = 'this is Windows'; // defines the name attribute of the window. See this. whether name will call var testObj = {name: 'This is testObj ', getName: function () {console. log (this); // console output: testObj // this indicates the console of the testObj object. log (this. name); // console output: this is testObj} testObj. getName ();
Running result analysis: In the called method, this points to the object that calls this method.
3. Use new to call the constructor
Function getObj () {console. log (this); // console output: getObj {} // this indicates the newly created getObj object} new getObj ();
Running result analysis: this in the new constructor points to the newly generated object.
4. Internal functions
Var name = "this is window"; // defines the name attribute of the window. See this. whether name will call 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); // this can be obtained by pointing 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 JavaScript design error because no one wants to point this in internal functions to a global object. The general processing method 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 Windows'; // defines the name attribute of the window. See this. whether name will call var testObj1 = {name: 'This is testobj1', getName: function () {console. log (this); // console output: testObj2 // this indicates the console of the testObj2 object. 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, but the 2nd parameters of the two are different:
[1] call (thisArg [, arg1, arg2 ,... ]); // List of 2nd parameters used: arg1, arg2 ,...
[2] apply (thisArg [, argArray]); // use the array of parameters for the first 2nd parameters: argArray
Analysis of running results: 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 errors are caused by this.
// Bind <script type = "text/javascript"> function btClick () {console. log (this); // console output: window // this refers to the Global Object -- window object} </script> <body> <button id = "btn" onclick = "btClick (); "> click </button> </body> // binding method in js (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} docum Ent. getElementById ("btn "). onclick = btClick; document. getElementById ("btn "). onclick (); // default click </script> // binding method in js (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> // binding method in js (3) <body> <B Utton 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 points to the Element button object. The function (method) is used for event processing. Document. getElementById ("btn "). attachEvent ('onclick', btClick); // used by IE, console output: Window // this indicates a Global Object -- window object </script>
Running result analysis: the above two common event binding methods are used to bind events (onclick = "btClick ();") on the page Element. this points to a global object; binding in js, apart from the event Method bound by attachEvent (this points to a Global Object), this points to the Elment element of the binding event.
References:
Http://www.qdfuns.com/notes/16738/aa32a299479386c9c1fc254ef0dc6fcb.html
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
