Detailed explanation of how to use this keyword in JavaScript_javascript skills

In object-oriented programming languages, we are very familiar with the this keyword. For example, C, C# and Java all provide this keyword. Although it is 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:

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 processing function using DOM:

Copy code The code is as follows:

division element

At this time, the this keyword in the EventHandler() method indicates that the object is the window object of IE. 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 this keyword in the event processing function:

division element

The content indicated by the this keyword here is the div element object instance. Using DHTML in the script to directly assign an EventHandler method to div.onclick is equivalent to adding an EventHandler method to the div object instance. A member method. 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 the class definition:

Copy the code The code is as follows:

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:

Copy code The code is as follows:

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()); Similar, nothing too special

6. Combine 2&4 and use a confusing this keyword:

Copy code The code is as follows: 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 expression expression:

Copy code The code is as follows : : expression(this.parentElement.width); Height: expression(this.parentElement.height);"> d>

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

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

Copy code


The code is as follows :

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 more information, it is recommended to refer to the article "It turns out that the keyword 'var' in JScript still has an article" and the reply.

Having said so much about the usage of this in JavaScript, in fact, the most fundamental characteristics of this are consistent with the definition in OO language. The reason why there are so many seemingly confusing ways to use it is because the JavaScript language (the interpreter and the content of the language itself) itself follows OO (Object-based) in implementation. Even all its data types are objects. Object is such a super Object. However, this language does not follow complete OO characteristics in runtime, so there is confusion in the reference of this.

Where else is this used in JavaScript? That's all I can think of for now, welcome to discuss and add.