在這裏分享一下我對JScript的面對象編程的一些認識和一點解決方案。JScript和JavaScript差不多(當然有所不同),但本文中講到的內容也可用於JavaScript<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
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<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />1”
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" οnclick="fun(this) ">element</p>
方法二:
<p id="text">element</p>
<script language="jscript">
function fun(){
alert(this.innerText);
}
text.onclick = fun;
</script>
上面兩個方法的動行結果是一樣的,可能你會發現方法一的οnclick="fun(this) "直現一些。方法二的fun更理性些。但方法一的fun(this)的this太麻煩了,把代碼改成:
<script language="jscript">
function fun(){
alert(this.innerText);
}
</script>
<p id="text" οnclick="fun()">element</p>
你會發現這個腳本是不能工作的。爲什麼??
當你用方法一書寫時,實際上這時onclick的處理事件是這樣的:
function anonymous() { fun(this) }
也就是說IE爲onclick事件創造了一個匿名函數,並在函數中調用了fun函數。由於調用anonymous的是對象text,所以this就把text的引用傳給了fun函數。這時fun中的形參obj就指向text。如果您把事件綁定寫成:
<p id="text" οnclick="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純事件驅動的程序了。