JAVA & XML & JAVASCRIPT & AJAX & CSS

Web 2.0 技术储备............

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  77 随笔 :: 17 文章 :: 116 评论 :: 0 Trackbacks

[from] http://birdshome.cnblogs.com/archive/2005/06/07/169168.html

在"JavaScript中this关键字使用方法详解"一文中,我曾例举了在JavaScript和JScript中的8种this关键字的方式。这不又发现还有两种this关键字的使用方式当时没有说到,现补充说明一下。并且通过第一种this关键字使用的说明,能让我们更好的理解JavaScript作为Object-Based语言的本质。

    一种是和JavaScript类中的定义有关,我们知道当我们定义如下类的时候: 


function  JSClass()
{
}

JSClass.prototype.m_Properties  =   100 ;

JSClass.prototype.ToString  =   function ()
{
    alert(
this .m_Properties);
}


    方法ToString中的this.m_Properties就是100,那么下面这种定义呢?

function  JSClass()
{
}

JSClass.m_Properties 
=  -1 00 ;

JSClass.ToString()
{
    alert(
this .m_Properties);
}


    这时ToString中的这个this.m_Properties是啥?是-100。一定吗?这个不一定了,这得看我们怎么调用这个ToString方法。

JSClass.ToString();
var  fun  =  JSClass.ToString();
fun();


    这时的运行结果居然是:-100和undefined。真是郁闷哈,怎么才能运行fun得到-100呢?需要这样来为fun赋值:
 

var  fun  =   function () { JSClass.ToString(); }
fun();


    呵呵,这样就是-100了。好像挺废话的,最终不还是调用的JSClass.ToString()吗?这个我们后面再说,看看把这两个JSClass合在一起是什么情况呢?


function  JSClass()
{
}

JSClass.m_Properties 
=   - 100 ;
JSClass.prototype.m_Properties 
=   100 ;

JSClass.ToString 
=   function ()
{
    alert(
this .m_Properties);
}

JSClass.prototype.ToString 
=   function ()
{
    alert(
this .m_Properties);
}


    这两个ToString()方法,和里面的this关键字它们是什么关系呢?看下面的示例:

var  jsclass  =   new  JSClass();
jsclass.ToString();
JSClass.ToString();


    结果为:100和-100。这里的jsclass实际上是JavaScript的语言机制,通过new关键字的说明来创建的一个新的实例。而JSClass是什么呢?他们本就是对象实例,只是长得像个函数,也像一个类的说明。对于this的问题,第一个jsclass.ToString()方法里的this是指新创建实例,而JSClass.ToString()方法里的this是值得JSClass这个对象实例。

    理解了这两个this指代的东西的不同本质,也就能更好的明白,为什么JavaScript叫做Object-Based的语言,而更加清楚它和Object-Oriented语言的本质区别。

    回头再说一下补充第二中this的使用方法,就是在使用eval方法的时候,这个时候的this是什么呢?看看:

alert( this   ===  eval( " this " ));


    的结果是什么?是true!这是因为eval内代码被执行的作用域就是当前页面本身的说。

posted on 2005-06-07 13:37 birdshome 阅读(1883) 评论(10)  编辑 收藏收藏至365Key 所属分类: JScript&DHTML开发

评论

#  re: JScript中的"this"关键字使用方式补充  回复  

hehe,都快晕了
2005-06-08 01:09 | robaggio

#  re: JScript中的"this"关键字使用方式补充  回复  

JSClass.m_Properties = -100;

这种方式是定义静态属性,当然不能用this来调用啦。
2005-08-15 19:20 | Avlee

#  re: JScript中的"this"关键字使用方式补充  回复  

@Avlee
。。。你看完文章了吗?
2005-08-15 22:21 | birdshome

#  re: JScript中的"this"关键字使用方式补充  回复  

有种类叫Function,任何函数/构造器,都是它的实例
改变这个构造器的原型中的属性自然和改变这个构造器对象的属性是不一样的
2005-08-29 23:13 | ShiningRay

#  re: JScript中的"this"关键字使用方式补充  回复  

一点心得,请birdhome兄斧正!
在javascript里面,自定义类的定义中的this和该类的方法定义中的this不一样,得用call函数或者apply函数转换。这对于用惯了c#刚刚接触javascript面向对象编程的朋友(本人就是其中之一)来说是个容易出错的地方。javascript函数定义中的this就是指函数本身,不能想当然的认为它指的是外层的类实例或者其他什么别的东西。prototype.js里面的bind方法可以用来转换这个this。而且利用javascript函数的一个似乎是比较奇怪的特性——函数定义的参数个数可以跟函数调用时传入的参数个数完全不同,可以很方便的实现转换过程中的多参数传递问题,也就是说只要写一个bind函数,就可以转换任意函数的上下文。

Function.prototype.Bind = function(obj){
var method = this;
return function(){
method.apply(obj,arguments);
}
}

在类定义中,把obj换成this,然后调用已定义方法的Bind方法,就可以转换方法定义中的this指针了。上面函数中的arguments是调用时实际传给function(){...}的参数数组,所以比如我要写一个公开的Send(arg1,arg2,arg3),它里面有this指针,怎么办呢?我先写一个Pri_Send(arg1,arg2,arg3),然后在类定义(注意是类定义中)中这么写:
this.Send = this.Pri_Send.Bind();
大功告成,现在可以尽情地在类的实例上使用Send方法了。而且对于那些参数个数不同或者根本没有参数的方法,Bind()方法同样适用,这都是arguments的功劳,呵呵。
此段代码在IE6.0,FireFox1.0.7,opera 8.51下测试通过。应该没有太大的平台问题。
2006-01-13 17:48 | hzy

#  re: JScript中的"this"关键字使用方式补充  回复  

@hzy
"自定义类的定义中的this和该类的方法定义中的this不一样",这句话我没有明白,你是说的这种情况吗?
function JSClass()
{
    
this.Property = 'abc';
}


JSClass.prototype.Foo()
{
    alert(
this.Property);
}

这两个this是指示的同一个东西呀。
2006-01-13 22:18 | birdshome

#  re: JScript中的"this"关键字使用方式补充  回复  

真的非常惭愧,今天早上我用了简单的几行代码就证明我上面的结论是错误的。
Bind()方法有用且正确,但在这里不需要,因为javascript并不像我昨天认为的那样奇怪,两个this的确指的是同一个类型实例。
经过仔细的审查(我自己的代码),发现了这个错误观点的根源。
虽然在birdhome兄所说的情况下,两个this指的是同一个东西,但在某些特定情况下,却并非如此。其根本原因还请birdhome兄多多指教。谢。
我的代码中就有两处这样的情况。
我使用正流行的ajax设计了一个简单的AsyncCommunicator类,用来提供更丰富的编程接口。其中两个功能就是“更细粒度的事件处理”和“超时处理”。
AsyncCommunicator类包含一个XmlHttpRequest属性,这个属性本身就是一个XMLHttpRequest类的实例。因此在AsyncCommunicator类的定义中,可以如下写法访问这个实例:
this.XmlHttpRequest
现在,我要给AsyncCommunicator类定义更多事件,方法是利用XMLHttpRequest的onreadystatechange属性。如何做呢?
我是这么写的:
AsyncCommunicator{
this.XmlHttpObj= GetNewXmlHttpRequest();
this.XmlHttpObj.onreadystatechange = this.EventStateChangeHandler;
this.EventStateChangeHandler = function(){
switch(this.XmlHttpObj.readyState){ case 3: this.OnTransferBack(this); break; case 4: if (!this.Pri_Aborted){
this.Pri_HasReceived = true; this.OnReceive(this);
switch(parseInt(((this.XmlHttpObj.status).toString()).charAt(0))){ case 1: this.OnReceive1xx(this); break;
case 2:
this.OnReceive2xx(this);
break;
case 3: this.OnReceive3xx(this);
break;
case 4:
this.OnReceive4xx(this);
break;
case 5: this.OnReceive5xx(this);
break;
default:
break;
} //switch } //(!this.Pri_Aborted) break; default: break;
} //switch
} //function
} //AsyncCommunitor

注意这句this.XmlHttpObj.onreadystatechange = this.EventStateChangeHandler,这句就是加Bind()方法正确,不加就会出错的源头。经过思考,我觉得这个this,更确切一点说,函数的上下文,已经变了,不再是AsyncCommunitor,究竟是什么我也没试出来,是否是XmlHttpObj?请birdhome兄指教。如果经过Bind方法转换,把this赋给Bind()方法作参数,就可与更正这个问题。如下:
this.XmlHttpObj.onreadystatechange = this.EventStateChangeHandler.Bind(this);
我被这个问题折磨了一个晚上,因此一旦解决就紧接着犯了以偏概全的“左”倾错误,呵呵,把所有内部定义的方法都看成这种情况,因此每个方法都加了Bind()方法,想来真是惭愧,正如birdhome兄所言,通常情况下无须如此,因此已经改正。

还有第二个情况,就是
this.AbortWhenTimeOut方法的调用。这个方法定义如下。:
this.Ori_AbortWhenTimeOut = function(){ if (!this.Pri_HasReceived) { this.Pri_Aborted = true; this.OnTimeOut(this); this.Abort(); } }
在xmlhttprequest对象的open方法之后和send方法之前加入window.setTimeout方法(放在send之后就不行,奇怪,请指教),参数中就包括这个this.AbortWhenTimeOut方法,现在想来,很可能是window.setTimeout方法改变了this.AbortWhenTimeOut方法的上下文,导致该方法定义中的this指针的含义发生变化,因此不能正常执行。同样,自从服用了Bind()之后,腰不酸了,背不痛了,腿也不抽筋了,走路也有劲了。呵呵。

关于上下文的这些奇妙变化(至少我觉得挺奇妙的,可能是受才智水平所限,惭愧),birdhome兄能否指教一二?
谢谢。
2006-01-14 15:49 | hzy

#  re: JScript中的"this"关键字使用方式补充  回复  

PS,钦佩birdshome兄的专业水平。我隐约觉得javascript语言的诸多特性,是逻辑性很强的整体(其实事实也必然如此,用不着我去觉得,呵呵),例子举的再多也只是“身在此山中”。遗憾我目前的水平还远远远远没有达到可以跳出语言之外来论述语言的原理和本质。不知道birdshome兄是否有这个空闲和兴趣对javascript语言做一个总结性发言,不只是how 更重要的是why。
这只是个非常即兴的提议,更多的是某种期待。无论如何,我希望我自己也能做到,someday。
这差不多应该也属于技术区的非技术,呵呵,类似的话不会说第二次了。
以后只讨论技术。
2006-01-14 16:49 | hzy

#  re: JScript中的"this"关键字使用方式补充  回复  

@hzy
    this.XmlHttpObj.onreadystatechange = this.EventStateChangeHandler后,EventStateChangeHandler方法里的this在事件触发后是指的window对象。第二个使用window.setTimeout也是同样的问题,使用setTimeout触发的方法,其内部的this也是指的window。
    至于:对javascript语言做一个总结性发言。我不是很明白你具体指的内容,毕竟JavaScript这门大家认为"简单"的小脚本,还是有挺多可圈点的内容,似乎很难简单的就能"总结性"道来:(
2006-01-15 02:11 | birdshome

#  re: JScript中的"this"关键字使用方式补充  回复  

我给window定义(或者说覆盖?)了一个toString方法,让它返回"window",然后在两个方法开头调用一下,果然this指的是window。多谢birdshome兄!
现在我很想知道的是——为什么?
这两个问题背后的共性,或者说原理或者本质,究竟是什么?如何区分某个方法调用是否是这种情况?
请birdshome兄不吝赐教。
感谢!
posted on 2006-03-20 09:31 Web 2.0 技术资源 阅读(722) 评论(0)  编辑  收藏 所属分类: Javascript

只有注册用户登录后才能发表评论。


网站导航: