当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 事件驱动的JScript面对象编程

Javascript
玩透弹出窗口
几个常用的日期函数
简单的脚本帮你编排JScript程序中的缩进
得到 words.js?hello,world! 参数的处理方法
如何在javascript中传值
可输入的select
IE支持的HTML元素的DISABLE属性在NETSCAPE4.76中的实现
利用xml数据岛实现多级关联下拉选择框的做法
利用Wipe等ActiveX技术,实现n(n>>2)幅图片轮换擦洗显示
Javascript技术实现真正的网上试听
JavaScript实现在线编辑表格
根据客户端的分辨率不同而重定向到不同网页的脚本
几种不刷新页面取数据的方法
web进度条
随手写的一个动态添加删除行的HTC行为组件
农历与阳历的对照
关于在页面中解决打印的几个问题
"打开,另存为,属性,打印"等14个JS代码
无提示框关闭IE窗口
实现上传(增删)多个文件的客户端写法。

Javascript 中的 事件驱动的JScript面对象编程


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 114 ::
收藏到网摘: n/a

在这里分享一下我对JScript的面对象编程的一些认识和一点解决方案。JScriptJavaScript差不多(当然有所不同),但本文中讲到的内容也可用于JavaScript

 

JScript支持面对象的一些属性,但他的this指针很奇怪,当有一个对象obj1中的一个成员函数用到this,如果有别一个对象obj2引用该函数,那这个this指向的不是obj1,而是obj2

下面我们来看一个例子:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head>

<body>

 

<p id="text">this is the element "p"</p>

<script language="jscript">

function obj1(){ //obj1

     this.innerText = "this is obj1";

}

function obj1.prototype.fun(){

     alert(this.innerText);

}

var o1 = new obj1; //对象o1

o1.fun(); //显示“this is obj1

text.onclick = o1.fun; //把对象o1的成员函数绑定到HTML元素text中,这是再点击“this is the element “p”。你会发现显示的是this is the element “p”,而不是this is obj1

 

</script>

</body></html>

从上面的例子中我们可以知道JScrpt中函数引用只是引用了函数的入口,并没有保存对象的引用。而this只是简单的指向调用函数的对象而已。JScript并无对象指针这种东西(可能我不知道,如果看文章的您知道的话,请告诉我(QQ:123737))。

 

在我们通常写一些要处理HTML元素的onclick事件的时候,我们会这样写

方法一:

<script language="jscript">

function fun(obj){

     alert(obj.innerText);

}

</script>

<p id="text" onclick="fun(this) ">element</p>

 

方法二:

<p id="text">element</p>

<script language="jscript">

function fun(){

     alert(this.innerText);

}

text.onclick = fun;

</script>

上面两个方法的动行结果是一样的,可能你会发现方法一的onclick="fun(this) "直现一些。方法二的fun更理性些。但方法一的fun(this)this太麻烦了,把代码改成:

<script language="jscript">

function fun(){

     alert(this.innerText);

}

</script>

<p id="text" onclick="fun()">element</p>

你会发现这个脚本是不能工作的。为什么??

当你用方法一书写时,实际上这时onclick的处理事件是这样的:

function anonymous() { fun(this) }

也就是说IEonclick事件创造了一个匿名函数,并在函数中调用了fun函数。由于调用anonymous的是对象text,所以this就把text的引用传给了fun函数。这时fun中的形参obj就指向text。如果您把事件绑定写成:

<p id="text" onclick="fun()">element</p>

则由于调用fun()的是函数anonymous而不是对象text,所以如果您在fun中使用this的话,这里this是不指向任何地方的。如果您alter(this)的话,您会发现他的值是undefined

在方法二中,onclick的处理事件就是fun,所以this是可用的,它指向text。但您千万不要把方法二中fun的定义写成:

function fun(obj){

     alert(obj.innerText);

}

text响应onclick事件调用onclick时是不传递任何参数给fun的,这时obj就是undefined了。

 

问题已经明确,但当我们要响应HTML的事件,而处理的信息又是存在于对象中时又该怎么办呢?(当然处理方法是基于纯事件驱动的)

我们可以这样:

<p id="text">click this</p>

<script language="jscript">

function obj(){

     this.innerText = "this is obj";

}

function obj.prototype.fun(){

     var self = this.obj; //得到obj1的引用。学过Delphi的都知道self是什么意思

//JScriptthis是不能重新赋值的,所以用self。学过Delphi的人都知道self是什么意思

     alert(self.innerText);

}

var obj1 = new obj;

text.obj = obj1;  //text添加一个新的属性obj,并赋于obj1的引用。

text.onclick = obj1.fun;

</script>

点击click this结果显示"this is obj"

使用该方法就可以用JScript纯事件驱动的程序了。