BlueDavy之技術(shù)Blog

理論不懂就實(shí)踐，實(shí)踐不會(huì)就學(xué)理論！

Javascript基礎(chǔ)知識(shí)之this篇

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

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中執(zhí)行代碼會(huì)發(fā)現(xiàn)點(diǎn)擊按鈕后彈出的提示的值為"測(cè)試"，按照java的思想去看的話我們會(huì)覺得這是很奇怪的事，因?yàn)榘凑誮ava執(zhí)行的話這個(gè)時(shí)候一定是彈出"TestThis"...
那么為什么會(huì)發(fā)生這樣的狀況呢，其實(shí)就是在將按鈕的onclick事件綁定到clickButton造成的，當(dāng)事件發(fā)生時(shí)候當(dāng)前的對(duì)象為button，而不是TestThis，自然這個(gè)時(shí)候的this也就是button了...
有些時(shí)候我們是不希望這樣的，在擁有prototype的情況下我們可以用它提供的bind來解決，將上面的綁定按鈕的onclick事件部分的代碼改為：
$(btn).onclick=this.clickButton.bind(this);
再次執(zhí)行后會(huì)發(fā)現(xiàn)這個(gè)時(shí)候點(diǎn)擊按鈕彈出的提示的值就變?yōu)?TestThis"了，呵呵，其實(shí)就是prototype幫忙將這個(gè)時(shí)候的參數(shù)進(jìn)行了重新的綁定..
bind和extend是prototype中兩個(gè)非常重要的方法，去看prototype.js就會(huì)發(fā)現(xiàn)，里面很多地方都用到了Object.extend和Function.prototype.bind這兩個(gè)函數(shù)...
bind可以起到的作用就象我上面說的..
extend起到的作用則為繼承和擴(kuò)展，^_^

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

評(píng)論

# re: Javascript基礎(chǔ)知識(shí)之this篇 2006-04-05 23:11 JC

我今天寫用JS的Prototype機(jī)制也遇到同樣的問題,這樣就可以了,
this.sbutton.clickEventSender = this;
this.sbutton.onclick = function(){
this.clickEventSender.show();
}

不過使用prototype.js更為幽雅 :) 回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 兩個(gè)小問題備忘以及繼續(xù)談交互 Velocity for javascript js版事件管理器 V0.7 js版事件管理器修改版的豐富交互表格RichTable.js Javascript基礎(chǔ)知識(shí)之this篇 Prototype.js學(xué)習(xí)