繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 事件驱动的JScript面对象编程
- Javascript
- [HTML/CSS/Javascript]WWTJS
- DynamicOptionList连动菜单代码
- 用meta实现的页面跳转代码
- 带缓冲的 收缩与展开内容效果
- 删除数组条目中重复的条目(可能有多个)，返回值是一个仅包含被删除的重复条目的新数组。
- javascript入门·对象属性方法大总结
- javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
- JavaScript 入门·JavaScript 具有全范围的运算符
- 用javascript实现模拟火焰
- JavaScript加密解密7种方法总结分析
- javascript一段创建层的代码
- 简洁的一个实现网页全屏代码
- 关于 byval 与 byref 的区别分析总结
- 表单填写时用回车代替TAB的实现方法
- javascript currentTarget对象介绍
- js文本中搜索关键词输入效果
- javascript实现的左右选择框效果代码
- JS网络游戏-(模拟城市webgame)提供的一些例子下载
- javascript最短的拖动代码[兼容FF]
- javascript实现的LI列表输出，隔行同色的代码
Javascript 中的 事件驱动的JScript面对象编程
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 397 ::
收藏到网摘: n/a
在这里分享一下我对JScript的面对象编程的一些认识和一点解决方案。JScript和JavaScript差不多（当然有所不同），但本文中讲到的内容也可用于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 obj
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) }
也就是说IE为onclick事件创造了一个匿名函数，并在函数中调用了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是什么意思
//JScript中this是不能重新赋值的，所以用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纯事件驱动的程序了。
评论 (0) All
