前兩天給一朋友講解javascript裡的this怎麼用,說了老半天要注意this所處的上下文關係,但就是沒法理解。唉,也不怪他。javascript裡的this有時候的確很讓人揪心的,連我們這些經常寫的人偶爾也會為之faint。後來,我被迫寫了個小程式,繪聲繪色外加嚴刑拷打終於解釋清楚了。Oh,my GOD!整個人心情一下得到釋放。I believe i can fly...
我乾脆把例子放這裡,加了詳細的注釋。應該說,這個例子是this變換角色最最基礎的應用體現,權當是入門吧。進階玩家就不用看了,直接略過。
1 function clickFun(value,domEle){
2 //將參數傳進來的值儲存在當前對象屬性_value裡
3 this._value = value;
4
5 //將對DOM元件的引用儲存在當前對象屬性_domEle裡
6 this._domEle = document.getElementById(domEle);
7
8 //this._domEle這時已經成為dom元件的引用。
9 //後面的純this指代當前這個對象clickFun。
10 //因此這句等價意思就是:dom元件.ButtonFun屬性 = 對象clickFun
11 this._domEle.ButtonFun = this;
12
13 this._domEle.onclick = this.clickHandler;
14
15 };
16 clickFun.prototype.clickHandler = function(){
17 //神奇的地方來了! 這裡,注意,注意,要做推論題了。
18 //先回建構函式裡。條件1:dom元件.ButtonFun屬性 = 對象clickFun
19 //再看下方代碼,條件2:this引用已經易主成dom元件了!(好個朝三暮四的廝)
20 //還觀下方代碼,條件3:this(dom元件).ButtonFun屬性 註冊給變數buttonObj
21 //綜上所述,由此推論出,變數buttonObj成為對象clickFun的引用了!
22 var buttonObj = this.ButtonFun;
23
24 //接下來發生的事情就是沒懸念了 T_T
25 var value = (buttonObj && buttonObj._value)?buttonObj._value:"unknown value";
26 alert("value : "+value);
27 //記住,這裡this這廝已經是dom元件了
28 alert("this.value : "+this.value);
29 };
30
31
32 window.onload = function(){
33 new clickFun("賦給程式的值","bt");
34 }
html代碼如下:
1 <button type="button" value="我是按鈕的值" id="bt">click me</button>
測試按鈕:click me