this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,
function test(){
this.x = 1;
}
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。
下面分四种情况,详细讨论this的用法。
情况一:纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
请看下面这段代码,它的运行结果是1。
function test(){
this.x = 1;
alert(this.x);
}
test(); // 1
为了证明this就是全局对象,我对代码做一些改变:
var x = 1;
function test(){
alert(this.x);
}
test(); // 1
运行结果还是1。再变一下:
var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0
情况二:作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
情况三 作为构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1
运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2
运行结果为2,表明全局变量x的值根本没变。
情况四 apply调用
apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0
apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改为
o.m.apply(o); //1
运行结果就变成了1,证明了这时this代表的是对象o。
(完)
另外介绍:
javascript 中this 的用法:
1.<div
onclick="// 可以在里面使用this">division
element</div> this 指向div2. <div id="elmtDiv">division
element</div>
<script
language="javascript">
var div =
document.getElementById('elmtDiv');
div.attachEvent('onclick',
EventHandler); //attachEvent把div的onclick事件和一个方法绑定
function EventHandler()
{
// 在此使用this
}
</script>在此this
指向window对象,若要引用div对象this.event.srcElement;3、用DHTML方式在事件处理函数中使用this关键字:
<div
id="elmtDiv">division element</div>
<script
language="javascript">
var div =
document.getElementById('elmtDiv');
div.onclick = function()
{
//
在此使用this
};
</script>产生的方法同上,但此处的this
指向div4、类定义中使用this关键字:
function JSClass()
{
var
myName = 'jsclass';
this.m_Name = 'JSClass';
}
JSClass.prototype.ToString = function()
{
alert(myName + ',
' + this.m_Name);
};
var jc = new JSClass();
jc.ToString();//这是JavaScript模拟类定义中对this的使用,这个和其它的OO语言中的情况非常的相识。但是这里要求成员属性和方法必须使用this关键字来引用,运行上面的程序会被告知myName未定义。5、为脚本引擎内部对象添加原形方法中的this关键字:
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指代的是被添加原形的类的实例,和4中类定义有些相似,没有什么太特别的地方。
6、结合2&4,说一个比较迷惑的this关键字使用:
view plaincopy to clipboardprint?
- 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();
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();
我就说说结果,页面运行后会显示:"division element",确定后点击文字"division element",将会显示:"undefined"。
7、CSS的expression表达式中使用this关键字:
- <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>
<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>
这里的this看作和1中的一样就可以了,它也是指代div元素对象实例本身。
8、函数中的内部函数中使用this关键字:
view plaincopy to clipboardprint?
- function OuterFoo()
- {
- this.Name = 'Outer Name';
- function InnerFoo()
- {
- var Name = 'Inner Name';
- alert(Name + ', ' + this.Name);
- }
- return InnerFoo;
- }
- OuterFoo()();
function OuterFoo() { this.Name = 'Outer Name'; function InnerFoo() { var Name = 'Inner Name'; alert(Name + ', ' + this.Name); } return InnerFoo; } OuterFoo()();
运行结果显示是:"Inner Name, Outer Name"。按我们在2中的讲解,这里的结果如果是"Inner Name, undefined"似乎更合理些吧?但是正确的结果确实是前者,这是由于JavaScript变量作用域的问题决定的,详细了解推荐参看"原来JScript中的关键字'var'还是有文章的"一文及回复。
来源:javascript:void(0)
-- |
归纳起来,JavaScript中的this用法有以下3种(详细用法参原文):
1.在HTML元素事件属性 或 CSS的expression表达式 中inline方式使用this关键字——对应原文的1、7
2.在事件处理函数中使用this关键字——对应原文的2、3
其中可分为两种方式
(1)DOM方式——此种方式的结果是this指向窗口(window)对象
(2)DHTML方式——此种方式的结果是this指向div元素对象实例
3.在类定义中使用this关键字并在其 内部函数 或 成员函数(主要是prototype产生)中使用——对应原文的4、5、8
javascript 中this 的用法:
1.<div
onclick="// 可以在里面使用this">division
element</div> this 指向div2. <div id="elmtDiv">division
element</div>
<script
language="javascript">
var div =
document.getElementById('elmtDiv');
div.attachEvent('onclick',
EventHandler); //attachEvent把div的onclick事件和一个方法绑定
function EventHandler()
{
// 在此使用this
}
</script>在此this
指向window对象,若要引用div对象this.event.srcElement;3、用DHTML方式在事件处理函数中使用this关键字:
<div
id="elmtDiv">division element</div>
<script
language="javascript">
var div =
document.getElementById('elmtDiv');
div.onclick = function()
{
//
在此使用this
};
</script>产生的方法同上,但此处的this
指向div4、类定义中使用this关键字:
function JSClass()
{
var
myName = 'jsclass';
this.m_Name = 'JSClass';
}
JSClass.prototype.ToString = function()
{
alert(myName + ',
' + this.m_Name);
};
var jc = new JSClass();
jc.ToString();//这是JavaScript模拟类定义中对this的使用,这个和其它的OO语言中的情况非常的相识。但是这里要求成员属性和方法必须使用this关键字来引用,运行上面的程序会被告知myName未定义。5、为脚本引擎内部对象添加原形方法中的this关键字:
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指代的是被添加原形的类的实例,和4中类定义有些相似,没有什么太特别的地方。