Although I found it difficult when I started learning, as long as I understood it, it is very convenient and meaningful to use. JavaScript also provides this keyword, but it is much more "chaotic" than in classic OO languages.
Let’s take a look at what’s confusing about using various this methods in JavaScript?
1. Use this keyword in the inline method in the HTML element event attribute:
<div onclick="
// This can be used inside
">division element</div>
The method we generally use is to use: javascipt: EventHandler(this), this form. However, you can actually write any legal JavaScript statement here. If you are happy to define a class here (but it will be an internal 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 this keyword in event handling functions in DOM mode:
<div >division element</div>
<script language="javascript">
var div = ('elmtDiv');
('onclick', EventHandler);
function EventHandler()
{
// Use this here
}
</script>
At this time, the object indicated by this keyword in the EventHandler() method 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 property of EventHandler, which is equal to null. If we want to get a div object reference in this method, we should use:.
3. Use this keyword in event handling functions in DHTML:
<div >division element</div>
<script language="javascript">
var div = ('elmtDiv');
= function()
{
// Use this here
};
</script>
The content indicated by this keyword here is a div element object instance. In the script, the DHTML method is used to directly assign an EventHandler method, which 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 is to use HTML method, and here is the DHTML method, where the script parsing engine will not generate anonymous methods again.
4. Use this keyword in class definition:
function JSClass()
{
var myName = 'jsclass';
this.m_Name = 'JSClass';
}
= function()
{
alert(myName + ', ' + this.m_Name);
};
var jc = new JSClass();
();
This is the use of this in JavaScript simulation class definition, which is very familiar with the situation in other OO languages. However, here requires that member attributes and methods must be referenced using this keyword. Running the above program will be told that myName is not defined.
5. Add this keyword in the prototype method to the internal objects of the script engine:
= function()
{
var fnName = ();
fnName = (0, ('('));
fnName = (/^function/, '');
return (/(^\s+)|(\s+$)/g, '');
}
function foo(){}
alert(());
This here refers to an instance of the class with the prototype added. It is somewhat similar to the class definition in 4, and there is nothing special about it.
6. Combined with 2&4, say a more confusing keyword to use:
function JSClass()
{
this.m_Text = 'division element';
this.m_Element = ('DIV');
this.m_Element.innerHTML = this.m_Text;
this.m_Element.attachEvent('onclick', );
}
= function()
{
(this.m_Element);
}
= function()
{
alert(this.m_Text);
};
var jc = new JSClass();
();
();
I will talk about the results. After the page is running, it will display: "division element". After confirming, click the text "division element", and it will display: "undefined".
7. Use this keyword in CSS expression expression:
<table width="100" height="100">
<tr>
<td>
<div style="width: expression();
height: expression();">
division element</div>
</td>
</tr>
</table>
This is as good as the one in 1, and it also refers to the div element object instance itself.
8. Use this keyword in the internal function in the function:
function OuterFoo()
{
= 'Outer Name';
function InnerFoo()
{
var Name = 'Inner Name';
alert(Name + ', ' + );
}
return InnerFoo;
}
OuterFoo()();
The running result shows: "Inner Name, Outer Name". According to what we explained in 2, if the result here is "Inner Name, undefined", does it seem more reasonable? But the correct result is indeed the former, which is determined by the problem of JavaScript variable scope. Please refer to the detailed information.It turns out that there is still article in the keyword 'var' in JScript"A post and reply
Let’s take a look at what’s confusing about using various this methods in JavaScript?
1. Use this keyword in the inline method in the HTML element event attribute:
<div onclick="
// This can be used inside
">division element</div>
The method we generally use is to use: javascipt: EventHandler(this), this form. However, you can actually write any legal JavaScript statement here. If you are happy to define a class here (but it will be an internal 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 this keyword in event handling functions in DOM mode:
<div >division element</div>
<script language="javascript">
var div = ('elmtDiv');
('onclick', EventHandler);
function EventHandler()
{
// Use this here
}
</script>
At this time, the object indicated by this keyword in the EventHandler() method 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 property of EventHandler, which is equal to null. If we want to get a div object reference in this method, we should use:.
3. Use this keyword in event handling functions in DHTML:
<div >division element</div>
<script language="javascript">
var div = ('elmtDiv');
= function()
{
// Use this here
};
</script>
The content indicated by this keyword here is a div element object instance. In the script, the DHTML method is used to directly assign an EventHandler method, which 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 is to use HTML method, and here is the DHTML method, where the script parsing engine will not generate anonymous methods again.
4. Use this keyword in class definition:
function JSClass()
{
var myName = 'jsclass';
this.m_Name = 'JSClass';
}
= function()
{
alert(myName + ', ' + this.m_Name);
};
var jc = new JSClass();
();
This is the use of this in JavaScript simulation class definition, which is very familiar with the situation in other OO languages. However, here requires that member attributes and methods must be referenced using this keyword. Running the above program will be told that myName is not defined.
5. Add this keyword in the prototype method to the internal objects of the script engine:
= function()
{
var fnName = ();
fnName = (0, ('('));
fnName = (/^function/, '');
return (/(^\s+)|(\s+$)/g, '');
}
function foo(){}
alert(());
This here refers to an instance of the class with the prototype added. It is somewhat similar to the class definition in 4, and there is nothing special about it.
6. Combined with 2&4, say a more confusing keyword to use:
function JSClass()
{
this.m_Text = 'division element';
this.m_Element = ('DIV');
this.m_Element.innerHTML = this.m_Text;
this.m_Element.attachEvent('onclick', );
}
= function()
{
(this.m_Element);
}
= function()
{
alert(this.m_Text);
};
var jc = new JSClass();
();
();
I will talk about the results. After the page is running, it will display: "division element". After confirming, click the text "division element", and it will display: "undefined".
7. Use this keyword in CSS expression expression:
<table width="100" height="100">
<tr>
<td>
<div style="width: expression();
height: expression();">
division element</div>
</td>
</tr>
</table>
This is as good as the one in 1, and it also refers to the div element object instance itself.
8. Use this keyword in the internal function in the function:
function OuterFoo()
{
= 'Outer Name';
function InnerFoo()
{
var Name = 'Inner Name';
alert(Name + ', ' + );
}
return InnerFoo;
}
OuterFoo()();
The running result shows: "Inner Name, Outer Name". According to what we explained in 2, if the result here is "Inner Name, undefined", does it seem more reasonable? But the correct result is indeed the former, which is determined by the problem of JavaScript variable scope. Please refer to the detailed information.It turns out that there is still article in the keyword 'var' in JScript"A post and reply