javascript裡的this例子講解

來源:互聯網
上載者:User

前兩天給一朋友講解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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.