BlueDavy之技術Blog

理論不懂就實踐，實踐不會就學理論！

Javascript基礎知識之this篇

介紹這方面的文章也有一些，我這里打算以一個demo來說明一下，也是基于prototype進行編寫，javascript中的this看起來會和java中的this有些不同。
一個簡單的測試，為了綁定事件到一個按鈕上：

var TestThis=Class.create();

TestThis.prototype={

initialize:function(btn){

this.value="TestThis";

$(btn).onclick=this.clickButton;

}

clickButton:function(){

alert(this.value);

}

new TestThis("btnTest");

</script>

在IE中執行代碼會發現點擊按鈕后彈出的提示的值為"測試"，按照java的思想去看的話我們會覺得這是很奇怪的事，因為按照java執行的話這個時候一定是彈出"TestThis"...
那么為什么會發生這樣的狀況呢，其實就是在將按鈕的onclick事件綁定到clickButton造成的，當事件發生時候當前的對象為button，而不是TestThis，自然這個時候的this也就是button了...
有些時候我們是不希望這樣的，在擁有prototype的情況下我們可以用它提供的bind來解決，將上面的綁定按鈕的onclick事件部分的代碼改為：
$(btn).onclick=this.clickButton.bind(this);
再次執行后會發現這個時候點擊按鈕彈出的提示的值就變為"TestThis"了，呵呵，其實就是prototype幫忙將這個時候的參數進行了重新的綁定..
bind和extend是prototype中兩個非常重要的方法，去看prototype.js就會發現，里面很多地方都用到了Object.extend和Function.prototype.bind這兩個函數...
bind可以起到的作用就象我上面說的..
extend起到的作用則為繼承和擴展，^_^

posted on 2006-03-02 20:25 BlueDavy 閱讀(2071) 評論(1) 編輯收藏所屬分類: Javascript


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 兩個小問題備忘以及繼續談交互 Velocity for javascript js版事件管理器 V0.7 js版事件管理器修改版的豐富交互表格RichTable.js Javascript基礎知識之this篇 Prototype.js學習