Detailed explanation of JAVASCRIPT THIS object-oriented_js object-oriented

Although it seems difficult at the beginning of learning, once you understand it, it is very convenient and meaningful to use. JavaScript also provides this keyword, but it is much more "confusing" to use than in classic OO languages.
Let’s take a look at what’s confusing about the various ways of using this in JavaScript?
1. Use this keyword inline in the HTML element event attribute:

// You can use this
">division element

The most common method we use here is: javascirpt: EventHandler(this), in this form. However, you can actually write any legal JavaScript statement here. If you like, you can define a class here (but it will be an inner class). The principle here is that the script engine generates an anonymous member method of the div instance object, and onclick points to this method.
2. Use the this keyword in the event handling function using DOM:

division element

EventHandler() at this time The this keyword in the method indicates that the object is IE's window object. This is because EventHandler is just an ordinary function. After attachEvent, the script engine's call to it has nothing to do with the div object itself. At the same time, you can look at the caller attribute of EventHandler, which is equal to null. If we want to get the div object reference in this method, we should use: this.event.srcElement.
3. Use DHTML to use the this keyword in the event processing function:

division element


The this keyword here indicates The content is a div element object instance. Using DHTML in the script to directly assign an EventHandler method to div.onclick is equivalent to adding a member method to the div object instance. The difference between this method and the first method is that the first method uses the HTML method, and here is the DHTML method. The script parsing engine in the latter will no longer generate 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 JavaScript simulation class definition. This is very similar to the situation in other OO languages. However, it is required that member properties and methods must be referenced using the this keyword. If you run the above program, you will be informed that myName is undefined.
5. Add the this keyword in the prototype method for the internal object of the script 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()); this here refers to is an instance of a class with a prototype added, which is somewhat similar to the class definition in 4, there is nothing too special about it. 6. Combined with 2&4, let’s talk about a confusing 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();
Let me talk about the results. After the page is run, it will display: "division element". After confirmation, click the text "division element" and it will display: "undefined".

7. Use this keyword in CSS expressions:

division element

division element

This here can be regarded as the same as in 1. It also refers to the div element object instance itself.

8. Use the this keyword in the internal function in the function:

function OuterFoo()
{
this.Name = 'Outer Name';
function InnerFoo ()
{ var Name = 'Inner Name'; alert(Name ', ' this.Name); } return InnerFoo;
} OuterFoo( )(); The running result shows: "Inner Name, Outer Name". According to our explanation in 2, it seems more reasonable if the result here is "Inner Name, undefined", right? But the correct result is indeed the former. This is due to the problem of JavaScript variable scope. For detailed information, it is recommended to refer to "It turns out that the keyword 'var' in JScript still has an article " One article and reply