On the usage of this in JavaScript

Really to explain this thing, only to find that it is not so simple, spent some time, wrote a few small demo, let us have a look. Well, to the human mirror, know the gains and losses, it seems that this sentence is very reasonable.

If this is a global function, this is the Window object, and the various properties or methods defined in the function can be accessed outside of the function, provided that the function needs to be invoked.

The code is as follows	Copy Code
<script type= "Text/javascript" > Use this in function function A () { if (this = = window) { Alert ("This = = Window"); This.fielda = "I ' m a field"; This.methoda = function () { Alert ("I ' m a function"); } } } A (); If you do not call the A method, the properties defined inside will not get alert (Window.fielda); MethodA (); </script>

If you instantiate an object by using new, this is not equal to the Window object, this points to an instance of function A:

The code is as follows	Copy Code
<script type= "Text/javascript" > Use this second in function function A () { if (this = = window) { Alert ("This = = Window"); } else { Alert ("This!= window"); } This.fielda = "I ' m a field"; } var B = new A (); alert (B.fielda); </script>

Using the prototype extension method, you can use this to obtain an instance of the source object, which cannot be obtained through the prototype chain:

The code is as follows	Copy Code
<script type= "Text/javascript" > Use this third in function function A () { This.fielda = "I ' m a field"; var Privatefielda = "I ' m a var"; } A.prototype.extendmethod = function (str) { Alert (str + ":" + This.fielda); alert (Privatefielda); Www.111cn.net Error }; var B = new A (); B.extendmethod ("from prototype"); </script>

"" JS

Whether you are referencing a function directly or instantiating a function, this in the closure function that it returns is pointing to window.

The code is as follows	Copy Code
' JS <script type= ' text/javascript '        // Use this four         function A () {       in function        alert (this = = window);             var that = this;             var func = function () {                  alert (this = = window);                 alert (that);            };             return func;        } var B = A (); b (); var C = new A (); C (); </script>

Use this in HTML, which typically represents the element itself:

The code is as follows	Copy Code
<div onclick= "Test (This)" id= "div" >click me</div> <script type= "Text/javascript" > function test (obj) { alert (obj); } </script>

Register the event under IE and Firefox (Chrome), which points to the window and the element itself, respectively:

The code is as follows

Copy Code

<div id= "Div" >click me</div> <script type= "Text/javascript" > var div = document.getElementById ("div"); if (div.attachevent) { Div.attachevent ("onclick", function () { Alert (this = = window); var e = event; Alert (E.srcelement = = this); }); } if (Div.addeventlistener) { Div.addeventlistener ("click", Function (e) { Alert (this = = window); e = e; Alert (E.target = = this); }, False); } </script>