In object-oriented programming languages, we are very familiar with this keyword. For example, C , C # and Java, all provide this keyword, although it feels more difficult to start learning, but as long as it understands, it is very convenient and meaningful. JavaScript also provides this THIS keyword, but it is more than "confusion" than the classic OO language. Let's take a look at what is more chaos in the use of various THIS in JavaScript? 1. Use this keyword in the HTML element event attribute:
<
Div
Onclick
= "/ / Can be used inside"> DiVision Element
We generally compare the commonly used methods are here: JavaScirpt: EventHandler (this), such a form. However, here can actually write any legal JavaScript statement, if you are happy to define a class (but will be an internal class). The principle here is that the scripting engine generates an anonymous member method of a DIV instance object, and OnClick points to this method. 2, use the THIS keyword in the event handler with the DOM mode:
<
Div
id
= "Elmtdiv"
>
DiVision Element
Div
>
<
Script
Language
= "JavaScript"
>
Var div = document.getlementByid ('Elmtdiv'); Div.attachevent ('OnClick', EventHandler); Function EventHandler () {// Use this} here}
Script
>
The THIS keyword in the eventHandler () method, the object indicated is the Window object of IE. This is because EventHandler is just a normal function. After Attachevent, the script engine does not have any relationship to its calls and DIV objects themselves. At the same time, you can look at EventHandler's Caller property, which is equal to NULL. If we want to get a DIV object reference in this method, we should use: this.Event.srcelement. 3. Use the THIS keyword in the event handler in mode:
<
Div
id
= "Elmtdiv"
>
DiVision Element
Div
>
<
Script
Language
= "JavaScript"
>
VAR div = document.getlementByid ('Elmtdiv'); div.onclick = function () {// Use this} here};
Script
>
The content of the THIS keyword indicated is the DIV element object instance, and the method of assigning an EventHandler for DIV.Onclick in the script directly to Div.Onclick, equal to adding a member method for the DIV object instance. This approach and the first method is that the first method is to use the HTML mode, and this is a DHTML method, the latter script parsing engine will not regenerate into anonymous methods. 4. Use this keyword in class definition:
FUNCTION
Jsclass () {
VAR
MyName
=
'jsclass';
THIS
.m_name
=
'Jsclass';} jsclass.prototype.tostring
=
Function
() {Alert (MyName
','
THIS
.m_name);
VAR
JC
=
New
JSClass (); jc.tostring ();
This is the use of this and other OO languages in the JavaScript analog definition, this and other OO languages are very knowledgeable. However, the member attributes and methods required to be required here must use this keyword to reference, and run the above program will be inform that MyName is not defined.
5. Adding this THIS keyword in the original method for the scripting engine:
Function.prototype.getName
=
Function
() {
VAR
fnname
=
THIS
.tostring (); fnname
=
Fnname.substr
0
, Fnname.indexof (')); fnname
=
Fnname.replace
/ ^
FUNCTION
/
, '');
Return
Fnname.replace
/
(
^
/ s
)
|
(/ s
$)
/
g, '');
Function
Foo () {} alert (foo.getname ());
The this here refers to an example of the class that is added to the original shape, and the definition of the 4 mid-class definition is similar, there is nothing too special. 6, combined with 2 & 4, say a relatively confused THIS keyword:
Function
Jsclass () {
THIS
.m_text
=
'Division Element';
THIS
.m_element
=
Document.createElement ('Div');
THIS
.m_element.innerhtml
=
THIS
.m_text;
THIS
.m_element.attachevent ('onclick ",
THIS
.Tostring); Jsclass.Prototype.render
=
FUNCTION
() {Document.body.Appendchild (
THIS
.m_element; jsclass.prototype.tostring
=
FUNCTION
() {Alert
THIS
.m_text);
VAR
JC
=
New
JSClass (); jc.render (); jc.tostring ();
I will talk about the results, and the page will be displayed after running: "Division Element", then click "Division Element" and will be displayed: "undefined". 7. Use this keyword in the expression of CSS:
<
TABLE
Width
= "100"
HEIGHT
= "100"
>
<
TR
>
<
TD
>
<
Div
Style
= "width: expression (this.parentelement.width); Height: Expression (this.parentelement.Height);">>>>>>>>>>>>>>>>>>>>>>
DiVision Element
Div
>
TD
>
TR
>
TABLE
>
The this here is as follows as the same as in 1, it also enables the instance of the DIV element object. 8. Use this keyword in the internal function in the function:
FUNCTION
OUTERFOO () {
THIS
.Name .name
=
'Outer Name';
FUNCTION
Innerfoo () {
VAR
Name
=
'Inner Name'; Alert (Name
','
THIS
.Name);
Return
Outerfoo () ();
The results show is: "Inner Name, Outer Name". According to our explanation in 2, the result is "inner name, undefined" seems more reasonable? But the correct result is indeed the former, which is due to the problem of the JavaScript variable scope, detailed understanding of the recommendation to see "The keyword" var 'of JScript "or there is a copy of the article. Said that the usage of this multi-JavaScript, in fact, the most fundamental characteristics of this is also consistent with the definitions in the OO language. The reason why so many seemingly confused use is because the JavaScript language (the content of the interpreter and language itself) itself follows Object-based, even all of its data types, too Object This Super Object. However, this language is running (Runtime), there is no complete OO feature, so this referring to this referring is chaotic.
Transfer from: http://www.cnblogs.com/birdshome/archive/2005/03/07/95931.html
