How to use this keyword in javascript

javascript| Keywords | detailed in the OBJECT-ORIENTED programming language, we are very familiar with this keyword. For example, C + +, C # and Java provide this keyword, although at the beginning of learning to feel more difficult, but as long as the understanding, it is very convenient and meaningful to determine. JavaScript also provides this keyword, but it's much more "confusing" than the classic Oo language.

Here's a look at what's confusing about how to use all of this in JavaScript?

1, in the HTML element event properties inline way to use the This keyword: <div >division element</div>

Our commonly used method is here: Javascirpt:eventhandler (this), such a form. But you can actually write any legitimate JavaScript statements here, and if you're happy to define a class here, you can (but it will be an inner class). The principle here is that the scripting engine generates an Anonymous member method for a div instance object, and the onclick points to this method.

2. Use the This keyword in the event handler function using the DOM method:

<div id= "Elmtdiv" >division element</div>
<script language= "JavaScript" >
var div = document.getElementById (' Elmtdiv ');
Div.attachevent (' onclick ', EventHandler); function EventHandler ()
{
Use this here
}
</script>

The This keyword in the EventHandler () method indicates that the object is the window object for IE. This is because EventHandler is just an ordinary function, and for attachevent, the script engine has no relationship to its invocation and the Div object itself. You can also look at the caller property of EventHandler, 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 function in DHTML mode:

<div id= "Elmtdiv" >division element</div>
<script language= "JavaScript" >
var div = document.getElementById (' Elmtdiv ');
Div.onclick = function ()
{
Use this here
};
</script>

Here the This keyword indicates a DIV element object instance that uses DHTML in the script to assign a EventHandler method directly to the Div.onclick and adds a member method to the Div object instance. The difference between this and the first approach is that the first approach is to use HTML, which is DHTML, and the script resolution engine no longer generates 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 in the JavaScript impersonation class definition, which is very familiar with the situation in other OO languages. But this requires that member properties and methods must be referenced using the This keyword, and running the program above will be told MyName undefined.

5. Add the This keyword in the prototype method to the script engine internal object:

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 ());

This here refers to an instance of the class being added to the prototype, somewhat similar to the class definition in 4, nothing too special.

6, combine 2&4, say a more confusing this keyword uses:

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'll say it. Results, the page will be displayed after the run: "Division Element", and then click on the text "division element", will show: "Undefined."

7, CSS expression expression in the use of this keyword:

<table width= "height=" >
<tr>
<td>
<div style= "width:expression (this.parentElement.width);
Height:expression (this.parentElement.height); " >
Division Element</div>
</td>
</tr>
</table>

This here is considered to be the same as in 1, it also refers to the div element object instance itself.

8. Use this keyword in internal functions in functions:

function Outerfoo ()
{
This. name = ' Outer name ';

function Innerfoo ()
{
var name = ' Inner name ';
Alert (Name + ', ' + this.) Name);
}
return innerfoo;
}
Outerfoo () ();

The run result is: "Inner name, Outer name." As we explained in 2, here's the result if "Inner Name, undefined" seems more reasonable? But the correct result is indeed the former, which is due to the problem of JavaScript variable scoping, and detailed knowledge of the recommended reference to the keyword "VAR" in JavaScript using the Xiang solution .

Having said so much about this in JavaScript, this most fundamental feature is consistent with the definition in OO language. The reason why there are so many seemingly confusing uses is that the JavaScript language (the content of the interpreter and the language itself) is implemented on an OO (object-based) basis, with all its data types being objects, and a super object such as object. But the language is running (runtime), it does not follow a complete OO feature, so there is a reference to this confusion.